Thumbnail Related Posts with Marquee (Berjalan) By Blogger Note

Bagi anda yang sudah menggunakan atau ingin menggunakan Thumbnail Related Posts (artikel terkait bergambar), tentu akan lebih tertarik menggunakannya, karen tampilannya cukup menarik dengan adanya gambar, namun ada sedikit kekurangan dari tool yang satu ini, yaitu memakan banyak tempat di halaman blog. Maka dari itu, kebanyakan blog yang saya kunjungi meminimalkan jumlah related post tersebut, apalagi dengan ukuran halaman posting yang sempit. Maka dari itu untuk memaksimalkannya yaitu dengan alternatif marquee(berjalan).

Nah, untuk contoh Thumbnail Related Posting menggunakan metode Marquee ini bisa sobat lihat disini.

Pada postingan sebelumnya sudah dipaparkan cara membuat Related Posts + Thumbnail, sobat bisa menerapkan terlebih dahulu Tutorial Membuat Related Posts Dengan Thumbnail disini , namun cukup terapkan Code CSSnya saja

Nah, untuk memulainya :
1. Silakan lihat cara membuat Thumbnail related posts disini (Cukup terapkan code CSSnya saja/ code yang pertama)
2. Setelah sobat terapkan poin pertama diatas, sekarang silakan cari code ini :

<div class='post-footer-line post-footer-line-1'>

atau

<p class='post-footer-line post-footer-line-1'>

3. Jika sudah ketemu salah satu code diatas, letakkan code dibawah ini setelah salah satu code diatas :

<br /> <b:if cond='data:blog.pageType == "item"'><br /> <div id='related-posts'><b:loop values='data:post.labels' var='label'><br /> <b:if cond='data:label.isLast != "true"'><br /> </b:if><br /> <b:if cond='data:blog.pageType == "item"'><br /> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' 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="<data:post.url/>"; var maxresults=10; var relatedpoststitle=""; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script></marquee><br /> </div><div style='clear:both'/></b:if><br /> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><br /> <a href='http://serba-seru.blogspot.com/2010/02/thumbnail-related-posting-with-marquee.html' style='display:none;'>Thumbnail Related Post</a><br /> <a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a><br /> </b:if><br /> </b:if><br />

4. Simpan dan lihat hasilnya