Cara Mudah Membuat Widget Popular Post Keren Di Blog

Menggunakan widget Popular Post pada blog menurut saya wajib hukumnya, karena ini dapat memberikan saran bagi pengunjung mengenai postingan mana yang menjadi unggulan pada situs blog kita, tentu ini dapat mengundang ketertarikan pengunjung untuk membuka post unggulan yang ada pada blog tersebut, dan berujung pada meningkatnya blogview sobat.
Berhubung dengan hal tersebut, tampilan pada widget ini perlu dipertimbangkan agar bisa memikat hati para pengunjung sobat, jadi kali ini admin akan membagikan tutorial Cara Membuat Widget Popular Post Keren di Blog

Alasan lain dari 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.

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

Panduan Cara Membuat Widget Popular Post Keren Di Blog 

1. Buka Dashboard Blog sobat pilih Tema >> Edit HTML 
2. Tambahkan Script CSS dibawah ini tepat sebelum ]]></b:skin> atau </style> Sobat bisa menggunakan Ctrl + F untuk mempermudah pencarian

/* Popular Post*/
#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}

3. Selanjutnya tambahkan kode script dibawah ini tepat sebelum kode </body> 
Sript ini berfungsi untuk mengatur agar thumbnail dari gambar tidak pecah ketika dipasang pada blog.

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

4. Simpan template 
5. Selanjutnya tambahkan Widget Popular Post
6. Untuk setelan widget, sobat sesuaikan seperti gambar dibawah ini

Sekarang sahabat blogger bisa melihat hasilnya pada sidebar blog sobat. Sekian untuk tutorial blogger kali ini tentang Cara Membuat Widget Popular Post Keren di Blog

Jika ada yang ingin disampaikan atau ingin mengajukan pertanyaan, sobat bisa sampaikan pada kolom komentar disqus dibawah. Semoga bermanfaat dan terimakasih telah berkunjung.

Source: www.arlinadzgn.com