Cara Membuat Popular Post Dengan Thumbnail

Sempat saya blogwalking sebentar untuk melihat referensi apa yang bisa saya posting untuk konten kali ini. Ternyata saya menemukan hal unik yang ada di blog tetangga. Pada widget Popular Post-nya mempunyai tampilan unik serta menggunakan efek thumbnail. Saya menjadi terkesan untuk menyajikannya dalam posting kali ini untuk sobat-sobat blogger. Untuk widget Popular Post memang sudah tersedia dalam bawaan blogspot sendiri, tetapi butuh pengeditan sedikit untuk lebih menarik. Mari sobat ikuti tutorialnya

Pertama sobat tambahkan terlebih dahulu Widget Etri Popular

• Login ke akun blog sobat
• Tata letak - Tambah Gadget - HTML/Javacript
• Cari Widget Entri Popular lalu tambahkan
• Simpan.

Jika sudah sudah terpasang dengan baik, sobat lalukan penempatan widget dengan menyesuaikan lebar sidebar blog. Selanjutnya,
Pilih menu : Tab Template - HTML - centang Expand Widget
Sobat cari script berikut

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>

• Letakkan script berikut sebelum kode diatas

<marquee align='left' direction='up' height='150' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>

• Hasilnya akan menjadi seperti ini 

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (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'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (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 alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' 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 style='clear: both;'/>
<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 alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if></b:if>
</li> </b:loop>
</marquee> </ul>
<b:include name='quickedit'/></div>
</div>
</b:includable>
</b:widget>

Silahkan sobat ubah tinggi lebarnya sesuai kondisi tata letak blog sobat masing-masing.
Selamat Mencoba !

Digital Areas