Menambahkan Style Pada Widget Popular Posts

Pada kali ini kita coba oprek template di bagian sidebar pada widget "Popular Post", di mana kita hanya memanfaatkan widget yang telah di sediakan oleh blogger dengan menambahkan sedikit style agar tampak lebih keren ditambah sentuhan efek hover.

Langkahnya seperti berikut :
Login dulu ke bloger
Pilih Rancangan - > Edit HTML
Cari kode ]]></b:skin>
Tambahkan style di bawah ini di atasnya:

.item-title{
background:#123456;
text-align:left;
border-radius:3px;
font-weight: bold;
}
.item-snippet{
padding:3px;
border:3px solid #4F697E;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
}
.item-snippet:hover{
margin:0px;
padding:3px;
text-align:center;
border:3px solid #4F697E;
-webkit-border-radius:70px;
-moz-border-radius:70px;
-o-border-radius:70px;
-ms-border-radius:70px;
border-radius:70px;
-webkit-transition:all 0.6s ease-out;
-moz-transition:all 0.6s ease-out;
-o-transition:all 0.6s ease-out;
transition:all 0.6s ease-out;
}

Save Template
Untuk warna background item-title bisa kita sesuaikan dengan template blog kita

Selamat mencoba, semoga bermanfaat..!

11 Responses to Menambahkan Style Pada Widget Popular Posts

  1. keren juga nich kang,. :D

    ReplyDelete
  2. wah, sayangnya saya tidak ada widget seperti ini.. :)

    ReplyDelete
  3. okeh bangeut...izin niron kang

    ReplyDelete
  4. thanks for share....
    visit http://bocahdoko.co.cc/

    ReplyDelete
  5. thanks for share. . .
    http://bocahdoko.co.cc/

    ReplyDelete
  6. Keren nih sob..dibookmark dulu nnti kapn2 berknjung lagi buat pasang di blog aku..thanks sudah berbagi..sukses selalu..dtnggu komen baliknya..

    ReplyDelete
  7. Sangat Bagus Sob !!! Lumayan Untuk Memperdalam Ilmu !!! Silah kan Visit Balik Ya sob !!!!

    Tukar Link Yuk ?

    Salam Blogwalking Indonesia Dari Saya Sob !!!

    ReplyDelete
  8. mantap juga ilmunya, makasih sharingnya bro...
    mau ane coba aplly di blog ane
    boleh kan?

    ReplyDelete
  9. Makasih sudah sudah share infonya sob

    #Koment balik ya di http://acep-computer-science.blogspot.com

    ReplyDelete