Cara Merubah Tampilan Popular Post Dengan CSS3

Popular post memang sangat penting untuk di tampilkan dalam blog guna memberikan informasi seputar artikel yang baru kita posting,namun terkadang kita merasa jenuh dengan tampilan popular yang monoton,oleh karena itu sekarang saya akan beri sedikit tips supaya tampilan popular post sobat tidak bikin bosan.tampilan popular postnya bisa sobat lihat dalam gambar di samping.apalagi dengan tampilan popular post yang sudah di modif di tambah efek berjalan pada populra post wah bikin mantap tuh sob.

Buat sobat yang ingin mencoba untuk merubah tampilan popular post nya bisa lihat tutorialnya di bawah ini.

1. Seperti biasa sobat login dulu yah,awas jangan login pakai punya tetangga nich bisa bikin

    ribet nih.

2. Masuk ke bagian Template > HTML

3. Cari kode ]]></b:skin> dan letakan kode di bawah tepat di atasnya.

.popular-posts ul{padding-left:0px;} .popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWw77ZDS0uE6F7jWfu5LEBfLL6RyIWn8n29W6Jp5P-YTilkDA56XL8b666g2_p2iMYByJP3wLCo9J2xiKV3HJhrZsgDY9fgmHaCDJIeSmAZCQt_LURc05XfGIpxnTxo3rZmKCap7YZQNM/s1600/1.gif) no-repeat scroll 5px 10px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border: 1px solid #ddd; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } .popular-posts ul li:hover { border:2px solid #6BB5FF; background:#000000; } .popular-posts ul li a:hover { text-decoration:none; color:#FFF8DC; } .popular-posts .item-thumbnail img { 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); }

4. Kemudian save,dan silahkan sobat lihat hasilnya.

Itulah sedikit uraian tentang Cara Merubah tampilan Popular Post Dengan CSS3,semoga dapat sedikit membantu sobat yang merasa bosan dengan tampilan popular post sebelum di modifikasi.terima kasih atas partisipasinya.