CARA MEMBUAT TAB MENU BLOG VERSI SELULERSobat Blogger, teknik kustomisasi template untuk mempercantik desain tampilan halaman blog yang saya uraikan dalam artikel ini bisa jadi merupakan teknik yang cukup ringan bila dibandingkan dengan beberapa teknik dalam uraian artikel sebelumnya (seperti misalnya: cara membuat tab menu dengan ujung sudut melengkung, cara mengubah desain tampilan halaman beranda blog, dan atau bahkan teknik yang digunakan untuk mengubah tema tampilan halaman versi seluler, serta berbagai teknik dalam uraian artikel sebelumnya), karena teknik yang diuraikan dalam artikel ini hanyalah sebatas memberikan efek khusus terhadap list item untuk widget yang terdapat dalam sidebar blog.
Secara default sebenarnya Blogger telah memberikan beberapa efek (hover)
khusus terhadap konten sebuah widget. Beberapa efek yang dimaksud
antara lain adalah efek perubahan warna link ketika sebuah tautan
disorot dengan menggunakan mouse pointer serta efek dekorasi teks untuk
tautan tersebut, yaitu dengan dimunculkannya garis di bawah link yang
disorot.
Namun demikian (menurut saya) tidak ada
salahnya bila kita menambahkan berbagai efek khusus lagi pada bagian
tersebut, sebatas untuk memberikan kemudahan dan kenyamanan bagi
pengunjung yang sedang membuka dan atau membaca artikel yang ada. Karena
dengan memberikan efek yang berlebihan pada tampilan halaman, bisa jadi
malah akan mempersulit pengunjung dalam membuka dan atau membaca
artikel sehingga ketidaknyamanan lah yang akhirnya didapatkan.
Oke,
sekarang kita kembali pada pokok bahasan yang utama yaitu tentang
pemberian efek khusus pada widget yang terdapat dalam sidebar, dalam hal
ini adalah penambahan efek warna latar gradasi untuk list item entri
populer ketika disorot dengan menggunakan mouse pointer. Yang mana untuk
keperluan ini Anda dapat melakukannya dengan cara mengerjakan
langkah-langkah di bawah ini secara berurutan.
Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.
Kedua, cari ]]></b:skin> dan kemudian sisipkan salah satu dari beberapa rangkaian CSS berikut ini tepat di atasnya.
.sidebar li:hover { background: #FFFFE0; background: -moz-linear-gradient(left center , #FFFFF5 0%, #FFFFC2 50%, #FFFFC2 0%, #FFFFF5 100%); background: -webkit-linear-gradient(left, #FFFFF5 0%,#FFFFC2 50%,#FFFFC2 0%,#FFFFF5 100%); background: -o-linear-gradient(left, #FFFFF5 0%,#FFFFC2 50%,#FFFFC2 0%,#FFFFF5 100%); }
-----
.popular-posts li:hover { background: #FFFFE0; background: -moz-linear-gradient(left center , #FFFFF5 0%, #FFFFC2 50%, #FFFFC2 0%, #FFFFF5 100%); background: -webkit-linear-gradient(left, #FFFFF5 0%,#FFFFC2 50%,#FFFFC2 0%,#FFFFF5 100%); background: -o-linear-gradient(left, #FFFFF5 0%,#FFFFC2 50%,#FFFFC2 0%,#FFFFF5 100%); }
Keterangan:
Jika penggunaan rangkaian kode yang
satu tidak dapat berfungsi atau bekerja sesuai dengan yang diharapkan,
maka silakan menggunakan rangkaian kode CSS yang satunya.
Ketiga, simpan template.
Nah, tekniknya tidak terlalu rumit bukan? Oh ya,
perlu diingat bahwa karena teknik yang dilakukan ini merupakan teknik
pemberian efek hover atau efek yang akan muncul ketika suatu bagian
disorot dengan menggunakan mouse pointer, maka untuk melakukan
pengecekan terhadap hasil yang didapatkan tidak dapat dilakukan dengan
hanya menggunakan teknik ‘Preview’. Jadi silakan template disimpan terlebih dulu baru kemudian lakukan pengecekan untuk hasil yang didapatkan.
Apabila penerapan teknik tersebut berhasil, maka
hasil yang didapatkan ketika list item yang terdapat dalam entri populer
disorot dengan menggunakan mouse pointer lebih kurang adalah seperti
yang tampak pada gambar di atas. Sehingga apabila desain warna latar
yang dihasilkan belum sesuai dengan desain tampilan halaman blog yang
Anda kelola, maka silakan dilakukan kustomisasi seperlunya.
Semoga berguna dan bermanfaat.CARA MEMBUAT TAB MENU BLOG VERSI SELULER
read more
