MEMBUAT WIDGET POPULAR POST BERGERAK

Widget Popular Post adalah sebuah widget yang berfungsi untuk menginformasikan kepada para visitor blog tentang posting-posting yang paling populer dalam sebuah blog. Blogspot dalam hal ini telah menyediakan widget popular post tersebut, tetapi dalam kondisi yang statis, alias tidak bergerak. Widget Popular Post ini biasanya diletakkan pada bagian sidebar.

Pada artikel ini kita akan sedikit membahas tentang widget tersebut dengan sedikit pembaharuan, yakni widget ini dapat bergerak alias mempergunakan fungsi marque. Berikut ini cara membuatnya  :

1. Masuk ke Design-Page Elements





2. Kemudian pilih add a gadget




3. Klik popular post



4. Sesudah widget tersebut berhasil dipasang

• Ke design template
• Ke edit HTML
• Centang pada expand template widget

cari kode seperti dibawah 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>

INFO :

• Text warna Hijau = Kode yang Dicari
• Text warna Merah = Kode yang Ditambahkan
• Scrollamount = Kecepatan Bergerak slide (nilai 1 adalah nilai untuk yang paling lambat)
• Height ukuran Tinggi widget, jadi dari nilai 140 bisa di ubah sesuai kebutuhan

Demikianlah tips-trik ini, selamat mencoba, semoga sukses.