Related post dengan Thumbnail gambar dan berjalan

Tips blog kali ini ane mau posting tentang cara pasang related post dengan gambar
berjalan , kemaren ane udah posting tentang pasang artikel terkait+scroolbar.
sobat tau kan bentuknya gimana.
pasti tau dong.hehe
biasanya keyword yang di cari di google yaitu You might also like
seperti punya ane yang ada dibawah posting. itu
tapi jika ada yang tidak tau contohnya seperti ini :

Sudah tau kan sob.
oke deh ane gak akan lama", langsung saja kita mulai
caranya seperti dibawah ini :

1. Masuk ke Dashboard , pilih Layout , pilih Edit HTML+CTRL F

2. Sangat disarankan untuk Download Full Template sebagai backup

3.  centang Expand Widget Templates

4. Cari kode </head> lalu silahkan ganti kode </head> 

dengan kode yang dibawah ini .

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

<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'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

 

Kalau sudah cari kode dibawah ini :

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

atau

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

jika sudah ketemu silahkan copykan code dibawah ini
di bawah salah satu kode tersebut

1.Contoh Related Post dengan gambar tanpa marquee (berjalan)

 <!-- 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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<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'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

 var maxresults=5;

Untuk mengganti title, kita bisa mengedit kode ini:

var relatedpoststitle="Related Posts"; 



2. Contoh Related Post dengan gambar pakai marquee (berjalan)

kalau sobat ingin marquee yang berjalan cari lagi kode seperti
tadi contoh scriptnya di bawah ini :

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

atau

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

Kalau sudah ketemu selanjutnya copykan code dibawah ini
di bawah salah satu kode tersebut.

<!-- 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>
</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/2010/02/thumbnail-related-posting-with-marquee.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

silahkan pilih jumlah berapa gambar yang ingin sobat tampilkan di kode yang

warna mereh var maxresults=10;

Lalu pilih salah satu tips di atas contoh 1 ataupun 2.

jangan pasang ke-2 contoh tersebut ya.hehe

kalau di pasang sih tidak apa" cuma kalu ke-2nya kebanyakan dan rada berat.

Terakhir, Simpan template

NB :

Jika sobat ingin cara yang sangat gampang dengan related post yang tampil

di setiap postingan bisa dengan cara disini.

dengan memakai cara ini penempatannya sudah diatur langsung beserta

tinggal tempel.
Adapun kekurangannya yaitu dia tampil di setiap halaman postingan home
seperti gmbar ini :

ini adalah contoh template lamaku yang biasanya di cari you might also like
dengan cara memakai linkwithin.

Tapi kalau saya sih pilih cara manual yang tampil hanya dibawah posting saja bukan di setiap tab

Posted in: TUTORIAL BLOG