Desember 22, 2011

Membuat Popular Posts Marquee Berputar Keatas

Situseo Blog : Modifikasi dengan menambahkan script marquee pada popular posts default blogger sehingga menghasilkan widget popular posts yang bergerak berputar atau rolling keatas, jika sebelumnya pernah dibahas mengenai cara membuat popular posts animasi gambar berputar dengan menambahkan kode css.

Untuk membuat popular posts bergerak berputar keatas, saya sarankan untuk membuat back up template terlebih dahulu untuk menghindari kesalahan dalam penambahan kode pada template, tahap membuatnya sebagai berikut :

1. Masuk akun Blogger - Design/Rancangan - Add Gadget dan pilih Popular Posts seperti gambar dibawah ini, jika dalam blog kalian sudah terpasang widget popular posts tidak perlu menambahkan widget ini, kalian lewati saja cara no. 1.

widget popular posts marquee bergerak keatas

2. Kemudian masuk ke bagian Edit HTML
3. Ceklist pada bagian Expand Widget Templates
4. Cari kode <div class='widget-content popular-posts'> dan simpan kode marquee dibawah ini pada bagian bawah kode tersebut

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

5. Selanjutnya cari kode </b:loop> dan tambahkan kode </marquee> dibawah kode </b:loop>

Sehingga secara keseluruhan kodenya menjadi 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'>
<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>

6. Save template, dan buka blog kalian untuk melihat hasilnya.

Jika sebelumnya pernah kita bahas mengenai cara Membuat Popular Posts Dengan Animasi Gambar Berputar dengan tambahan kode css didalamnya, jika tertarik untuk mengetahui cara membuatnya, kalian bisa mebacanya pada postingan sebelumnya denga meng-klik link cara membuat popular posts dengan animasi gambar berputar diatas.

Semoga bermanfaat,

7 Diskusi untuk Membuat Popular Posts Marquee Berputar Keatas

17 Januari 2012 14.05  

blognya keren om,, :D

22 Februari 2012 10.51  

gan uda saya coba tapi kog nggak bisa ya ...
mohon pencerahanya...

22 Februari 2012 21.04  

@rio-aster : coba di ulang lagi dari awal, saya sudah coba, scriptnya masih berjalan normal

20 Mei 2012 21.19  

tfs sob.. nice info..
langsung ane coba nh sob..
alhamdulillah berhasil sob..

13 Agustus 2012 10.05  

thanks,shob

27 November 2012 17.57  

wow.. keren

27 November 2012 18.00  

@rio-ashter
bisa bos aku dah coba....

perhatikan cara penempatan "marquee" dan penutup "marquee" he he he... maaf cuma kasih kasaran aja.... !!!


bla bla bla bla bla;;;;;;;;....!!!


Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top