Desain "Poni" iPhone X Yang Menjamur

Oke sepertinya ini sedikit melenceng dari Niche blog ini cuma ya karena didorong oleh keinginan yang luhur untuk menulis saya memutuskan untuk menulis saja dan persetan dengan niche. Warning ! mungkin akan membuat telinga apple fanboy merah wkwkwkw.

Oke, kali ini saya akan membahas tentang trend masa kini yang sedang melanda pasar ponsel pintar dimana ada hal yang membuat saya tertarik untuk dijadikan bahasan dalam artikel saya yaitu "Kenapa Ponsel Poni Menjamur", Bahasa lain dari ponsel poni sendiri adalah Notch yang dipopulerkan pertama kali oleh Apple melalui produknya yaitu IPhone XXX, oke ralat IPhone X.

Sebenarnya desain poni sendiri bukan pertama kali dibawa oleh Apple dengan IPhone X-nya namun pertama kali dibawah oleh Motorola dengan produknya yaitu Motofone 3 namun pada saat itu tidak sepopuler sekarang dimana salah satu faktornya mungkin kekuatan atau daya Tarik Motofone tidaklah sekuat IPhone X. Seperti diketahui apple dengan barisan apple lovers (apple fanboynya) yang selalu menunggu kehadiran desain terbaru dari produknya yang sebenarnya sama aja.(Hm akankah ada yang ke bait). Ya cuma perspektif saja, jika melihat dari jejaknya produk apple semakin mahal maka semakin minimalis, hal ini bukan alasan dimana di iPhone sendiri adalah satu produk yang mengharamkan salah satu unsur penting ponsel yaitu konektor jack dengan alasan untuk mengantisipasi penggunaan koneksi nirkabel. Tak jarang juga istilah "Give Problem Sell Solution" menjadi tepat untuk produsen 1 ini, menghilangkan fitur penting dan menjualnya dalam versi eksternal, hmmm mungkin strategi pasar.

Oke skip. Bulan September 2017 Apple meluncurkan sebuah produk luar biasa yang biasa diluar yaitu iPhone X yang tanpa sadar memiliki pengaruh besar dalam produksi ponsel-ponsel pintar produsen lain. Ada produsen ponsel malu-malu untuk menyontek desain dari iPhone X namun tak sedikit yang terang-terangan contek langsung ceplok.

Fifo, Usus & Offo : Bro, gue nyontek tugas lo yah.

Apple : Yaudah, tapi bedain dikit yah.

Fifo, Usus, & Offo : Oke bro.

Namun ada produsen yang tak terpengaruh pada power dari iPhone X yaitu rivalnya yaitu Samsung yang tetap teguh pada pendiriannya untuk menggunakan desain sendiri dan malah mengkritik desain dari iPhone X dalam iklan Galaxy Note 8. Mungkin tak kuat iman atau untuk menekan biaya riset supaya dapat menekan harga jual produksi, banyak produsen akhirnya mengekor pada desain Anti Bezel Bezel Club iPhone X. bukan Vendor kecil, namun sekelas produsen sekelas Asus, Oppo, Vivo pun mengikuti jejak iPhone X ini.

Dimulai dari Asus Zenfone 5

Vivo V9

Dan Oppo F7

Gak perlu dijelaskan satu-satu karena emang bedanya dimana wkwkwkw. Posisi dari beberapa fitur pun sama hanya bedanya pada bagian belakang dimana logo Apple digantikan oleh sensor sidik jari, tapi pertanyaannya kenapa tidak langsung saja sensor sidik jarinya berbentuk logo Apple, hmmm.

Memang hadirnya iPhone X sendiri memang dihadirkan khusus untuk menjangkau pengguna high level sehingga untuk memenuhi permintaan pasar para produsen-produsen ini mulai memanfaatkan kesempatan untuk mengisi daerah mid-level kebawah dengan ponsel yang memiliki tampilan serupa. Dan bisa juga produsen-produsen ini menghadirkan ponsel berponi di ponsel ber-sistem operasi Android sehingga mereka yang terbiasa dengan Android namun ingin atau tertarik pada desain berponi ini dapat memilikinya.

Nampaknya upaya dari produsen-produsen yang meniru desain poni milik iPhone X ini cukup sukses dimana selain desain yang cantik mereka juga menawarkan ponsel yang tangguh dengan spesifikasi kelas tinggi seperti RAM dan Processing Unit yang dapat dibilang kelas sultan namun tetap hadir dengan harga yang dapat dijangkau sehingga dapat bersaing dalam pasang karena vendor ini tidak perlu mengeluarkan biaya banyak dalam riset sehingga tidak membebani harga barang. (niru ko risetnya mahal wkwk).

Baik Itu hanyalah opini saya yang berkembang seiring menjamurnya ponsel-ponsel dengan desain yang sama. Tak sependapat, silahkan berdiskusi.

Cara Menggunakan If Else dan Else If Pada JS

Kali ini saya akan memberikan pembelajaran dasar pada javascript, ya gak perlu sulit sulit karena saya bukan expertnya JS :D.
Berbicara tentang pengkondisian pada JS sebenarnya sama saja pada pengkodisian pada HTML khususnya HTML Blogger yang kita kenal dengan Tag Kondosinal, namun dalam penulisannya jelas berbeda.

Baik, sebelumnya mari kita berkenalan dulu dengan syntaxnya.

if (kondisi 1){
            Fungsi Utama
        }
        else if (kondisi 2) {
            Fungsi Alternatif
        }
        else {
            Fungsi Alternatif kedua
        }

Dimulai dengan if tentunya sebagai kondisi utama lalu diikuti dengan else if yang sebenarnya adalah opsional dan gak wajib karena bisa dipake jika kamu ingin memiliki lebih dari dua kondisi, dan yang terakhir adalah else kondisi alternative kedua setelah else if.
Jadi jika nilai pada if tidak sesuai, maka otomatis dia langsung ke else if yang sebagai alternatif, namun jika yang else if masih tidak sesuai maka bergeserlah dia ke else.

