Popular Post (Widget) adalah suatu fitur yang disediakan blogger kepada para pengelola situs blog untuk menampilkan postingan/artikel yang paling sering dicari pengunjung di situs blog. Walaupun tak sepenting Widget Recent Post, Popular Post juga merupakan sebuah navigasi blog yang dapat dikatakan wajib dimiliki oleh sebuah situs blog.
Alasan kenapa widget Popular Post wajib dipasang di sebuah situs blog adalah akan membuat pengunjung mengetahui artikel/postingan yang paling digemari di situs blog anda. Dengan begitu, artikel top (popular) tersebut tidak hanya mendapatkan pengunjung dari search engine saja, karena selain pengunjung di search engine, pengunjung tambahan dapat didapat dari pengunjung yang tertarik terhadap navigasi Popular Post itu sendiri. Dengan begitu, Pageview yang anda dapatkan akan bertambah.
Cara Membuat Popular Post menjadi Thumbnail Tanpa Judul dan Ringkasan
Ini adalah tampilan widget popular post sederhana yang merupakan widget bawaan dari blogger yang belum menerima kostuminasi apapun. Singkatnya, widget ini adalah bentuk awal widget dari popular post.
Ikuti langkah-langkah berikut ini :
1. Login ke Dashboard situs blog anda
2. Pilih menu Tata Letak/Layout → Tambahkan Gadget → Pilih Entri Populer
3. Pilih opsi (banyaknya post yang akan ditampilkan, perhitungan popular post dengan batasan waktu) sesuai kebutuhan anda
4. Klik Simpan
5. Sekarang Masuk ke menu Tema / Desain → Edit HTML.
JANGAN Klik pada kotak centang Expand Widget Templates. Biarkan saja tidak dicentang, dan cari PopularPosts1 (Lakukan dengan cara Ctrl + F untuk menemukannya di template anda) dan anda akan mendapatkan beberapa baris kode seperti ini :
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>.....</b:widget>
4. Ubah Baris kode tersebut dengan kode berikut ini :
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>1</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>false</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:post.title' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div class='clear'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:post.title' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div class='clear'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>1</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>false</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:post.title' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div class='clear'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:post.title' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div class='clear'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
Tambahkan CSS
5. Tempelkan kode berikut ini untuk menganti CSS Post Populer yang ada di template anda :
/* Popular Post */
.PopularPosts .item-title{display:none}
.PopularPosts .widget-content ul li{background:none repeat scroll 0 0 transparent;float:left;list-style:none;margin:8px;padding:0;border:0;overflow:hidden}
.popular-posts .item-thumbnail{position:relative;overflow:hidden;margin:0;}
.popular-posts .item-thumbnail img{padding:0;height:73px;width:73px;}
.PopularPosts .item-title{display:none}
.PopularPosts .widget-content ul li{background:none repeat scroll 0 0 transparent;float:left;list-style:none;margin:8px;padding:0;border:0;overflow:hidden}
.popular-posts .item-thumbnail{position:relative;overflow:hidden;margin:0;}
.popular-posts .item-thumbnail img{padding:0;height:73px;width:73px;}
6. Klik Simpan
7. Lihat blog anda.
Tampilan Widget Post Popular anda kini hanya menampilkan gambar saja tanpa judul dan ringkasan.
Widget Popular Post menjadi Thumbnail Tanpa Judul dan Ringkasan ini sangat cocok untuk blog dengan niche aplikasi, resep dan fotografi karena mengutamakan tampilan gambar pada situs blog
Tampilan Widget Post Popular anda kini hanya menampilkan gambar saja tanpa judul dan ringkasan.
Widget Popular Post menjadi Thumbnail Tanpa Judul dan Ringkasan ini sangat cocok untuk blog dengan niche aplikasi, resep dan fotografi karena mengutamakan tampilan gambar pada situs blog
Nah, Mudah bukan?