Widget Popular Post Keren Untuk Blogspot. Ok sobat pada kesempatan ini saya akan membagikan lagi widget popular post yang bisa kamu pasang di Blog Blogspot kamu. Pastinya kamu sudah tahu semua widget popular post ini, yah, sesuai namanya widget ini menampilkan artikel yang paling sering di kunjungi di blog kamu.

Widget Popular Post Keren Untuk Blogspot
Widget Popular Post


Seblumnya juga seocips sudah pernah membagikan widget popular post keren lainnya . Membuat widget popularpost dengan tampilan yang menarik adalah untuk menarik perhatian pengunjung agar membaca artikel lain yang ada di Blog kamu. Nah langsung saja berikut adalah cara membuatnya.

Widget popular post

Pasang widget popular post di blog kamu dan setting seperti dibawah ini:



Buka edit HTML template Blogger kamu dan letakan kode dibawah ini diatas kode </head> atau kode </body>
<style>
/* PopularPost */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:500;font-size:14px;color:#000;line-height:1.7em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#0b944b;}
.PopularPosts li:first-child .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(0, 138, 33, 0.3);padding:10px;font-size:100%;line-height:normal;transition:.3s;}
.PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.5em!important;position:relative;border-bottom:1px solid #ccc}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:75px;height:62px;margin:0 10px 0 0;overflow:hidden;float:left; border:4px double #ccc;border-radius:4px;box-shadow:0 2px 2px #999;}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:170px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-title a{font-size:15px;line-height:1.6em;font-weight:600}
</style>
<script type='text/javascript'>
//<![CDATA[
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
//]]>
</script>
Simpan template dan lihat hasilnya. Lihat juga style popular post lainya DISINI . Sekian widget popularpost yang dapat dibagikan semoga bermanfaat.
0 Komentar untuk "Widget Popular Post Keren Untuk Blogspot"