Cara Menciptakan Widget Popular Post Keren Di Blog

Halo sobat blogger, menggunakan widget Popular Post pada blog menurut saya wajib hukumnya, alasannya ialah ini mampu memperlihatkan saran bagi pengunjung mengenai postingan mana yang menjadi unggulan pada situs blog kita, tentu ini mampu 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 semoga mampu memikat hati para pengunjung sobat, jadi kali ini admin akan membagikan tutorial Cara Membuat Widget Popular Post Keren di Blog

Gambar diatas merupakan tampilan dari widget popular post yang dibagikan pada postingan admin kali ini.

Alasan lain dari widget Popular Post wajib dipasang pada blog yaitu mampu 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 menerima pengunjung dari search engine saja, melainkan mampu didapatkan dari pengunjung situs blog sobat sendiri, alasannya ialah 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.

Baca Juga : 
1.Cara Pasang Tombol Widget Google Plus Badge di Blog 
2.Cara Mengaktifkan Pengalihan HTTPS di Blogspot 
3.Cara Membuat Prims Syntax Highlighter Berwarna di Blog

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 mampu 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 isyarat script dibawah ini tepat sebelum isyarat </body> 
Sript ini berfungsi untuk mengatur semoga 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 mirip gambar dibawah ini

Sekarang sobat blogger mampu melihat jadinya 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 mampu sampaikan pada kolom komentar disqus dibawah. 
Semoga bermanfaat dan terimakasih telah berkunjung.

Source: www.arlinadzgn.com

Share this post