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 kini ini. Cara pasangnya gampang, tinggal copas salah satu arahan css posting terpopuler di bawah ini di atas arahan ]]></b:skin> di template Anda.

Style 1

 Desain Widget Popular Post Keren untuk Blogger Cara buat blog itu- 5 Desain Widget Popular Post Keren untuk Blogger

#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 untuk Blogger Cara buat blog itu- 5 Desain Widget Popular Post Keren untuk Blogger

#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 untuk Blogger Cara buat blog itu- 5 Desain Widget Popular Post Keren untuk Blogger

#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} 

Style 4

 Desain Widget Popular Post Keren untuk Blogger Cara buat blog itu- 5 Desain Widget Popular Post Keren untuk Blogger

#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

 Desain Widget Popular Post Keren untuk Blogger Cara buat blog itu- 5 Desain 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 pemanis arahan javascript berikut ini, dipasang di atas arahan </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, ketika memasang widgetnya, harus dicentang image thumbnail ibarat ini:

 Desain Widget Popular Post Keren untuk Blogger Cara buat blog itu- 5 Desain Widget Popular Post Keren untuk Blogger

Fungsi Popular Posts

Popular posts berfungsi sebagai navigasi hidangan dan internal link yang cantik 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! (www.carabuatblogitu.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours