Skip to main content

Thumbnail Related Posting with Marquee (Berjalan)

Setelah kemaren memposting tentang cara membuat Related Posting menggunakan Daftar list berdasarkan Label dan Related Posting menggunakan Gambar(Thumbnail). Nah kali ini sedikit berkaitan dengan Related Posting menggunakan Gambar(Thumbnail).

Nah, untuk menampilkan Related Posting menggunakan Gambar anda bisa lihat disini cara membuatnya.
Namun ada sedikit kekurangan dari Related posting ini, yaitu anda tidak bisa menampilkan Related postingnya dalam jumlah yang banyak, jumlah yang ditampilkan sebatas ukuran lebar halaman posting saja, seperti halnya blog ini, hanya bisa menampilkan 4 judul serta gambar dari related posting tersebut.

Lalu bagaimana cara menampilkan related posting tersebut dalam jumlah yang banyak...???
Oke, yang ingin di sharingkan kali ini mencoba mengangkat tentang menggunakan metode Marquee pada thumbnail related posting. Untuk contoh anda bisa lihat kebawah posting ini.
Setelah mengutak-atik sedikit, sampai sempat sedikit error, hingga akhirnya saya membuat blog lagi khusus untuk eksperimen kode ini (lebay neehhh), dan akhirnya berhasil juga nih Thumbnail Related Posting menggunakan metode marqueenya....karena ternyata utk membuat agar bisa berhasil namun tidak membuat seluruh dari komponen related posting ini berjalan semua harus ada sedikit perubahan.

Oke langsung saja deh...
Nah, untuk membuatnya, anda cukup melakukan perubahan pada kotak code yang kedua(Lihat code asli Thumbnail Ralated Postnya disini).
Contoh codenya seperti ini :

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://serba-seru.blogspot.com/2010/02/thumbnail-related-post-artikel-terkait.html' style='display:none;'>Thumbnail Related Post</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Cukup ganti seluruh code tersebut dengan code dibawah ini :

<!-- Marquee Serbablog Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
<a href='http://serba-seru.blogspot.com/2010/02/thumbnail-related-posting-with-marquee.html' style='float:right;' target='_blank'>Thumbnail Related Post Berjalan (Marquee)</a></div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://serba-seru.blogspot.com/' style='display:none;'>Serba Blog</a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

Anda bisa mengganti angka 10 dengan jumlah yang anda inginkan, ini adalah jumlah related posting yang ingin di tampilkan.
Jika sudah selesai, silakan simpan hasil kerja anda.

NB : Untuk yang sudah menggunakan code Thumbnail related post ini, jika anda ingin mencari code tersebut di Template anda, anda bisa menggunakan Ctrl+F lalu ketik code yang anda cari (misalnya : <!-- Related Posts with Thumbnails Code Start-->).

NB : Sedikit informasi, yang saya ketahui untuk Related posts marquee ini hanya compatible jika anda menggunakan browser Firefox, Flock, Opera.

Smoga berhasil,
Smoga bermanfaat
Terima Kasih

