Widget yang hampir semua situs atau blog ada adalah widget popular post. Widget ini memang penting dan sangat penting untuk menunjukkan eksistensi dan kredibilitas sebuah situs.
Jika situs atau blog sahabat telah menampilkan dan memasang widget popular post, maka sudah tepat dan tidak salah. Hal itu karena widget ini sangat penting. Apa pentingnya widget popular post? Widget ini memiliki banyak tujuan, diantaranya adalah:
Pentingnya Widget Popular Post
Jika situs atau blog sahabat telah menampilkan dan memasang widget popular post, maka sudah tepat dan tidak salah. Hal itu karena widget ini sangat penting. Apa pentingnya widget popular post? Widget ini memiliki banyak tujuan, diantaranya adalah:
- Menunjukkan kualitas sebuah situs. Situs akan terlihat kualitasnya saat seorang pengunjung memperhatikan widget popular post. Hal itu karena dengan melihat dan memperhatikan postingan-postingan yang popular ini, seseorang akan bisa menilai kualitas sebuah situs. Jika peringkat pertama dari isi postingan terlihat biasa-biasa saja, maka dipastikan kualitas situs tersebut buruk. Namun jika peringkat pertama dari isi postingan 'keren' habis, maka dipastikan kualitas situs tersebut ajiiib. WALAU, penilaian ini tidak selamanya benar.
- Menarik minta pembaca. Tentu keberadaan widget popular post ini akan memantik minat pengunjung untuk membacanya. Karena biasanya postingan-postingan yang masuk daftar popular post adalah postingan-postingan yang berkualitas sehingga pembaca pun akan tertarik untuk mengunjunginya.
- Isi dari sebuah situs. Saat sahabat memasang widget popular post, maka secara otomatis sahabat telah menunjukkan kepada pengunjung isi di dalam situs sahabat. Akibatnya, pengunjung pun langsung paham situs apakah yang dikunjunginya itu. Jika terkesan, tentu ia akan menjelajahi postingan-postingan lain yang berkualitas.
- Keindahan sebuah situs. Selain keuntungan-keuntungan di atas, tentu keberadaan widget popular post akan menjadikan situs kita terlihat indah dan berkualitas. Terlebih lagi, jika sahabat memperhatikan keindahan dan keelokan widget popular post tersebut.
Cara Membuat Widget Popular Post dengan Satu Thumbnail
Caranya sangat mudah sekali. Pertama yang harus dibuat adalah buat dulu widget popular post seperti biasa dengan settingan sebagai berikut.
Kemudian edit html settingan blog sahabat dan letakkan kode di bawah ini di atas kode </head> atau </body>.
>
<style>
.PopularPosts .widget-content ul{padding:0;margin-top:-10px;width:98%}
.PopularPosts .item-thumbnail{margin:0;border:4px double #ddd;}
.PopularPosts .item-title {padding:0;}
.PopularPosts .item-title a{text-decoration:none;color:#000;font-weight:400;font-size:14px;}
.PopularPosts .item-title a:hover{color:#FCA13A}
.PopularPosts .item-snippet{font-size:14px;line-height:1.6em;color:#777;padding-top:10px}
.PopularPosts li{border-bottom:1px solid #ddd}
.PopularPosts li .item-thumbnail,.PopularPosts li .item-snippet{display:none}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block;overflow:hidden;max-height:170px;margin-bottom:10px;font:13px Arial;width:100%}
.PopularPosts img{padding:0;}
.PopularPosts .widget-content ul li{padding:10px 0;margin:0}
</style>
<script type='text/javascript'>
//<![CDATA[
var newidth=295;var neweight=170;$(".popular-posts .item-thumbnail img").each(function(){var t=$(this).attr("width");$(this).attr("width",newidth),$(this).attr("height",neweight),$(this).attr("src",$(this).attr("src").replace("/s72-c/","/w"+newidth+"-h"+neweight+"-c/"))}),$(".PopularPosts .item-snippet").text(function(t,i){return i.substr(0,70)});
//]]>
</script>
.PopularPosts .widget-content ul{padding:0;margin-top:-10px;width:98%}
.PopularPosts .item-thumbnail{margin:0;border:4px double #ddd;}
.PopularPosts .item-title {padding:0;}
.PopularPosts .item-title a{text-decoration:none;color:#000;font-weight:400;font-size:14px;}
.PopularPosts .item-title a:hover{color:#FCA13A}
.PopularPosts .item-snippet{font-size:14px;line-height:1.6em;color:#777;padding-top:10px}
.PopularPosts li{border-bottom:1px solid #ddd}
.PopularPosts li .item-thumbnail,.PopularPosts li .item-snippet{display:none}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block;overflow:hidden;max-height:170px;margin-bottom:10px;font:13px Arial;width:100%}
.PopularPosts img{padding:0;}
.PopularPosts .widget-content ul li{padding:10px 0;margin:0}
</style>
<script type='text/javascript'>
//<![CDATA[
var newidth=295;var neweight=170;$(".popular-posts .item-thumbnail img").each(function(){var t=$(this).attr("width");$(this).attr("width",newidth),$(this).attr("height",neweight),$(this).attr("src",$(this).attr("src").replace("/s72-c/","/w"+newidth+"-h"+neweight+"-c/"))}),$(".PopularPosts .item-snippet").text(function(t,i){return i.substr(0,70)});
//]]>
</script>
Bagaimana, mudah bukan cara membuat popular post dengan satu thumbnail? Semoga sukses ya dan jika ada kesulita, silahkan jangan ragu untuk menuliskannya di kotak komentar. Kami akan selalu siap untuk membantu sebisa mungkin. Salam sukses selalu dari Ngonline06.
Oya, selain tampilan satu thumbnail seperti di atas, ada tampilan lain dari widget popular post yang tak kalah menariknya, silahkan kunjungi Membuat Popular Post dengan Tampilan Keren
No comments
Silahkan berkomentar dengan baik.