5 Desain Widget Popular Post Keren untuk Blogger

5 Desain Widget Popular Post Keren untuk Blogger

SEBELUMNYA CB sudah share banyak desain tampilan Popular Posts atau Entri Terpopuler untuk dipasang di sidebar blogger.

Berikut ini desain Popular Post lainnya, termasuk yang CB pasang sekarang ini. Cara pasangnya gampang, tinggal copas salah satu kode css posting terpopuler di bawah ini di atas kode ]]></b:skin> di template Anda.

Style 1
Desain Widget Popular Post Keren

 

#PopularPosts1 ul{list-style-type:none;margin:0;padding:0}
#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:75px;display:block;transition:all .3s ease-in-out}
#PopularPosts1 ul li{padding:7px!important;margin:0;list-style:none;border-bottom:1px solid #fafafc;font-size:11px;line-height:normal}
#PopularPosts1 ul li:first-child{border-top:none}
#PopularPosts1 ul li:last-child{border-bottom:none}
#PopularPosts1 a:link,#PopularPosts1 a:visited,#PopularPosts1 a:active{font-size:13px;color:#555!important;display:block;font-weight:700;padding:0!important;margin:0!important;line-height:1.4em}
#PopularPosts1 a:hover{color:#B80103!important;text-decoration:none}
.PopularPosts h2{padding:5px 0}
.popular-posts ul{padding-left:0;counter-reset:trackit}
.popular-posts ul li{border-bottom:1px solid #f0f0f0;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all .25s linear 0;counter-increment:trackit}
.PopularPosts li:first-child{border-top:1px solid #f0f0f0}
.PopularPosts li:nth-child(odd){background:#f5f5f5}
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}
.PopularPosts a,.PopularPosts a:hover{color:#959595;font-size:.9rem}
#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important}
.widget.PopularPosts{padding:1.2em 0!important}

 

Style 2
Desain Widget Popular Post Keren

 

#sidebar .PopularPosts h2{padding:0;margin:0 0 10px}
#sidebar .popular-posts ul{padding-left:0;counter-reset:trackit}
#sidebar .popular-posts ul li{border-bottom:1px solid #999;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}
#sidebar .PopularPosts ul li:before{content:counters(trackit,”.”);padding:0 .1em 0 0;font-size:20px;font-weight:bold;color:#ffffff;float:left;margin-right:10px}
#sidebar .PopularPosts li:first-child{border-top:1px solid #000000}
#sidebar .PopularPosts li:nth-child(even){background:#2C87F0}
/*define background color for even number lists*/
#sidebar .PopularPosts li:nth-child(odd){background:#000000}
/* define background for odd number lists */
#sidebar .PopularPosts .item-thumbnail{display:true!important}
,#sidebar .PopularPosts .item-snippet{display:true!important}
/* Hides Thumbnail and Snippet */
#sidebar .PopularPosts a,#sidebar .PopularPosts a:hover{color:#ffffff!important;font-size:.9rem}
#sidebar #PopularPosts1 li{padding-right:1em!important;padding-left:1em!important;margin:0}
#sidebar .widget.PopularPosts{padding:1.2em 0!important}

 

Style 3
 
Desain Widget Popular Post Keren

#PopularPosts1 ul{list-style-type:none;margin:0;padding: 0}
#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:75px;display: block;transition:all .3s ease-in-out}
#PopularPosts1 ul li {padding:8px 0 11px !important;margin:0; list-style: none; border-bottom: 1px solid #e9e9e9;font-size:11px;line-height: normal;}
#PopularPosts1 ul li:first-child  {  border-top:none;  }
#PopularPosts1 ul li:last-child  {  border-bottom:none;  }
#PopularPosts1 a:link, #PopularPosts1 a:visited, #PopularPosts1 a:active {font-size:13px; color: #2b2b2b !important;  display: block;font-weight:bold;padding:0 !important;margin:0 !important;line-height:1.4em}
#PopularPosts1 a:hover {color: #B80103 !important;  text-decoration: none;}
.PopularPosts h2{padding-right:.4em;padding-left:1em}
.popular-posts ul{padding-left:0;counter-reset:trackit}
.popular-posts ul li{border-bottom:1px solid #f0f0f0;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}
.PopularPosts ul li:before{content:counters(trackit,”.”);padding:0 .1em 0 10px;font-size:20px;font-weight:bold;color:#F66;float:left;margin-right:10px}
.PopularPosts li:first-child{border-top:1px solid #f0f0f0}
.PopularPosts li:nth-child(odd){background:#f5f5f5}
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}
/* Hides Thumbnail and Snippet */
.PopularPosts a,.PopularPosts a:hover{color:#959595;font-size:.9rem}
#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important}
.widget.PopularPosts{padding:1.2em 0em !important}

loading...

 

Style 4

 

Desain Widget Popular Post Keren

 

#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:72px;display: block;transition:all .3s ease-in-out}
#PopularPosts1 ul li {padding:8px 0 4px !important;margin:0; list-style: none; border-bottom: 1px solid #fff;font-size:12px;line-height: normal;}
#PopularPosts1 ul li:first-child  {  border-top:none;  }
#PopularPosts1 ul li:last-child  {  border-bottom:none;  }
#PopularPosts1 a:link, #PopularPosts1 a:visited, #PopularPosts1 a:active {font-size:13px; color: #000000 !important;  display: block;font-weight:bold;padding:0 !important;margin:0 !important;line-height:1.2em}
#PopularPosts1 a:hover {color: #B80103 !important;  text-decoration: none;}
.PopularPosts h2{padding-right:.4em;padding-left:1em}
.popular-posts ul{padding-left:0;counter-reset:trackit}
.popular-posts ul li{border-bottom:1px solid #fff;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}
.PopularPosts ul li:before{content:counters(trackit,”.”);padding:5px 10px 15px 10px;font-size:18px;font-style: italic;font-weight:bold;color:#fff;float:left;margin-right:10px;border:1px solid #B80103;width:10px;height:10px; border-radius:100%;background: #d20000;display: block;}
.PopularPosts li:first-child{border-top:1px solid #fff}
.PopularPosts li:nth-child(odd){background:#fff}
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}
.PopularPosts a:link,.PopularPosts a:visited {color:#2b2b2b;font-size:.9rem}
.PopularPosts a:hover{color:#c00}
#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important}
.widget.PopularPosts{padding:1.2em 0em !important}

 

Style 5

 

Widget Popular Post Keren untuk Blogger

 

.PopularPosts .widget-content ul{padding:0;margin-top:-10px}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .item-title {padding:0;}
.PopularPosts .item-title a{text-decoration:none;color:#000;}
.PopularPosts .item-title a:hover{color:#ff2d2d}
.PopularPosts .item-snippet{font-size:12px;line-height:1.6em;color:#777;padding-top:10px}
.PopularPosts li{border-bottom:1px dashed #e3e3e3}
.PopularPosts li .item-thumbnail,.PopularPosts li .item-snippet{display:none}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block;overflow:hidden;max-height:180px;margin-bottom:10px;}
.PopularPosts img{padding:0}
.PopularPosts .widget-content ul li{padding:10px 0;margin:0}

Desain Popular Posts Style 5, dengan satu gambar, membutuhkan tambahan kode javascript berikut ini, dipasang di atas kode </body>

<script type=’text/javascript’>
//<![CDATA[
// Popular Post
var newidth=295;var neweight=180;$(“.popular-posts .item-thumbnail img”).each(function(){var t=$(this).attr(“width”);$(this).attr(“width”,newidth),$(this).attr(“height”,neweight),$(this).attr(“src”,$(this).attr(“src”).replace(“/s72-c/”,”/w”+newidth+”-h”+neweight+”-c/”))}),$(“.PopularPosts .item-snippet”).text(function(t,i){return i.substr(0,70)});
//]]>
</script>

Selain itu, saat memasang widgetnya, harus dicentang image thumbnail seperti ini:

Setting Popular Posts

Fungsi Popular Posts

Popular posts berfungsi sebagai navigasi menu dan internal link yang bagus buat blog dan dianjurkan oleh Google. Dengan internal link, blog kita jadi User Friendly.

Demikian 4 Desain Widget Popular Post Keren untuk Blogger. Good Luck & Happy Blogging!
Loading...

JANGAN LUPA DOWNLOAD APLIKASI PRIBUMI ONLINE VERSI ANDROID
SILAKAN KLIK GAMBAR DI BAWAH INI

Comments

comments

Related posts

Leave a Comment