Cara Memasang Widget Popular Post untuk Blogger Cara Memasang Widget Popular Post untuk Blogger - mizipediacom mizipediacom: Cara Memasang Widget Popular Post untuk Blogger

Iklan Semua Halaman

Cara Memasang Widget Popular Post untuk Blogger

Minggu, 10 Juni 2018



Cara Memasang Widget Popular Post untuk Blogger: Sudah lama juga saya tidak membuat artikel, namun pada kesempatan malam ini saya akan share cara memasang widget popular post pada blogger. Mungkin di atara kalian sudah pada tau apa itu popular post ? Atau jika anda sekiranya masih belum tau khususnya bagi yang masih newbie atau maish pemula maka saya akan menjelaskan sedikit apa itu popular post.

Popular Post atau sering ditulis oleh blogger dengan sebutan Tulisan Terpopuler pada dasarnya punya banyak fungsi. Selain berguna untuk menaikan trafik pageview pada blog kita, dengan memasang widget ini, juga akan 

Tujuan lain dari kita memasang popular post adalah untuk mempercantik tampilan blog atau website kita. Dengan kita memasang widget Popular Post secara baik dan unik tentu akan menarik perhatian pengunjung untuk mengklik dan menambah waktu kunjungannya ke blog kita, sehigga bounce rate blog akan semakin kecil, dengan begitu nilai kita akan bertambah dimata search enggine maupun Alexa.

Kelemahan dari widget bawaan blogger tersebut adalah memiliki struktur tampilan yang kurang bagus. Apalagi dengan pengaturan yang rumit jika ingin merubahnya. Hal ini membuat banyak para blogger mengurungkan niatnya untuk memasang widget ini di blognya. Nah langsung saja masuk ke langkah-langkah cara memasnag popular post nya tersebut pada blog anda.

Widget Popular Post 

1. Pertama , seperti biasanya yaitu anda harus masuk ke halaman editor template [ edit html
2. Kemudian Cari kode (CTRL+F) ini  ]]></b:skin>
3. Dan letakkan kode di bawah ini tepat dibawah kode ]]></b:skin>
Style 1
#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 2
#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 3
#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

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

.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}
Jangan lupa juga anda masukan kode kode di bawah ini dan simpan 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>
Cara memasang widgetnya, anda harus centeng image thumbnail seperti gambar di bawah ini.
Demikian penjelasan pada malam ini, semoga bermanfaat untuk anda.
Baca Juga