11 Widget Popular Posts Dengan Efek Marquee

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Popular Posts With marqueeSetelah sebelumnya saya mengetengahkan tutorial menambahkan widget popular posts pada blog, kali ini saya kembali update dengan modifikasi berbeda pada widget popular posts blogger. Yaitu widget popular posts dengan efek marquee, berjalan keatas.

Untuk jelasnya bagaimana efek marquee pada popular posts silahkan klik button live demo berikut.

View Demo
 

Untuk membuat popular posts dengan efek marquee ini, saya sarankan untuk anda memback up template terlebih dahulu guna menghindari kesalahan dalam penambahan kode pada template.

Baiklah tahapan pembuatannya sebagai berikut:

1. Login ke akun anda>> Pada dasbor masuk pada bagian tata letak>> Tambah gadget dan pilih popular posts seperti gambar berikut

Popular Posts Widget

Jika anda sudah menambahkan widget ini maka lewati langkah no 1

2. Masuk ke bagian template>> Edit HTML

3. Ceklist pada bagian Expan widget templates

4. Cari kode <div class=’widget-content popular-posts’> dan simpan kode marquee dibawah ini setelah 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%'>

<ul>

<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>

</ul>

</marquee>

</ul>

<b:include name='quickedit'/></div>

</div>

</b:includable>

</b:widget>

6. Simpan template dan lihat hasilnya pada blog anda!

View Demo
 

Demikian tutorial membuat popular posts dengan efek marquee kali ini. Semoga bermanfaat!

Jika ingin mencoba efek lain pada widget popular posts silahkan klik link titel posts berikut:

Selamat berkreasi!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

11 komentar :

  1. bagus nih, cuma kaya'nya aga sedikit berat pas loading blog ya?
    tapi saya coba dulu d blog saya yang lain deh, makasih ya dah berbagi, sukses untuk anda.

    BalasHapus
    Balasan
    1. Nggak berat kok sob, z dah coba khn hanya nambah CSS doang, yg berat itu klu nambah script kebanyakan diblog dan koneksinnya memang lelet. :D

      Benar nggak mbak admin?

      Hapus
    2. Saya kira juga demikian, penambahan kode marquee pada widget popular posts tdk akn memperberat loading blog insyaAllah. Terima kasih jawaban dan apresiasi semuannya.

      Hapus
  2. terimakasih atas tips and triknya

    BalasHapus
    Balasan
    1. Sama-sama, thanks jg tuk apresiasinya.

      Hapus
  3. Ini widget popular posts dengan efek marquee, mirip efekx dengan recent posts dengan jquery kmrn yg pakai efek animasi spy bukan?

    BalasHapus
    Balasan
    1. Mirip? Em, lihat kembali aja demonya, kayaknya penggunaan script JQuery lebih halus efekx. Dengan marquee ini juga bergerak keats sdgkn yg animasi spy kayaknya sebaliknya. Terserah anda mau memilih yang mana. Terima kasih apresiasinya!

      Hapus
  4. terimakasih tipsnya,,,kapan-kapan saya coba, sekarang di bookmark dulu

    BalasHapus
    Balasan
    1. Ya, silahkan! Terima kasih apresiasinya.

      Hapus
  5. wah.. berhasil gan :), thank ya (o)

    BalasHapus
  6. terima kasih buanged gan, sangat membantu... dari kemarin2 ane cari-cari gak ada yang work di blog ane, semenjak coba tips dari agan alhamdulillah berhasil

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!