×Close

Notifications

Disqus Logo


Cara Memasang Widget Popular Post untuk Blogger


Cara Memasang Widget Popular Post untuk Blogger

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.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas

Ketik dan Tekan Enter Di Bawah Ini