Sebenarnya jika kamu hanya ingin menggunakan if dan else bisa saja menjadi.

if (kondisi 1){
            Fungsi Utama
        } else {
            Fungsi Alternatif kedua
        }

Praktek Gan !

Saya tidak akan menjelaskan secara spesifik penggunaanya, namun untuk sedikit pemahaman ini saya buatkan contohnya. Cek link berikut.

Demo

Untuk simple source code'nya gunakan kode berikut.

  var jawab = prompt('Film apa yang jargonnya "DEMI DEWA ?. (A) Film India, (B) Film JAV');
  if (jawab == 'a'){
   alert('Jawaban Benar')
  } 
  else if (jawab == 'b') {
   alert('Jawaban Salah')
  }
  else {
   alert('Pilihan Jawaban Tidak Ada')
  }

Diatas yang saya tandai dengan warna merah itu gunanya memunculkan semacam kotak dialog yang dapat diisi oleh user lalu data yang diisikan oleh user tersebut akan dijadikan variabel nantinya.
Nah setelah variabel sudah mendapatkan data maka didalam kondisi if akan disandingkan dengan nilai lain.
jawab == 'a' dapat dibaca "jawab sama dengan a" atau jika ditambah menjadi if (jawab == 'a') {fungsinya} dapat dibaca "jika jawab sama dengan a jalankan fungsi berikut".
Untuk dipahami, penggunaan string atau tanda kutip hanya digunakan pada objek seperti huruf (contoh: 'angka') kalo angka gak perlu ada string lagi tapi langsung aja tulis angkanya (contoh: 1)

Oke,sampai disini aja, silahkan kembangkan kode diatas saya harap dapat bermanfaat, sekian dan terima kasih.

Cara Membuat Animasi Setelah Halaman Web/Blog Termuat

Kali ini saya akan kembali membahas tentang pembuatan efek/animasi sederhana, ya walaupun saya katakan sederhana namun efek ini sangat mungkin untuk dikembangkan oleh kawan dikarenakan saya hanya memberikan contoh sederhana dan sangat mendasar tentang penggunaannya.

Untuk kali ini saya akan kembali menggunakan jQuery.

Apasih yang saya maksud dengan Cara Membuat Animasi Setelah Halaman Web/Blog Termuat., mungkin kalian pernah liat ada blog yang memasang animasi seperti ini namun kalian tidak mengenalinya, contoh seperti elemen yang awalnya tidak ada namun setelah sekian detik tiba-tiba muncul dari samping/atas/bawah atau warna halaman Web/Blog yang awalnya kuning setelah sekian detik berubah menjadi merah, nah itu bisa kita buat sendiri dengan cara ini.

Demo

Seperti itulah gambarannya

Praktek Yuk !

Oke, tidaklah mewah kode yang akan kita gunakannya kali ini karena hanya menggunakan seupil baris jquery dan dioleskan dengan sedikit CSS.
Pasang jquery dibawah ini diatas </body>

<script>
$(window).on('load',function(){
 $('.paragraf12').addClass('muncul')
})
</script>

Kan tadi pake CSS, kenapa gak CSSnya duluan yang dipasang ?
Oke, ini dimaksudkan karena saya akan menjelaskan sedikit tentang sebuah event yang akan kita gunakan yaitu onload.
Sesuai namanya, onload atau bahasa Indonesianya pada (saat)/(setelah) termuat yang mengartikan bahwa script akan mengeksekusi fungsi yang ada didalam kurung kurawal itu pada kondisi halaman telah sepenuhnya termuat atau telah terbaca XMLnya secara utuh. Jadi kalo web/blog yang menggunakan cara ini namun saat dibuka blognya ngadat karena jaringan visitor lemboy, maka fungsinya tidak akan tereksekusi dan animasi pun tidak akan jalan. Seperti itulah sedikit pemahaman saya.

Seperti yang saya katakan diatas, kita menggunakan sedikit CSS. Mengapa kita perlu CSS ?. Seperti ini, coba kawan lihat lagi kedalam jQuery diatas, terdapat sebaris kode yang berisi

$('.paragraf12').addClass('muncul')

Yang artinya Class ditambahkan dengan Class yang baru, yang namanya Class pasti akan berkaitan dengan namanya CSS, dikarenakan akan ada perubahan design CSS pada saat jquery menambahkan Class yang baru. Oke inilah CSSnya

.paragraf12 {opacity:0;transform:translate(0,60px);transition:1s}
.paragraf12.muncul {opacity:1;transform:translate(0,0)}

Terdapat 2 class yang sama namun berbeda, jika kita lihat class yang kedua maka kita akan melihat adanya tambahan Class baru dibelakangnya yang juga dibarengi dengan Value&Property yang berbeda.

Kenapa keduanya berbeda ?

Ini sederhananya saya jelaskan.
Pada Class pertama kita akan melihat opacity yang bernilai 0 yang artinya transparansi elemen akan 100% atau tidak terlihat dan transform elemen yang di Translating atau digerakkan secara vertikal dari posisi semula dikarenakan nilainya 0,60px (H,V), sedangkan Class kedua lebih kepada menetralkan elemen ke posisi Semula yang awalnya opacitynya 0 menjadi 1 yang artinya elemen akan terlihat kembali dan Translating atau digerakkannya elemen ke posisi Semula atau 0,0.

Perbedaan akan jelas terlihat pada saat sebelum dan sesudah termuatnya halaman Web/Blog, ini dikarenakan Pada Class pertama CSS akan tereksekusi pertama kali saat anda masuk halaman namun belum sepenuhnya termuat secara utuh, jadi elemen yang diberikan CSS ini akan terlihat seperti menghilang padahal sebenarnya tidak, kenapa tidak ?
dikarenakan CSS hanya menggeser elemen kebawah sejauh 60px dan dibuat transparan (tidak terlihat) seakan elemen menghilang entah kemana.
Nah setelah halaman web termuat secara utuh, CSS yang kedua akan tereksekusi dan sesuai fungsinya dia akan mengembalikan elemen ke posisi semula jadi seakan elemennya melayang ke posisi awal,
 *Yang maksudnya utuh adalah browser tidak akan melakukan loading lagi.


