Hongkiat Popular Post Widget For Blogger Blog

HaiSob, Berikut ini saya akan membagikan CSS widget popular post untuk Blogger Blog. Jadi untuk kamu yang mungkin sudah bosan dengan tampilan popular post yang ada di blog kamu dan tertarik untuk mengubah tampilannya dengan tampilan yang baru mungkin kamu tertarik dengan widget ini.

Popular post berikut ini memiliki tampilan pyang lumayan sederhana tapi menarik. Memang berbeda dengan popular post 3D yang telah dibagikan sebelumnya dan juga popular post dengan thumbnail berbentuk lingkaran yang telah dibagikan sebelumnya.

Hongkiat Popular Post Widget For Blogger Blog
Add Hongkiat Popular Post Widget For Blogger Blog

Cara edit tampilan Popular Post di Blogger


1. Di Blog Bloger 😂
2. Sudah terpasang widget popular post bawaan Blogger
3. Pilih menu Template ➔ Edit HTML
Hongkiat Popular Post Widget For Blogger Blog
Template - Edit HTML

4. Letakan kode dibawah ini di atas  ]]></b:skin> atau diatas </style>
.PopularPosts { width:100%; margin:0 auto; padding:0 !important; border-radius:2%; -moz-border-radius:2%; -webkit-border-radius:2%; counter-reset:trackit; box-shadow:0 4px 0 -2px rgba(0,0,0,0.1),0px 3px 0 0 rgba(0,0,0,0.07),0px 2px 0 0 rgba(0,0,0,0.03); -moz-box-shadow:0 4px 0 -2px rgba(0,0,0,0.1),0px 3px 0 0 rgba(0,0,0,0.07),0px 2px 0 0 rgba(0,0,0,0.03); -webki-box-shadow:0 4px 0 -2px rgba(0,0,0,0.1),0px 3px 0 0 rgba(0,0,0,0.07),0px 2px 0 0 rgba(0,0,0,0.03); border:1px solid #EEE; }
.PopularPosts h2 { line-height:1.5em !important; display:block !important; font-family:"Calibri","Droid Sans",Tahoma,Geneva,sans-serif; font-weight:500 !important; text-transform:uppercase !important; padding:5px 10px !important; margin:0 !important; color:#D1D9E5; background-color:#5A77A0 !important; text-shadow:1px 1px #486286; border-bottom:1px solid #4D678C; box-shadow:0 5px 12px -7px rgba(0,0,0,0.5); -moz-box-shadow:0 5px 12px -7px rgba(0,0,0,0.5); -webkit-box-shadow:0 5px 12px -7px rgba(0,0,0,0.5); font-size:16px !important; border-top-right-radius:3px; border-bottom-right-radius:0; border-bottom-left-radius:0; border-top-left-radius:3px; -moz-border-radius-topright:3px; -moz-border-radius-bottomright:0; -moz-border-radius-bottomleft:0; -moz-border-radius-topleft:3px; -webkit-border-top-right-radius:3px !important; -webkit-border-bottom-right-radius:0; -webkit-border-bottom-left-radius:0; -webkit-border-top-left-radius:3px; bottom:0; top:0; }
.widget-content.popular-posts { border-top:1px solid #CCC; padding:0; margin:0 0 0; }
.popular-posts ul { padding:0 !important; margin:0 !important; }
.popular-posts ul li { border-bottom:1px solid #f1f1f1; list-style:none outside none !important; margin-left:0 !important; overflow:hidden; padding:10px 0 !important; transition:all 0.25s linear 0s; counter-increment:trackit; }
#PopularPosts1 li:nth-child(odd) { background:#F9F9F9; }
#PopularPosts1 li:nth-child(even) { background:#FFF; }
#PopularPosts1 li:first-child { border-top:1px solid #f1f1f1; }
#PopularPosts1 li { padding-right:1em !important; padding-left:1em !important; }
#PopularPosts1 ul li:before { content:counters(trackit,"."); padding:0 .1em 0 0; font-size:20px; font-weight:bold; color:#D8D8D8; float:left; }
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet { display:none; }
#PopularPosts1 a:hover { text-decoration:underline; }
#PopularPosts1 a { color:#3F3F3F; font-size:.9rem; }
.PopularPosts .item-title { padding:0 0 .2em 1.5em; }
5. Save.

Nah bagaimana tampilan popular post di blog kamu? apakah sudah sesuai dengan keinginian atau belum? jika belum kamu dapat mencoba widget popular post lainnya dengan tampilan lebih keren di blog ini. ok sob, semoga bermanfaat.
Join This Site