Cara Menambahkan Efek Hover Warna Latar Gradasi Pada List Item Entri Populer Blog

Sobat 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.

Salam.