Tentu anda sudah tahukan mengenai widget popular post? yaitu widget yang berfungsi untuk menampilkan artikel-artikel popular di blog kita, tidak seperti widget-widget HTML/Javascript lainya, popular post ini bersifat resmi atau official dari blogger, jadi widget ini terkesan lebih baik dan tidak memberikan efek yang signifikan terhadap berat loading blog. Selain itu, terkadang seringkali kita juga mengalami kebosanan dengan tampilan popular post yang itu-itu saja,

Kali ini saya akan memberikan tutorial tentang modifikasi Widget Popular Post , Tampilan dari modifikasi popular post yang akan saya bahas ini sebenarnya cukup sederhana,widget ini akan mempunyai tampilan melingkar Panjang pada keseluruhan atau bisa disebut Round Corners.

Cara mengaplikasikanya juga tergolong cukup mudah, kita hanya perlu memasang widget popular post seperti biasa terlebih dahulu, baru kemudian ditambahkan dengan beberapa kode css yang sudah di customisasi. Jika anda tertarik untuk menerapkanya, maka silahkan disimak yang berikut ini.

Cara Modifikasi wideget Popular Post

1. Login ke Blogger.

2. Pilih Tata Letak.

3. Klik Add Gadget.

4. Pilih "Entri Populer" atau "Popular Post" (tergantung bahasa yang digunakan).

5. Lalu, centang box thumbnail gambar. (jangan centang "snippet" atau cuplikan

6. Klik "Save/Simpan" gadget.

7. Sekarang beralih ke halaman Template > Edit HTML.

8. Klik tanda panah hitam disebelah kode yang mirip seperti kode ini: <b:skin>...</b:skin> (untuk membuka kode css).

9. Cari kode ]]></b:skin> (gunakan CTRL+F), lalu letakkan kode berikut ini tepat diatasnya.

/* The CSS Code for the menu starts here */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-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;
}
.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: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;
box-shadow: 0px 0px 5px #d10202;}

  10. Klik "Save/Simpan" template, dan selesai.

Bagaimana? mudah bukan cara memodifikasi popular post agar terlihat lebih stylish. Demikian informasi terbaru tentang Cara Modifikasi Widget Popular Post Blogger.
via blogertix