Membuat Widget Popular Post keren Buatan Chaya Education

Widget Popular Post wajib dipasang pada blog adalah bisa membuat pengunjung situs blog mengetahui postingan mana yang paling digemari atau populer pada situs blog tersebut. Dengan demikian postingan artikel yang diunggulkan atau populer tersebut tidak hanya mendapatkan pengunjung dari search engine saja, melainkan bisa didapatkan dari pengunjung situs blog sobat sendiri, karena mereka telah tertarik terhadap post unggulan yang tersemat pada navigasi widget Popular Post tersebut. Hasilnya tentu Pageview yang sobat dapatkan akan lebih bertambah.

Setelah membaca alasan diatas, apakah masih ada blogger yang tidak memanfaatkan fitur dari widget Popular Post??? Sangat disarankan untuk memanfaatkan widget ini ya para sahabat.

Jika sobat tertarik untuk memasang Widget popular post ini pada blognya, silakan menyimak dan menerapkan tutorial berikut.

Membuat Widget Popular Post keren Buatan Chaya Education

Tahap Pertama : 

1. Login ke Blogger

2. Lihat tab Tema > Edit HTML

3. Masukkan CSS dibawah ini, tepat diatas kode ]]></b:skin>

/* Popular Post By Chaya Education*/
#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:400;font-size:14px;color:#000;line-height:1.4em;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:#48d;}
.PopularPosts li:first-child .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.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.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:85px;height:50px;margin:0 10px 0 0;overflow:hidden;float:left}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-title a{font-size:17px;line-height:1.3em;font-weight:700}

4. Selanjutnya, masukkan Javascript dibawah ini, Tepat diatas kode </body>

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

5. Simpan Template
DONE!

Mudah kan sobat cara buatnya, tetap bersama chayaeducation ya untuk mendapatkan update artikel lainnya+_=