Untuk penggunaannya mudah saja, cukup mengubah Class diatas dengan Class elemen yang ingin diberi animasi.

Mungkin panjang penjelasannya yah kawan, tapi semoga saja dapat dipahami.
Sekian artikel saya, terima kasih.

Fungsi CDATA Dalam JS dan CSS

Jika kamu sering mengotak-atik CSS maupun JS atau mungkin cuma drag and drop kode dari orang lain kamu terkadang akan menemukan yang namanya CDATA atau tertulis // <![CDATA[, kenapa saya bilang terkadang ? karena tidak semua JS dan CSS menggunakan itu. Oke, pernahkah terlintas rasa penasaran akan fungsi dari CDATA ini ? jika iya silahkan lanjutkan membaca karena kita akan mengulasnya disini dan mungkin ini hanyalah pembelajaran kecil-kecilan, namun untuk menambah wawasan kita tidak ada salahnya kita pelajari ini.

CDATA, menurut salah satu pengguna stackoverflow.

CDATA adalah kumpulan XML yang menetapkan isi tag yang biasanya #PCDATA - mengurai data karakter, untuk dijadikan sebagai CDATA, yaitu data karakter non-parsing (Tidak terurai).

Menurut saya, CDATA ini memiliki fungsi untuk mencegah penguraian yang dilakukan XML pada character tertentu sepertu &,<,>,",' dll. Dari beberapa kasus yang saya temui ketika saya membuat sebuah script ataupun CSS yang didalamnya terdapat karakter seperti diatas awalnya normal dengan menunjukkan wujud aslinya, namun ketika saya save HTML dan keluar lalu masuk lagi, yang terjadi adalah karakter diatas berubah wujud menjadi terurai, contohnya yang terjadi pada CSS tepatnya properti content:"" yang diurai menjadi content:&quot;&quot; dan JS yang terjadi pada data String '#monyet' diurai menjadi &#39;#monyet&#39; . Untuk lebih jelasnya perhatikan contoh kode dibawah.

Tanpa CDATA

<script>
$(function(){
if($(&quot;#HTML2&quot;).length){
var o=$(&quot;#HTML2&quot;),i=$(&quot;#HTML2&quot;).offset().top,t=$(&quot;#HTML2&quot;).height();$(window).scroll(function(){
var s=$(&quot;.bloginfo&quot;).offset().top-t-20,n=$(window).scrollTop(),f=$(window).width();
if(i&lt;n&amp;&amp;f&gt;1200?o.css({position:&quot;fixed&quot;,top:0,width:&quot;291px&quot;}):o.css(&quot;position&quot;,&quot;static&quot;),s&lt;n){var c=s-n;o.css({top:c})}})}});
</script>

Dengan CDATA

<script>
//<![CDATA[
$(function(){if($("#HTML2").length){var o=$("#HTML2"),i=$("#HTML2").offset().top,t=$("#HTML2").height();$(window).scroll(function(){var s=$(".bloginfo").offset().top-t-20,n=$(window).scrollTop(),f=$(window).width();if(i<n&&f>1200?o.css({position:"fixed",top:0,width:"291px"}):o.css("position","static"),s<n){var c=s-n;o.css({top:c})}})}});
//]]>
</script>

Seperti yang dikatakan diatas, kode tidak akan terurai jika menggunakan CDATA.
Semoga ada sedikit bayangan tentang fungsi CDATA, jika ada tambahan silahkan ditambahkan dibawah. Sekian dan terima kasih.

Ngarepnya SNMPTN Dapatnya SBMPTN

Setelah sekian lama saya melalui lika-liku perjalanan pendaftaran masuk PTN, akhirnya saya sampai juga di bagian pembayaran UKT dan sudah menjadi MABA. Dalam artikel ini, saya akan OOT dari tema blog saya, tapi tak apalah sekedar berbagi pengalaman :D.

Menjadi seorang siswa yang tidak tahu apa-apa mengenai sistem penerimaan mahasiswa di perguruan tinggi terutamanya PTN, saya sedikit tak acuh (tak peduli) dengan apa yang akan saya hadapi nanti ketika sudah lulus dari SMA nanti, namun menjelang akhir dari semester 5/6, kami para siswa baru mendapat sosialisasi dari pihak sekolah tentang sistem penerimaan mahasiswa ini, disanalah perhatian saya mulai fokus kesana.

SNMPTN

Awalnya saya mendengar tentang SNMPTN, wah apa itu ?, SNMPTN atau Seleksi Nasional Masuk Perguruan Tinggi Negeri adalah jenis seleksi masuk PTN yang tidak memerlukan tes tertulis namun melalui seleksi nilai yang ada pada raport siswa. Wah dalam hati saya sudah percaya diri, bagaimana tidak, hal yang membuat saya merasa seperti itu adalah karena eskalasi nilai saya yang tiap semester terus meningkat (saya rasa begitu =D), tak ada yang tidak bisa meyakinkan saya bahwa saya tidak akan lolos dalam jalur ini.
Singkat cerita, sampailah di tanggal 26 april dimana diumumkannya hasil SNMPTN, dig dig dig, wah lolos gak yah, saya pun menenangkan hati jika seandainya saya mendapatkan kemungkinan terburuk, perlahan saya mencari  server mirror Pengumuman untuk mendownload PDF hasil pengumuman di salah satu website, setelah terbuka saya pun mulai mencari nama saya siapa tahu ada keselip, tapi tetap tidak juga ketemu, kemudian saya cari dengan cara yang lebih akurat yaitu menggunakan CTRL+F, saya cari dengan nama awal saya dan KETEMU!!! tapi nama orang, oke tetap sabar namun sudah mulai panik, kemudian saya mencari dengan nama kedua dan ketiga saya dan hasilnya NIHIL!!! tidak ada disana, wah galau rasa hati, lebih dari rasa ditinggal cinta.
Nyesal, itulah yang saya rasakan dengan perjuangan saya untuk kenaikan nilai, dari yang tidak memerlukan belajar sampai memasukannya kedalam daftar kegiatan saya juga sudah saya lakukan, namun apalah daya, yang pentingkan saya dapatkan ilmu dari kegiatan itu.

