Related Post Image (Thumbnail)

Blog, Cara memasang artikel terkait, cara membuat artikel terkait, cara membuat related post bergambar thumbnail), Related Positng, Related Positng Image (Thumbnail)
Salam hangat tertuju sesalu buat sobat Pujangga Blog..kali ini saya akan posting tentang Related Post Image (Thumbnail) dimana tampilang Related Post Image (Thumbnail) tampilannya lebih menarik dari Related Post sebelumnya yang hanya menampilka judul postingan saja...
Jangan sobat baca aja praktekkan langsung dunk....oke....
Berikut ini langkah-langkahnya.....

• Login dahulu ke Blogger
• Masuk pada Tata Letak/Layout
• Lalu pilih Edit HTML
• Centang tulisan Expand Widget Template
• Kemudian cari code ini </head>
• Letakkan code dibawah ini sebelum code </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type="text/css">

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:black;

}

#related-posts a:hover{

color:black;

}

#related-posts a:hover {

background-color:#d4eaf2;

}

</style>

<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>

<!-- remove --></b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

• Langkah selanjutnya, cari code ini
<div class='post-footer-line post-footer-line-1'>
• Jika tidak menemukannya coba cari yang ini

<p class='post-footer-line post-footer-line-1'>
• Jika sudah ketemu, letakkan code dibawah ini Setelah code diatas

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

• Untuk code jumlah related post yang berwarna merah bisa anda sesuaikan dengan blog anda
• Untuk tulisan Related Post bisa anda ganti sesuai selera anda, seperti Posting terkait, Artikel terkait, dll.
• Simpan coba lihat hasilnya. 

nb. tidak puas dengan warnaya sobat bisa merubah dibagian CSS.

Jika blog anda  tidak menggunakan sistem Read More, dan anda ingin menampilkan Related Posting ini di seluruh halaman, tidak hanya di postingan pertama saja, silakan hapus code yang diberi tanda keterangan <!-- remove --> pada code di dalam kotak yang pertama dan kedua.

Somoga posting Pujangga Blog tentang Related Post Image (Thumbnail) bermanfaat....