Widget Popular Post Yang Di Modifikasi. Part. 2

Widget Popular Post Yang Di Modifikasi

Di Widget Popular Post Yang Di Modifikasi. Part. 1 kemarin script yang ditambahkan pada editan HTML lumayan pajang, beda dengan Widget Popular Post Yang Di Modifikasi. Part. 2  kali ini, scriptnya sangat pendek  tapi hasilnya lumayan keren. Lumayan keren menurut saya *smile

Sebelumnya tambahkan Widget Popular Post dan Setting terlebih dahulu seperti pada gambar dibawah ini.

Berikan centang pada thumbnail dan jangan mencentang snippet, jumlah artikel yang akan ditampilkan terserah sobat batas maksimalnya adalah 10 seperti yg sudah kita ketahui bersama.

Cara membuatnya.

1. Login ke Akun blogger

2. Klik Template

3. Klik Edit HTML

4. Klik Proceed
5. Centang Expand Widget Templates

6. Cari taq ]]></b:skin> (gunakan kontrol F untuk memudahkan pencarian)

7. Setelah dapat lalu masukkan kode dibawah ini diatas taq  ]]></b:skin>

/* Popular Posts */ .PopularPosts .widget-content ul li{padding:0;position:relative} .item-snippet { font-size: 90%; line-height: 1.2em; position: absolute; width: 230px; background-color: white; padding: 7px; border-top: 2px solid #00FF00; z-index: 2; left: 300px; top: 60%; height: 4.5em!important; visibility: hidden; opacity: 0; transition: all 0.6s cubic-bezier(1,2,0,0) 0s; -moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s; -webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s; -o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;} .PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible} .PopularPosts img{width:50px;height:50px} .PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%} }

8. Kik Pratinjau, kalau tidak terjadi kesalahan lalu klik save template dan lihat penampakannya.

Demo

Maaf Demonya sudah tidak ada, tapi dijamin hasil modif diatas keren!
 

Sumber : Lupa