SBMPTN

Setelah sekian lama saya coba memfokuskan diri pada seleksi kedua yaitu SBMPTN, wah apa lagi itu ? SBMPTN atau Seleksi Bersama Masuk Perguruan Tinggi Negeri, sama seperti SNMPTN yang berupa seleksi masuk PTN, namun yang berbeda adalah pada cara penyeleksiannya, disini para peserta akan di tes secara tertulis dengan media berbasis kertas dan juga komputer, disini saya beruntung karena mendapatkan tes melalui komputer/CBT, karena disini pekerjaan saya akan dimudahkan dan lebih hemat waktu, contohnya seperti pengisian biodata, pemilihan dan penggantian jawaban jauh lebih cepat dari yang berbasis kertas.
Singkat cerita lagi, akhirnya sampai pada tanggal 16 Mei, dimana sang gebetan ulang tahu.. Ralat, dimana tes SBMPTN dilaksanakan, karena telah mempersiapkan otak untuk mempelajari materi SBMPTN yang jauh berbeda dari soal UN yah walau singkat yaitu sekitar 1 bulan tapi saya akan sangat terbantu.
Melihat soal SBMPTN yang wah sekali dan waktu yang disediakan juga sangat singkat membuat saya merasa sedikit pesimis dan sudah memandangan kearah jalur Mandiri (jalur ke-3 masuk PTN) , namun tetap harus saya hadapi.
Kembali singkat cerita, saya sampai dihari pengumuman yang menurut saya kali ini biasa saja karena setelah melihat berita tentang penerimaan SBMPTN hanya 148k dari 797k peserta membuat saya tidak berharap pada hasil kali ini, jadi pasrah saja.
Sedikit kesulitan dalam mengecek hasil dikarenakan server yang kepenuhan, akhirnya saya bisa membuka hasil secara perlahan disalah satu web mirror, Wah saya lulus ! Terima kasih Tuhan.

Mohon maaf ada bagian yang harus dihilangkan. Wah ini luar biasa, walau tidak terlalu berharap, namun ini sebenarnya target hati kecil saya yang ingin lulus melalui tes supaya lebih terasa usahanya, dan mungkin inilah cara Tuhan memberi saya jalan untuk masuk PTN :D.

Daftar SBMPTN 2 Kali

Sebagai informasi, sebelum saya mendapatkan tes CBT, saya sebenarnya telah mendaftar dan mendapatkan tes PBT, namun saya ragu dengan pilihan yang pertama karena saya masuk dalam kategori campuran yang dimana saya harus dihadapkan pada soal-soal yang tidak saya kuasai khususnya SAINTEK, akhirnya setelah pikir-pikir saya memilih untuk mendaftar lagi dan memilih semua jurusan yang sedikit saya kuasai yaitu Soshum yang saya rasa lebih rasional untuk diperjuangkan dan juga pasti efektif untuk memuluskan perjuangan :D.

Tips

 

Sedikit pengalaman ini saya ingin memberikan tips untuk para calon peserta SNMPTN selanjutnya untuk terus mengembangkan nilai dan jangan sampai anjlok terlalu dalam, dan jika ada kesempatan untuk mengikuti sebuah kejuaraan seperti olimpiade diambil saja siapa tahu mendapatkan hasil yang memuaskan, karena hal ini juga sangat berpengaruh tentunya pada penilaian SNMPTN karena jika anda memiliki piagam atau apapun yang serupa hasil dari kejuaraan tersebut maka itu akan disertakan kedalam data yang akan di input oleh pihak sekolah nanti ke panitia SNMPTN.

Untuk SBMPTN, ketahuilah kamu akan dihadapkan pada soal yang mungkin tidak pernah atau jarang kamu hadapi sebelumnya, seperti Numerikal, Figural, dll. Saya menyiapkan ini dalam waktu sekitarkurang lebih 1 bulan dengan berbagai materi di internet dan juga buku yang saya beli di Play Buku, namun tentu sangat disarankan diatas itu supaya jauh lebih siap. Materi SBMPTN itu dinamis yah sama seperti soal UN pada umumnya, kadang ada materi yang ada kadang tidak, atau mungkin saja angkatan kamu nanti soalnya jauh berbeda dari tahun ini, jadi sekali sangat disarankan untuk menyiapkan materi dan membaca perkembangan soal SBMPTN ini seperti prediksi soal dll, di internet tentu banyak jadi tidak sulit menemukannya.

Banyaklah berlatih, pelajari semua materi sebisa mungkin supaya ada sedikit jaminan lulusnya nanti. :D. Oh ya, jangan lupa pilih jurusan sesuai kemampuan,jangan dipaksa jika tidak mampu.

Oke, sekian dari saya, terima kasih.

Pentingnya Meta Viewport Untuk Web Responsive

Meta viewport, mungkin ini meta yang sedikit asing untuk para blogger yang jarang mengutak-atik meta tag, tetapi walaupun asing meta tag ini tentu sangat vital perannya dalam Web yang ingin tampil responsive.

Kenapa bisa begitu ?
Karena viewport ini meta salah satu fungsinya yang dapat menginstruksikan isi web untuk melakukan penyesuaian pada lebar perangkat yang sedang berjalan. Berikut isinya.

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

Inti dari meta ini adalah contentnya, jika kita melihat dalam content terdapat properti ;

Width=device-width

Properti ini memiliki perintah supaya elemen  web dapat menyesuaikan diri pada lebar perangkat, sehingga tidak akan terjadi yang namanya overflow atau scroll horizontal saat web terbuka menggunakan perangkat yang lebih kecil.

Initial-scale=1

Ini menentukan skala awal yang akan terlihat saat pertama kali web terbuka, yang artinya skala web tidak mengalami pembesaran atau 1:1.