Comments

  1. Mantap sob, saya coba ya di blog saya
    biar keren kyk punya nya Mas :)

    ReplyDelete
  2. related post wit marquee.. contohnya seperti punya kamu kan?? wah keren.. tapi memperlama loading blog ga ya??

    ReplyDelete
  3. kok ga mau ya?
    kok malah error? help me

    ReplyDelete
  4. @ Agung : td kayaknya ada code yg kehapus...skrg udh di benerin tuh...+ udh di uji coba lagi....ma'nyussss....thanx infonya yaaa...hampir aja tuh jd kasus script codenya...heheheheeee...

    @ ambar : kl liat dr loading blog...kan bisa liat sendiri blog ini, sebenarnya kl blognya udh pake thumbnail related, trus mau di bikin marquee...ga bakal ngaruh dg loading blog, coz cm nambah sedikit code aja tuh...

    ReplyDelete
  5. oQe jUGa nI hAsil eKKsperimennYa sObat,,

    ReplyDelete
  6. Thanks mamen, skrg udah bisa :D

    ReplyDelete
  7. kenapa yah sob blog aq g bisa dipasang artikel terkait ?

    ReplyDelete
  8. bisa dijadikan bahan modifikasi nich....

    ReplyDelete
  9. bos bisa g marqueenya dipercepat jalannya,soalnya marqueenya menurut saya terlalu lama

    ReplyDelete
  10. Keren Banget kapan-kapan masuk di http://blogharriz.blogspot.com ya...

    ReplyDelete
  11. Selamat pagi bozz.. nanya ne kalo buat recent post ada ga bos sprt " Thumbnail Related Posting with Marquee "

    ReplyDelete
  12. @ ~MJ_QueeN~ : bisa dipercepat, cari aja tulisan ini scrollamount='2' , trus ganti angka 2 dengan angka sesuai selera...

    @ ALMANDURY : maksudnya gimana yaaa...???

    @ All : Thanx atas kunjungannya

    ReplyDelete
  13. Tks gan berhasil.. tp tetap sm tidak bs tampil di hal muka..

    ReplyDelete
  14. kok ga muncul ya gan?? yg muncul cuma tulisan related post nya doang.. thumbnail gambarnya ga nongol? gimana solusinya??

    ReplyDelete
  15. manatb gan,,, mohon untuk nyedottttttttttttt
    makasih...sangat bermanfaat nie

    ReplyDelete
  16. Nice share kak Admin ....
    Sangat Bagus Buat Blog ane template standar :)

    ReplyDelete
  17. mantab gan sangat membantu untuk mempercantik blog

    ReplyDelete
  18. lihat hasilnya di blog saya http://aboutkomik.blogspot.com/2011/10/hulk-hijau.html tpi saya lagi ngedit warnanya biat kelihatan menarik
    hehehe... sekalia lagi top dah buat agan

    ReplyDelete
  19. mantap artikelnya sob..
    informasi bermanfaat sekali.

    thx udah sharing

    ReplyDelete

Post a Comment

Silahkan tulis komentar anda pada kolom diatas, namun diharapkan jangan melakukan spamming, hindari komentar yang mengandung unsur SARA, berkata kasar serta hal2 negatif lainnya, Terima Kasih, Semoga bermanfaat

Popular Posts

Cara Membuat Random Posting Title Berjalan (Marquee)

Setelah kemaren sempat memposting " Cara menampilkan Top Comment Berjalan (Marquee) " , nah, kali ini mencoba memaparkan "Cara Membuat Random Posting Title Berjalan (Marquee)" . Postingan kali ini juga untuk menjawab pertanyaan dari sobat blogger pada waktu yang lalu sempat bertanya kalau cara membuat Recent Postingnya bagaimana? Thanx ya buat sobat Ngeposting ni yee + sobat yang satu lagi saya lupa (karena beliau bertanya via shoutbox dan sekarang shoutbox sudah saya ganti, jd maaf kl saya lupa yaaa...) karena pertanyaan anda memberikan saya ide untuk membuat postingan yang baru, abisnya saya sempat bingung mau membuat postingan apalagi yaaa....heheheheheeee.... Sebenarnya mau dikasi judul Recent Posting Title .....namun rasanya kurang pas kl mau bilang tentang tool ini Recent Posting Title , karena tool ini menghadirkan judul-judul posting blog kita secara acak bukan menampilkan judul postingan terbaru pada blog kita. Tapi ga apa-apa dech, ada baiknya juga si

Cara Pasang Kotak Komentar/Comment Form Facebook di Blogger

