Click Here

Labels

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
Harga Notebook Acer Aspire S3 Ultrabook

Sudah 24 Orang Berkomentar, Silakan anda yang selanjutnya :

Komentar dari agung ap :

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

Komentar dari Ambar :

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

Komentar dari agung ap :

kok ga mau ya?
kok malah error? help me

Komentar dari G E O R G E O U Z :

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

Komentar dari Ngeposting ni yee :

oQe jUGa nI hAsil eKKsperimennYa sObat,,

Komentar dari agung ap :

Thanks mamen, skrg udah bisa :D

Komentar dari Rizky2009 :

kenapa yah sob blog aq g bisa dipasang artikel terkait ?

Komentar dari Arief Masqulin :

nice info... thanks sob

Komentar dari Pradipta Suarsyaf :

Thx banget bro....

Komentar dari bidikcom :

bisa dijadikan bahan modifikasi nich....

Komentar dari http://bowol.blogspot.com/ :

keren bozz
akan segera dicoba

Komentar dari ~MJ_QueeN~ :

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

Komentar dari Blognya Harriz :

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

Komentar dari ALMANDURY :

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

Komentar dari G E O R G E O U Z :

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

Komentar dari PNPM-MP Team Jatim-8 :

Sudah terpasang gan.
Thanks..

Komentar dari crowjagarichu :

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

Komentar dari asd :

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

Komentar dari tuanmudakhasan :

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

Komentar dari Iblizkecil :

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

Komentar dari Daerah Paling Rawan Dosa (DPRD) :

KEREN MAS THANKS Y...SALAM KENAL

Komentar dari Boy :

mantab gan sangat membantu untuk mempercantik blog

Komentar dari Boy :

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

Komentar dari onlyx-45 :

mantap artikelnya sob..
informasi bermanfaat sekali.

thx udah sharing

Silakan Tulis Komentar Anda di Bawah ini :

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