Maximum-scale=1

Dengan ini kawan dapat membatasi zooming atau pembesaran pada blog kawan yang dilakukan oleh pengunjung.

Penggabungan Dengan Media Queries

Nah, jika anda sudah menggunakan Meta Viewport maka anda juga dapat menggunakan media queries sebagai penyesuaian elemen-elemennya supaya tidak berantakan pada saat web beradaptasi dengan ukuran perangkat. Untuk penggunaannya, saya sudah menulisnya di artikel berikut.

• Membuat Blog 100% Responsive Dengan Media Queries

Diatas sudah saya jelaskan cara penggunaan media queries, jadi silahkan disimak.
Saya kira cukup disini, saya harap bermanfaat sekian dan terima kasih.

Membuat Effect Parallax Dengan Jquery Sederhana

Parallax, ya apa itu parallax ?

Menurut wikipedia, Parallax adalah perubahan kedudukan sudut dari dua titik diam, relatif satu sama lain, sebagaimana yang diamati oleh seorang pengamat yang bergerak. Secara sederhana, paralaks merupakan pergeseran yang tampak dari suatu objek (titik 1) terhadap latar belakang (titik 2) yang disebabkan oleh perubahan posisi pengamat.

Baik, itu adalah pengertian parallax menurut wikipedia.
Jika kita melihat kutipan diatas, kita menemukan sebuah definisi singkat seperti yang saya tandai dengan tulisan cetak miring, iya saya harap melalui definisi singkat parallax tersebut kawan mendapatkan gambaran tentang effect parallax yang akan kita buat kali ini.

Parallax ini menurut saya adalah effect sederhana yang luar biasa keren, dengan parallax kita bisa membuat sebuah animasi saat scrolling, membuat sebuah animasi pada satu object yang akan bekerja pada saat scrolling itu sangat mungkin sekali dengan parallax. Jika masih penasaran apa itu parallax, cek demo berikut.

Demo

Bagaimana, keren bukan ?
Itu hanyalah satu dari sekian banyak effect yang bisa kita buat, dan itu adalah dasar parallalax yang saya buat supaya kawan dapat mengembangkan.
Effect parallax ini work dan kompatibel pada blogger pastinya, karena saya sudah menggunakannya pada blog saya yang lain, silahkan cek disini.

www.ips2gram.id

Praktek

Seperti yang tertulis pada judul,  Membuat Effect Parallax Dengan Jquery Sederhana, ya tidak ada yang sulit disini. Letakkan jQuery ini diatas </body>

<script>
$(window).scroll(function(){
 var jarak=$(this).scrollTop();
 $('.UBAHCLASS-INI').css ({
 transform : 'translate(0px,'+ jarak/1.3 +'%) rotate('+ jarak/5 +'deg)'
 });
})
</script>

Nah, tidaklah sepanjang yang kawan pikirkan bukan ?. Oh ya, pastikan kawan sudah memasang library jQuery yah supaya effect ini dapat berjalan.
Didalam jquery sangat jelas kita menjalankan sebuah CSS pada object, yaitu transform translate yang memiliki fungsi menggeser secara vertikal & horizontal object, dan transform rotate yang memiliki fungsi memutar object dengan satuan deg. Dengan penghitungan yang dinamis yang mengacu pada angka yang dihasilkan variabel, transform dapat terlihat hidup. Sebagai informasi, kita sudah membuat sebuah variabel bernama jarak.

Penyesuaian

Untuk penyesuaian, silahkan ubah class diatas dengan class atau ID object yang ingin dibuat effect parallax.

Oke itu saja, saya rasa cukup jelas

Membuat Kotak Author Info

Setelah lama tidak menulis artikel seperti ini karena sibuk ngurus template yang gak mutu itu, akhirnya saya bisa nulis lagi pada jam /4 ini. Oke, membuat kotak author info ini tidaklah sulit, karena kita hanya cukup memainkan sedikit CSS dan perpaduan HTML maka terbentuklah sebuah author info yang nyaman dipandang ini. Tidak ada yang spesial sih sebenarnya dengan tampilannya, tapi ya sudahlah.

Sebenarnya membuat kotak author atau about me box ini sudah saya bahas di artikel sebelumnya

• Cara Membuat About Me Box

Namun kotak author atau about me box kali ini kita desain ulang supaya lebih joss :D.
Sebelum memasang, pastikan sudah instal font awesome.

Demo

Praktek

Letakkan CSS dibawah ini diatas </style>, tetapi hindari yang ada dalam tag kondosional