Cara Membuat Kotak Komentar/Comment Form Facebook di Blogger | Mungkin Tips ini udah bukan hal baru lagi, namun jika niat ingin berbagi, tidak ada kata terlambat. Berikut ini ingin mensharingkan cara membuat Kotak Komentar/Comment Form Facebook yang akan di tampilkan di Blogger. Jadi Kotak komentar yang sudah secara default ada di blogger dirubah atau ditambah dengan aplikasi kotak komentar/Comment form yang disediakan oleh Facebook. Fungsi kotak komentar Facebook ini adalah sebagai pengganti atau alternatif lain bagi pengunjung blog kita untuk memberikan komentar di blog kita, karena memungkinkan untuk pengunjung blog selain pengguna Blogger/Wordpress/Typepad/Open id untuk memberikan ide/komentar/saran/kesan untuk blog kita. Dikarenakan pengguna Facebook semakin meningkat jumlahnya, jadi bisa dipastikan hampir semua pengunjung blog memiliki akun Facebook. Untuk melihat demo Kotak komentar Facebook, silakan lihat Disini Berikut ini cara membuat/memasang kotak komentar Facebook di

Cara Menampilkan Top Comment Berjalan (Marquee)

Wahhh...lama juga ga posting nich...akhirnya kangen juga sama blog setelah beberapa hari tidak menjamahnya karena ada sedikit kesibukan diluar. Oke langsung saja ke postingan , sebenarnya postingan kali ini adalah untuk menjawab pertanyaan sobat blogger, saya lupa namanya karena beliau bertanya via shoutbox blog ini yang lama, dan pada akhirnya shoutbox saya di banned, dan sekarang berganti dg Cbox, jadi maaf ya jika saya lupa, maklum memori sudah lemot. kalau tidak salah beliau bertanya bagaimana cara membuat Top Comment berjalan seperti di blog ini ? dan saya menjawab Coming soon sobat( Kayak film baru aja ) Oke, setelah kemaren sempat memposting cara menampilkan Top Comment di Blog , nah... sekarang mencoba membeberkan cara alternatif kedua untuk menampilkan Top Comment di blog dengan tampilan yang sedikit berbeda. Cara alternatif yang kedua ini menggunakan metode tulisan berjalan (Marquee) . makanya postingan kali ini saya beri nama Cara Menampilkan Top Comment Berjalan (Ma

Cara Membuat Halaman Posting Berpindah dari Kiri ke Kanan

Cara Membuat Halaman Posting Berpindah dari Kiri ke Kanan | Sempat bingung menentukan judul artikel yang satu ini, tapi yang jelas gambarannya seperti dibawah ini, Pernah lihat halaman blognya Kang Rohman (kolom-tutorial.blogspot.com), jika diperhatikan, ketika pada halaman beranda/Home page, bagian artikel/posting terletak di sebelah kiri dan sidebar berada di sebelah kanan, dan ketika masuk ke halaman postingnya, halaman artikel akan berada di sebelah kanan dan sidebar di sebelah kiri. Nah, untuk membuat halaman tersebut agar bisa berpindah-pindah ternyata cukup simpel. ternyata yang dibutuhkan hanya sedikit penambahan pada struktur CSS nya saja. berikut cara-caranya : Login ke Blogger Langsung menuju ke Design/Rancangan Klik Edit HTML centang tulisan "Expand Widget Template" Cari kode berikut : ]]></b:skin> Letakkan kode berikut ini setelah kode diatas  <style type='text/css'> <b:if cond='data:blog.pageType == &quot;item&quot;&

Blogger Lebih Asik dengan New Posting Editor

Nah...saat sekarang ini, para Blogging mania diberi kemudahan lagi oleh Blogger. Sebuah Posting Editor Baru telah di luncurkan. disini kita diberi kemudahan lagi dalam memposting entry. Adapun fitur-fitur yang telah diperbaharui sebagai berikut : New Toolbar Full safary 3 support Improved Handling Image Improved Raw HTML Geotagging Vertical Resizing Easy link editing in Compose mode Placeholder image for tags Preview dialog  Untuk lebih jelasnya dapat anda lihat Disini Nah...untuk dapat menggunakan New Posting Editor ini ( bagi anda yang masih menggunakan Posting editor lama ), berikut ini cara mengaktifkan New Posting Editor nya : Login dulu ke Blogger Masuk ke Setting/Pengaturan Pada halaman dasar, scroll hingga ke bawah, cari Setting Global   Pilih Editor yang diperbaharui Simpan Settingan anda Selesai Dech... Selamat menggunakan Posting Editor yang baru Sukses untuk semua Blogger...!!!