Widget popular post untuk blog

Dunia Ilmu Bersama : Widget popular post untuk blog - Hai sobat, pada kesempatan malam ini, saya akan berbagi sebuat widget popular post yang pastinya keren dan menarik. mungkin sobat sudah tidak asing lagi dengan widget yang satu ini. oke langsung saja ikuti langkah - langkahnya di bawah ini dengan benar.

Berikut langkahnya :

• Pertama, login ke dashboard blogger sobat -> blogger.com
• 
  
• Setelah itu, tambahkan widget popular post bawaan seperti biasa. dengan cara masuk ke tata letak -> add widget -> popular post
• 
  
• Save, dan setelah itu, sobat masuk ke dalam TEMPLATE -> EDIT HTML. dan cari script </head> atau </body> dan kemudian silahkan sobat pastekan script di bawah ini tapat diatasnya.

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

• Langkah yang terakhir tinggal sobat save dan kemudian refresh blognya dan lihat hasilnya.

Sekian untuk artikel malam ini, semoga widget ini berguna bagi sobat, dan sampai jumpa pada artikel terbaru dumube.