.inner_wrapper {background:#fff}
.aboutme-img {position: relative;height: 150px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEaUesVqNmSQ9-QDtaKTiHpFC4spa7QD_t9giEjmuqv2IbXWKf4eL3OclwG6B__W-f1FPoko4LSQ9JOHbKelQNw2Ch-E_2B-SH3Ekvlkwt7lR_B5PGX44qsh4y6vmJ6_-lyWJSuxl7FjdH/s1600/bg6.jpg) no-repeat top;background-size:cover}
.aboutme-img img {width: 100px;height: 100px;display: block;border-radius: 50%;margin: 0 auto;position: relative;top: 100px;}
.aboutme-info {font-size: 13px;padding: 66px 20px 10px;text-align: center;}
.aboutme-info h4 {margin-bottom: 10px;text-align: center;font-size: 16px; text-transform: uppercase;color: #202020;font-weight: 700;}
.aboutme-ikon {display: block;margin: 0 auto;padding: 10px 10px 20px;position: relative;}
.aboutme-ikon .sosialmedia {width: 100%;display: block;text-align: center;}
ul.sosialmedia {padding:0}
.sosialmedia .aboutme-icon a {font-family:fontawesome;font-weight:400;color:#222;}
.sosialmedia .aboutme-icon, .sosialmedia .ig,.sosialmedia .fb, .sosialmedia .twt, .sosialmedia .ggl{border-radius: 3px;background: #f6f6f6;height: 42px;width: 42px;line-height: 42px;display: inline-block;border: 0;margin: 0;padding: 0;}
.sosialmedia li.fb:hover, .sosialmedia li.fb:hover a {color: #fff;background-color: #3b5998;}
.sosialmedia li.twt:hover, .sosialmedia li.twt:hover a {color: #fff;background-color: #00aced;}
.sosialmedia li.ggl:hover, .sosialmedia li.ggl:hover a {color: #fff;background-color: #dd4b39;}
.sosialmedia li.ig:hover, .sosialmedia li.ig:hover a {color: #fff;background-color: #dd4b39;}

Silahkan kawan sesuaikan sendiri, saya ngantuk hahaha.
Oke selanjutnya pasang HTML dibawah ini kedalam Widget di Tata Letak.

<div class="inner_wrapper"> 
<div class="aboutme-img"> 
<img alt="Author" src="https://i0.wp.com/santuarie.files.wordpress.com/2017/03/ys2.png" title="Author" /> 
  </div> 
</div> 
<div class="aboutme-info"> 
  <h4>Brayen Luhat</h4> 
  <p>Selamat datang orang lemah yang kalo joging pake sepatu. Saya no, saya pake sendal refleksi, dan itu sakit!</p> 
</div> 
<div class="aboutme-ikon"> 
  <ul class="sosialmedia"> 
    <li class="twt"><a href="//twitter.com/brayenid" rel="nofollow" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a></li> 
    <li class="ggl"><a href="//plus.google.com/u/0/+Brayenluhat" rel="nofollow" target="_blank" title="Google+"><i class="fa fa-google-plus"></i></a></li> 
    <li class="ig"><a href="//instagram.com/brynfree" rel="nofollow" target="_blank" title="IG"><i class="fa fa-instagram"></i></a></li> 
  </ul> 
</div>

Saya rasa kode diatas cukup jelas, silahkan disesuaikan sendiri kawan.
Oke saya rasa itu saja, jika kesulitan silahkan bertanya pada saya. Sekian dan terima kasih.

Template Pak Tani 21 Untuk Blog Film

Lagi saya akan menawarkan sebuah template hasil project saya secara premium, template yang sangat cocok untuk kawan yang punya blog untuk sharing khusus film/anime, template ini memiliki tampilan yang sama dengan template sebelumnya, hanya saja ada fitur tambahan yaitu video streaming yang di adopsi dari youtube.

Demo

Ada beberapa fitur yang sobat akan dapatkan didalam template ini, diantaranya ;

1. Meta Tag
2. Unlimited Page Navigation
3. No Encrypted Script
4. No Credit (On page-skin or footer link)
5. Dropdown Menu Ready
6. Grid Style
7. Ads Ready
8. Valid HTML5 (validator.w3.org) - cek
9. Seo (based on Chkme) - cek
10. Responsive (based on responsinator) - cek
11. Google Rich Snippet & Schema.org Passed (based on Google Rich Snippet) - cek
12. Slideshow
13. Disqus Comment Ready
14. Label Recent Posts 
15. Breadcrumbs (Indexed on Google)
16. 1 Colum on homepage & static page, 2 colums on post page 
17. 404 Page Ready
18. Share To Social Media
19. Related Posts
20. Subscribe Form
21. No suspicious script or redirect link script
22. Auto nofollow for external link
23. Lazy Load 
24. Streaming Video Style

Ya itu sedikit fitur dalam template ini, untuk demonya bisa klik link berikut,

Demo

Harga yang saya tawarkan sangat standar, yaitu Rp50.000,via transfer (no.rek akan dikirim saat transaksi)anda akan mendapatkan free update (jika ada). Untuk guide-nya akan saya bagikan secara pribadi, jika tertarik silahkan hubungi saya melalui email.

bfenomenal@gmail.com

Sekian dan terima kasih.

Template Paktani Untuk Blog Film

Kali ini saya akan membagikan sebuah template hasil project subuh saya secara GRATIS, template yang sangat cocok untuk kawan yang punya blog untuk sharing khusus film/anime. Ada beberapa fitur yang sobat akan dapatkan didalam template ini, diantaranya ;

1. Meta Tag
2. Unlimited Page Navigation
3. No Encrypted Script
4. No Credit (On page-skin or footer link) - Premium Only
5. Dropdown Menu Ready
6. Grid Style
7. Ads Ready
8. Valid HTML5 (validator.w3.org) - cek
9. Seo (based on Chkme) - cek
10. Responsive (based on responsinator) - cek
11. Google Rich Snippet & Schema.org Passed (based on Google Rich Snippet) - cek
12. Slideshow
13. Disqus Comment Ready
14. Label Recent Posts 
15. Breadcrumbs (Indexed on Google)
16. 1 Colum on homepage & static page, 2 colums on post page 
17. 404 Page Ready
18. Share To Social Media
19. Related Posts
20. Subscribe Form
21. Auto nofollow for external link
22. Lazy Load

Ya itu sedikit fitur dalam template ini, untuk demonya dan download bisa klik link berikut,

Demo Download

Cek untuk versi premium Disini untuk fitur yang lebih lengkap lagi.
Sekian dan terima kasih.

Kalo gak mau pake link kredit, saya sudah sediakan premiumnya gan aman dari link kredit

Cara Paling Mudah Memotong Snippet Tanpa JS

Pernahkah kawan merasa risih dengan snippet bawaan blogger yang memiliki kode <data:post.snippet>  terasa terlalu panjang terutama pada post homepage ? Jika pernah kita sama, selama ini yang saya gunakan adalah snippet yang sudah diatur dalam JS, jadi mengatur snippet bukan masalah. Namun, untuk sedikit meringankan kerja browser untuk membaca XML blog kita, kita akan mengganti settingan snippet tersebut menggunakan hanya sebaris kode HTML.Ya, hanya sebaris, ngapain panjang-panjang kalo ada yang pendek dan ringan.

Baiklah kita mulai praktekkan.
Sebenarnya cara ini sangatlah simple dan pastense, jika kamu menggunakan auto read more yang menggunakan kode <data:post.snippet> sebagai pengambil snippet, kamu cukup mengubahnya dengan kode dibawah ini.

<b:eval expr='snippet(data:post.body, {length: 50, links: false})'/>

Angka yang saya tandai adalah panjang karakter yang ingin kamu tentukan, terserah silahkan diubah sesuka hati :D.

Singkat saja bukan ?, baik sekian artikel saya. Terima kasih.

Cara Nyeleneh Menggambar Dengan CSS

Entah bingung ingin nulis apa, tapi yaudahlah lebih baik saya isi dengan  tutorial nyeleneh ini yang sebenarnya jelek dan gak penting sekali.

Menggambar secara digital bisa kita lakukan dengan berbagai software gratis jika memakai crack seperti Photoshop, namun apalah daya jika hanya punya laptop kecil yang jalanin Mozilla saja ngadat. Sehingga ide menggambar dengan CSS pun terbayang, yah walaupun tampak seperti Minecraft.

Tutorial ini adalah tutorial yang sangat dasar, jika kamu pernah belajar CSS dasar, maka trik ini dibawahnya dasar lagi. Sebenarnya menggambar dengan CSS bisa kita sempurnakan lagi dan hasilnya bisa seperti gambar hasil kreasi photoshop, namun karena malas mikir, maka yang simple saja sebagai dasar pemahaman.

Disini saya menggunakan box-shadow sebagai media menggambar, jadi gambar ini punya elemen induk/utama yang berupa kotak yang tidak jelas yang dibuat dengan CSS sederhana {width:1em;height:1em;background:red;overflow:hidden}, jika selector itu dipanggil maka akan menghasilkan sebuah kotak kecil, nah kotak itu yang akan kita kreasikan menggunakan box-shadow.

Klik link dibawah

Demo

Untuk Source Code nya bisa di copy paste dari sini.

<style>
.bungkusgalon {width: 50px;margin: auto;margin-top: 20px}
#logo {animation: mantul 3s infinite;border-radius: 0 6px 5px;font-size:20px;padding: 4px;background: #ee352a;font-family: arial;color: #fff;margin:auto;margin-top:170px;margin-left:520px;width: 1em;height: 1em;background: red;overflow: hidden;box-shadow: 0 1em 0 0 red,0 2em 0 0 red,0 3em 0 0 red,0 4em 0 0 red,0 5em 0 0 red,0 6em 0 0 red,0 7em 0 0 red,0 8em 0 0 red,1em 8em 0 0 red,2em 8em 0 0 red,3em 8em 0 0 red,4em 8em 0 0 red,5em 8em 0 0 red,6em 8em 0 0 red,7em 8em 0 0 red,7em 7em 0 0 red,6em 6em 0 0 red,5em 5em 0 0 red,4em 4em 0 0 red,5em 3em 0 0 red,6em 2em 0 0 red,7em 1em 0 0 red,7em 0 0 0 red,6em 0 0 0 red,5em 0 0 0 red,4em 0 0 0 red,3em 0 0 0 red,2em 0 0 0 red,1em 0 0 0 red,9em 0 0 0 red,9em 1em 0 0 red,9em 2em 0 0 red,9em 3em 0 0 red,9em 4em 0 0 red,9em 5em 0 0 red,9em 6em 0 0 red,9em 7em 0 0 red,9em 8em 0 0 red,10em 0 0 0 red,11em 0 0 0 red,12em 0 0 0 red,13em 0 0 0 red,14em 0 0 0 red,15em 0 0 0 red,16em 1em 0 0 red,16em 2em 0 0 red,15em 3em 0 0 red,14em 4em 0 0 red,13em 5em 0 0 red,14em 6em 0 0 red,15em 7em 0 0 red,16em 8em 0 0 red}
@keyframes mantul{
    0%    {transform: rotate(0deg);background: red;box-shadow: 0 1em 0 0 red,0 2em 0 0 red,0 3em 0 0 red,0 4em 0 0 red,0 5em 0 0 red,0 6em 0 0 red,0 7em 0 0 red,0 8em 0 0 red,1em 8em 0 0 red,2em 8em 0 0 red,3em 8em 0 0 red,4em 8em 0 0 red,5em 8em 0 0 red,6em 8em 0 0 red,7em 8em 0 0 red,7em 7em 0 0 red,6em 6em 0 0 red,5em 5em 0 0 red,4em 4em 0 0 red,5em 3em 0 0 red,6em 2em 0 0 red,7em 1em 0 0 red,7em 0 0 0 red,6em 0 0 0 red,5em 0 0 0 red,4em 0 0 0 red,3em 0 0 0 red,2em 0 0 0 red,1em 0 0 0 red,9em 0 0 0 red,9em 1em 0 0 red,9em 2em 0 0 red,9em 3em 0 0 red,9em 4em 0 0 red,9em 5em 0 0 red,9em 6em 0 0 red,9em 7em 0 0 red,9em 8em 0 0 red,10em 0 0 0 red,11em 0 0 0 red,12em 0 0 0 red,13em 0 0 0 red,14em 0 0 0 red,15em 0 0 0 red,16em 1em 0 0 red,16em 2em 0 0 red,15em 3em 0 0 red,14em 4em 0 0 red,13em 5em 0 0 red,14em 6em 0 0 red,15em 7em 0 0 red,16em 8em 0 0 red}
    25%    {transform: rotate(-20deg);background: green;box-shadow: 0 1em 0 0 green,0 2em 0 0 green,0 3em 0 0 green,0 4em 0 0 green,0 5em 0 0 green,0 6em 0 0 green,0 7em 0 0 green,0 8em 0 0 green,1em 8em 0 0 green,2em 8em 0 0 green,3em 8em 0 0 green,4em 8em 0 0 green,5em 8em 0 0 green,6em 8em 0 0 green,7em 8em 0 0 green,7em 7em 0 0 green,6em 6em 0 0 green,5em 5em 0 0 green,4em 4em 0 0 green,5em 3em 0 0 green,6em 2em 0 0 green,7em 1em 0 0 green,7em 0 0 0 green,6em 0 0 0 green,5em 0 0 0 green,4em 0 0 0 green,3em 0 0 0 green,2em 0 0 0 green,1em 0 0 0 green,9em 0 0 0 green,9em 1em 0 0 green,9em 2em 0 0 green,9em 3em 0 0 green,9em 4em 0 0 green,9em 5em 0 0 green,9em 6em 0 0 green,9em 7em 0 0 green,9em 8em 0 0 green,10em 0 0 0 green,11em 0 0 0 green,12em 0 0 0 green,13em 0 0 0 green,14em 0 0 0 green,15em 0 0 0 green,16em 1em 0 0 green,16em 2em 0 0 green,15em 3em 0 0 green,14em 4em 0 0 green,13em 5em 0 0 green,14em 6em 0 0 green,15em 7em 0 0 green,16em 8em 0 0 green}
    50%    {transform: rotate(20deg);background: purple;box-shadow: 0 1em 0 0 purple,0 2em 0 0 purple,0 3em 0 0 purple,0 4em 0 0 purple,0 5em 0 0 purple,0 6em 0 0 purple,0 7em 0 0 purple,0 8em 0 0 purple,1em 8em 0 0 purple,2em 8em 0 0 purple,3em 8em 0 0 purple,4em 8em 0 0 purple,5em 8em 0 0 purple,6em 8em 0 0 purple,7em 8em 0 0 purple,7em 7em 0 0 purple,6em 6em 0 0 purple,5em 5em 0 0 purple,4em 4em 0 0 purple,5em 3em 0 0 purple,6em 2em 0 0 purple,7em 1em 0 0 purple,7em 0 0 0 purple,6em 0 0 0 purple,5em 0 0 0 purple,4em 0 0 0 purple,3em 0 0 0 purple,2em 0 0 0 purple,1em 0 0 0 purple,9em 0 0 0 purple,9em 1em 0 0 purple,9em 2em 0 0 purple,9em 3em 0 0 purple,9em 4em 0 0 purple,9em 5em 0 0 purple,9em 6em 0 0 purple,9em 7em 0 0 purple,9em 8em 0 0 purple,10em 0 0 0 purple,11em 0 0 0 purple,12em 0 0 0 purple,13em 0 0 0 purple,14em 0 0 0 purple,15em 0 0 0 purple,16em 1em 0 0 purple,16em 2em 0 0 purple,15em 3em 0 0 purple,14em 4em 0 0 purple,13em 5em 0 0 purple,14em 6em 0 0 purple,15em 7em 0 0 purple,16em 8em 0 0 purple}
    75%    {transform: rotate(-20deg);background: red;box-shadow: 0 1em 0 0 red,0 2em 0 0 red,0 3em 0 0 red,0 4em 0 0 red,0 5em 0 0 red,0 6em 0 0 red,0 7em 0 0 red,0 8em 0 0 red,1em 8em 0 0 red,2em 8em 0 0 red,3em 8em 0 0 red,4em 8em 0 0 red,5em 8em 0 0 red,6em 8em 0 0 red,7em 8em 0 0 red,7em 7em 0 0 red,6em 6em 0 0 red,5em 5em 0 0 red,4em 4em 0 0 red,5em 3em 0 0 red,6em 2em 0 0 red,7em 1em 0 0 red,7em 0 0 0 red,6em 0 0 0 red,5em 0 0 0 red,4em 0 0 0 red,3em 0 0 0 red,2em 0 0 0 red,1em 0 0 0 red,9em 0 0 0 red,9em 1em 0 0 red,9em 2em 0 0 red,9em 3em 0 0 red,9em 4em 0 0 red,9em 5em 0 0 red,9em 6em 0 0 red,9em 7em 0 0 red,9em 8em 0 0 red,10em 0 0 0 red,11em 0 0 0 red,12em 0 0 0 red,13em 0 0 0 red,14em 0 0 0 red,15em 0 0 0 red,16em 1em 0 0 red,16em 2em 0 0 red,15em 3em 0 0 red,14em 4em 0 0 red,13em 5em 0 0 red,14em 6em 0 0 red,15em 7em 0 0 red,16em 8em 0 0 red}
    100%{transform: rotate(0deg);background: red;box-shadow: 0 1em 0 0 red,0 2em 0 0 red,0 3em 0 0 red,0 4em 0 0 red,0 5em 0 0 red,0 6em 0 0 red,0 7em 0 0 red,0 8em 0 0 red,1em 8em 0 0 red,2em 8em 0 0 red,3em 8em 0 0 red,4em 8em 0 0 red,5em 8em 0 0 red,6em 8em 0 0 red,7em 8em 0 0 red,7em 7em 0 0 red,6em 6em 0 0 red,5em 5em 0 0 red,4em 4em 0 0 red,5em 3em 0 0 red,6em 2em 0 0 red,7em 1em 0 0 red,7em 0 0 0 red,6em 0 0 0 red,5em 0 0 0 red,4em 0 0 0 red,3em 0 0 0 red,2em 0 0 0 red,1em 0 0 0 red,9em 0 0 0 red,9em 1em 0 0 red,9em 2em 0 0 red,9em 3em 0 0 red,9em 4em 0 0 red,9em 5em 0 0 red,9em 6em 0 0 red,9em 7em 0 0 red,9em 8em 0 0 red,10em 0 0 0 red,11em 0 0 0 red,12em 0 0 0 red,13em 0 0 0 red,14em 0 0 0 red,15em 0 0 0 red,16em 1em 0 0 red,16em 2em 0 0 red,15em 3em 0 0 red,14em 4em 0 0 red,13em 5em 0 0 red,14em 6em 0 0 red,15em 7em 0 0 red,16em 8em 0 0 red}
}
</style>

Untuk penerapannya. Copy kode berikut

    <div id="logo"></div>

 Sederhana bukan ?. Silahkan dipelajari dasarnya dan bisa dikembangkan sendiri.
Sekian artikel saya, terima kasih.