Membuat Widget Popular Post Dengan Gambar Round Corner

Bagikan ke Google+Tambahkan ke DeliciousTweet dong..Share ke FacebookSubmit ke StumbleUponKirim ke Digg

Ternyata, widget popular post cukup di gemari oleh banyak blogger, hal ini terbukti dengan banyaknya situs web yang memasang widget tersebut. Jadi, sangatlah wajar kalau kita sering menemukan tutorial yang membahas tentang cara memodifikasi widget popular post dengan menawarkan style yang berbeda-beda. Saya sendiri, beberapa bulan yang lalu sempat juga membuat posting tentang cara membuat widget popular post berwarna warni di blog, bisa di baca melalui link ini.

Apa kelebihan widget popular post yang saya bawa kali ini?

1. Menggunakan Efek Hover
2. Thumbnail gambar tidak kotak (Menggunakan Round Corner)
3. Background terpisah di setiap judul posting dan menggunakan efek round corner (Sudut bulat)

Cara menerapkan kode widget Popular Post

• Sign in di blogger.com
• Pada menu drop down pilih template dan klik "Edit HTML"
• Cari kode ]]></b:skin> lalu tempatkan kode berikut sebelum kode ]]></b:skin>

/* Kode CSS tutorialblogspot.com */
.popular-posts ul{padding-left:0}
.popular-posts ul li{background:#FFF url() no-repeat scroll 5px 10px;list-style-type:none;border:1px solid #ddd;border-radius:30px;-moz-border-radius:30px;-webkit-border-radius:30px;-moz-box-shadow:3px 2px 5px #242424;-webkit-box-shadow:3px 2px 5px #242424;box-shadow:3px 2px 5px #242424;margin-bottom:5px;height:40px;padding:5px 5px 5px 20px !important}
.popular-posts ul li a{font-style:italic}
.popular-posts ul li:hover{border:1px solid #d10202;-moz-box-shadow:3px 2px 5px #d10202;-webkit-box-shadow:3px 2px 5px #d10202;box-shadow:3px 2px 5px #d10202}
.popular-posts ul
li a:hover{text-decoration:none}
.popular-posts .item-thumbnail img{height:40px;width:40px;webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.popular-posts .item-thumbnail img:hover{-moz-box-shadow:0 0 5px #d10202;-webkit-box-shadow:0 0 5px #d10202;box-shadow:0 0 5px #d10202}

• Simpan template.

Cara konfigurasi widget popular post

1. Setelah menerapkan kode di atas, klik Layout (Tata letak)
2. Klik add a gadget
3. Tambahkan widget Popular Post

4. Hilangkan tanda centang pada "Snippet" atau "Cuplikan"
5. Klik Save