2 Style Widget Popular Post Agar Blog Terlihat Menarik
Baiklah sobat tutorial seocips.com saat ini adalah tentang bagaimana cara mengubah tampilan popular post agar blog. Pastinya kamu memiliki alasan jika ingin mengubah tampilan popular post di blog kamu, misalnya agar blog terlihat lebih menarik, lebih keren dan lain sebagainya.

Dengan menampilkan popular post juga dapat membantu pengunjung anda untuk melihat artikel yang paling populer di blog kamu. Baik yang sedang populer beberapa hari dan yang sudah lama populer. Tampilan dasar popular post dari blogger tidak dirancang sedemikian rupa, jadi hanya memiliki tampilan yang standar saja.

Sebenarnya ini postingan yang lama sudah di tulis dan sekarang sudah dibagikan 10 style widget popular post untuk Blogger. Ok, berikut ini adalah cara mengubah tampilan popular post di Blogger, dan 2 style yang bisa kamu pilih untuk digunakan.

Memasang Widget Popular Post Di Blogger

Pasang widget popular post di blog kamu caranya masuk pada blog Blogger kamu, pilih "Tata Letak" selanjutnya pilih tempat dimana kamu akan menambahkan widget ini "Tambahkan Gadget" selanjutnya pilih "Entri Populer" dan setting seperti ini:
Konfigurasi entri populer

Customizing and Stylizing Blogger Popular Post Widget ( Style 1)

Popular Post For Blogger (Style 8)
Popular Post  (Style 1)


1. Pilih menu Template dan pilih edit HTML kemudian masukan css ini kedalam template, misalnya di atas ]]></b:skin> atau diatas </style>.
.popular-posts ul { padding-left:0; }
.popular-posts ul li { background:#FFF url(http://4.bp.blogspot.com/-oOVUW06ghgo/UHwuqL9TltI/AAAAAAAAGKU/Nj4DQnvft8k/s1600/1.gif)  no-repeat scroll 5px 10px; list-style-type:none; margin:0 0 5px 0; 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:1px solid #6BB5FF; }
.popular-posts ul
  li a:hover { text-decoration:none; }
.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); }
2. Save template dan selesai.

Customizing and Stylizing Blogger Popular Post Widget ( Style 2)

Popular Post  (Style 2)
Popular Post  (Style 2)


1. Pilih menu Template dan pilih edit HTML kemudian masukan css ini kedalam template, misalnya di atas ]]></b:skin> atau diatas </style>.
.widget .widget-item-control a img { border:none; width:20px !important; height:20px !important; padding:none; background:none; -moz-box-shadow:none; -webkit-box-shadow:none; -ie-box-shadow:none; box-shadow:none; }
.sidebar .PopularPosts .widget-content ul li { padding:0 0 0; height:73px !important; overflow:hidden !important; list-style-type:none !important; list-style:none; }
.sidebar .popular-posts ul { padding-left:0 !important; list-style-type:none !important; }
.sidebar .popular-posts ul { counter-reset:popcount; margin:0; padding:0; }
/*---- Change Counter Box Style Here ----*/
.sidebar .popular-posts ul li:before { background:rgba(247,247,247,1); color:#000000; content:counter(popcount,decimal); counter-increment:popcount; float:right; font-size:15px; line-height:20px; list-style-type:none; padding:0 6px 1px 5px; border-radius:0 0 7px 7px; position:relative; display:inline-block; box-shadow:-2px 2px 10px rgba(187,187,187,0.7); font-weight:normal; top:0; right:1px; z-index:999999999999; border:solid #B5B5B5; border-width:0 1px 1px 1px; }
.sidebar .PopularPosts .item-thumbnail { float:left; margin:0 !important; }
.sidebar .PopularPosts img { padding-right:0 !important; width:72px; height:72px; overflow:hidden !important; margin-right:0; }
.sidebar .PopularPosts .item-title a:hover { background:#f6f6f6; color:#000; }
/*-----Change Font Family -Background - Style - Size or Color Here-----*/
.sidebar .PopularPosts .item-title a { background:#EAEAEA; color:#6E6E6E; display:block; font-size:14px; font-weight:normal; line-height:normal; font-family:"Oswald",sans-serif; padding:10px 30px 0 78px; transition:all .4s ease-in-out; height:62px; text-decoration:none; border-bottom:1px solid #cccccc; }
2. Save template dan selesai.

Lihat juga:
Sekian mengenai cara mengubah tampilan popular post di Blogger semoga bermanfaat dan Selamat mencoba.
2 Komentar untuk "2 Style Widget Popular Post Agar Blog Terlihat Menarik"

mantepp kang (h) (h) ijin sedott kang :-d :-d

tutorialnya cukup bagus, popular postnya enak dipandang