CARA MEMBUAT POPULAR POST MENJADI BERGERAK

Membuat widget popular-post menjadi bergerak atau sebut saja berjalan ke atas ataupun ke bawah, sebenarnya memiliki beberapa fungsi, selain untuk fungsi penghematan space sidebar-blog, juga berfungsi untuk mempercanggih penampilan blog yang kita miliki. Contoh model atau aplikasi (baca : penerapan) ada pada widget popular-post yang saya terapkan pada blog saya ini, hal mana artikel-artikel postingan blog kita (yang paling populer) menjadi bergerak ke atas.

Cara pembuatannya cukup bahkan tergolong sederhana, karena hanya menambahkan script marque saja. Berikut ini adalah cara pembuatannya  :

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>

Perhatikan baik-baik, tulisan yang berwarna hijau adalah kode yang harus kita temukan, tulisan yang berwarna merah adalah script yang harus kita tambahkan, sedangkan tulisan yang berwarna biru adalah kode asli template yang ada.

Informasi tambahan :

Kode direction='up' ini menunjukkan arah gerak widget, keatas atau ke bawah, dan bila anda ingin widget bergerak ke bawah, ganti 'up' dengan 'down'.

Kode height='140' menunjukkan panjang kolom, anda dapat merubahnya sesuai keingingan anda.

Kode  scrollamount='3' menunjukkan kecepatan scrolling, semakin kecil angkanya, maka akan semakin cepat gerakannya.

Sekian, terima kasih.

Related Posts:

Get free daily email updates!

Follow us!