Cara Membuat Popular Post bergerak pada blogspot

Cara membuat popular post bergerak | Ini menjadi hal yang menarik bagi saya penulis blog ini pada postingan ini, kenapa? Tadi saya jalan2 alis blog walking kesana kemari dan melihat sebuah blog dengan widget popular postnya bisa bergerak sesuai dengan scroll mouse, popular postnya bergerak naik turun, pokoknya manis dech, dan mantap sangat, maka pada kali ini saya ingin berbagi Cara membuat popular post bergerak keatas post ini untuk sahabat-sahabat blogspot semuanya.

Sebenarnya cara membuat popular post memang sudah ada dan disediakan oleh blogger sendiri, namun masih kurang maknyos, karena bentuk dan motidnya yang biasa-biasa saja, tidak bisa bergerak naik turun :). disini kita akan mengulas tentang cara membuat popular post bergerak. ayo kita simak dengan seksama.

Berikut langkah-langkah atau cara membuat popular post bergerak keatas


1. Login ke blog dulu, kemudian anda masuk ke DESAIN --> TATA LETAK


2. Sudah! kemudian tambah widget = klik gadget
3. Pilih entri popular, centang semua kotak
4. Simpan/SAVE

Apabila Gadget sudah terpasang kemudian klik Desain-Template yang posisinya dibawah Tata Letak. Kemudian klik Edit HTML, jangan lupa centang Expand widget.

Setelah langkah diatas, kemudian selanjutnya Cara membuat popular post bergerak pada blogspot adalah dengan mencari kode berikut:

Sobat Cari kode 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>


Sudah ketemu, kemudian letakkan kode berikut setelah kode diatas.

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


Setelah itu cari dibawahnya lagi kode </ul>, dan masukan kode dibawah ini tepat sebelum/diatas kode </ul> tersebut.

</marquee>

LIHAT HASIL PERPADUAN KODENYA, 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>


Kalau anda menggantikan tinggi gadget, silakan anda gantikan kode warna hijau diatas. Silakan anda ber expressi, semoga berhasil. Untuk selanjutnya silakan kita diskusi dibawah ini. Thank

loading...

44 komentar:

  1. Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

    BalasHapus
  2. mantabs gan lngsung ke TKP

    BalasHapus
  3. tolong di join back ya
    jansenmanullang.blogspot.com

    BalasHapus
  4. script ini khusus untuk blogspot dna tidak dapat diperguanakan pada blog wp ya.., sayang sekali..

    BalasHapus
    Balasan
    1. untuk blogspot,, untuk wp blm ana coba gan..

      Hapus
  5. Mantap gan..mgkin tambh kreen blog kita..mksh atas artikelx..di tggu gan kunjunganny

    BalasHapus
  6. artikelnya sangat bermanfaat, ijin mencoba gan...

    BalasHapus
  7. setelah ane coba di blog ane ternyata berhasil sob.. thanks ya..

    BalasHapus
  8. decyber@ Semoga bermanfaat bro
    Fauzi@ Iya silakan mas
    Aiizah@ Sama-sama non

    BalasHapus
  9. trimakasih bos sudah berhasil di terapkan
    http://gerobaksoftware.blogspot.com

    BalasHapus
  10. OK, sama2 mas tahjudin, semoga bermnfaat, keep blogging :)

    BalasHapus
  11. sudah saya terapkan kakak

    kalau mau ngurangi kecepatannya gimana ya? share ya
    masih newbie nih
    thx

    BalasHapus
  12. Terima kasih mas, sangat di butuhkan oleh agan agan blogger pemula nieh...

    BalasHapus
  13. sudah saya terapkan kakak

    kalau mau ngurangi kecepatannya gimana ya? share ya
    masih newbie nih
    thx

    BalasHapus
  14. nemu juga nih artikel ... nice share gan...www.solusi-cetak.com

    BalasHapus
  15. Thank Ziyan,,,,semoga bermanfaat

    BalasHapus
  16. wih jadi keren web blog saya nih, trima kasih banyak gan

    BalasHapus
  17. Thanks Y gan ...
    dah Gua coba Berhasil ...

    BalasHapus
  18. Ini ni yang gue cari
    Langsung Gue Pasang sob di blog ane n Berhasil,
    Http://twooneblogger.blogspot.com
    klo modifikasi Recent Comment Gimana Sob tutorialnya ???

    BalasHapus
  19. mkaie infonyaa boz,,,,
    mampir di blogfg ane ; vimax-shop.blogspot.com

    BalasHapus
  20. berhasil gan.. :)

    #comment back yaa..

    BalasHapus
    Balasan
    1. Great, semoga bermanfaat untuk semuanya :)

      Hapus
  21. mantap gan.. thx atas ilmunya.. :))

    BalasHapus
  22. terima kasih sharing ilmu ini....udah saya terapkan dan berhasil...

    BalasHapus
  23. Gan... makasih banyak nih,, mon ucapkan... infonya mantabss abissss.... ><


    http://blekkedet.blogspot.com/

    BalasHapus
  24. Berhasil gan,,,
    mksh bnyk yaaaaa,,,
    ditunggu kunbalnya,,,

    BalasHapus
  25. mantap eh,, langsung share ya gan

    BalasHapus
  26. wah di blog saya g cocok mas gimana nih..

    BalasHapus