Tutorial Popular Post with Thumbnail

1
6
views
Popular Posts 2.0
Popular Posts 2.0

Tutorial Popular Post with Thumbnail – ini berfungsi untuk memperlihatkan kepada pelawat carian terbanyak di blog anda dan entry yang paling hot dalam blog anda. untuk gambar diatas saya terpaksa sensortkan keyword bagi mengelakkan ada keyword merajuk dengan blog jiwarosak.

caranya sama seperti tutorial popular post yang lama cuma coding ada sedikit berbeza.

1. login blogger.com –> layouts –> add gadget –> Popular Post

2. KLIK pada IMAGE THUMBNAIL dan klik SAVE.

setting popular post
setting popular post

3. Klik di Templates –> Edit Templates.




Koleksi Cerita Lawak
Koleksi Artikel Tips dan Info Cinta

4. Search for (ctrl + f) ]]></b:skin>

5. Copy dan Paste Code Dibawah ini dan letakkan diatas code ]]></b:skin>

/* credit to jiwarosak.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}


6. Preview Templates anda dan sekiranya tiada masalah Save Templates.


Jika Anda Rasa Artikel Ni Berguna, Silakan Klik Button Like Dibawah. Terima Kasih


1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here