MODIFIKASI POPULAR POST

kali ini saya akan kembali berbagi tips modifikasi widget popular post dengan efek css hover  agar tampilan widget popular post sobat terlihat lebih semakin menarik, pada beberapa template biasanya sudah di sertakan CSS tambahan untuk membuat tampilan widget tersebut menjadi lebih menarik, karena kita tahu bahwa widget popular post ini adalah widget default blogspot, yang memiliki dua opsi pengaturan, yaitu

menampilkan Thumbnail, judul dan ringkasan, atau hanya menampilkan Thumbnail dan judul saja, dan untuk tampilannya mengikuti gaya dari template yang kita gunakan,

ok, kita langsung saja ke tutorialnya :

1. Login ke Blogger pilih Template / Edit HTML 

2. tekan CTRL+F lalu ketik ]]></b:skin>

tekan enter

3. copykan kode di bawah ini tepat di atas ]]></b:skin>

1</p> <p class="separator" style="clear: both;"> .PopularPosts .item-thumbnail img {</p> <p class="separator" style="clear: both;">   width: 40px;</p> <p class="separator" style="clear: both;">   height: 40px;</p> <p class="separator" style="clear: both;">   padding: 4px;</p> <p class="separator" style="clear: both;">   margin: 0;</p> <p class="separator" style="clear: both;">   border: #ddd solid 1px;</p> <p class="separator" style="clear: both;"> }</p> <p class="separator" style="clear: both;"> .popular-posts ul {</p> <p class="separator" style="clear: both;">   padding-left: 0;</p> <p class="separator" style="clear: both;"> }</p> <p class="separator" style="clear: both;"> .popular-posts ul li {</p> <p class="separator" style="clear: both;">   background: url('https://googledrive.com/host/0BzzpB6MLhPeNZ0FhV0xIQ3A0TDg/lin.gif') left no-repeat;</p> <p class="separator" style="clear: both;">   padding-left: 16px;</p> <p class="separator" style="clear: both;">   list-style-type: none;</p> <p class="separator" style="clear: both;">   margin: 0 0 5px 0;</p> <p class="separator" style="clear: both;">   padding: 5px 5px 5px 20px !important;</p> <p class="separator" style="clear: both;">   border: #c0c0c0 solid 1px;</p> <p class="separator" style="clear: both;">   border-radius: 10px;</p> <p class="separator" style="clear: both;"> }</p> <p class="separator" style="clear: both;"> .popular-posts ul li:hover {</p> <p class="separator" style="clear: both;">   border: #000 solid 1px;</p> <p class="separator" style="clear: both;"> }</p> <p class="separator" style="clear: both;"> .popular-posts ul li a:hover {</p> <p class="separator" style="clear: both;">   text-decoration: none;</p> <p class="separator" style="clear: both;"> }

4. simpan template

Kemudian pergi ke Tata letak, seting Opsi pada widget Popular post , hilangkan centang pada Cuplikan, dan untuk Opsi lainnya silahkan atur sesuai keinginan masing masing.

Selesai, sekarang tampilan Widget Popular Post sobat sudah menarik

TERIMA KASIH