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
halaman posting seperti contoh 1 atau 2. 

Silahkan copas artikel ini asal mau menghargai tulisan dengan cara menampilkan
sumbernya.

  …Semoga Bermanfaat… !.Semoga Sukses.! .send komentar ya.




Artikel terkait:

{ 12 komentar... read them below or add one }

Kang Epul mengatakan...

Makasih sob atas tutorialnya, kebetulan di blog saya blom ada related postnya.

fajarnoverdi mengatakan...

hehe..
sm2 kang epul..
smoga bermanfaat kang..

puluthriau mengatakan...

yang marquee kok gak bisa yak???

fajarnoverdi mengatakan...

@pulut..
bs kq sobat.
ud aq tes dan brhsil..
cb d cek lgi pnya sobat..

home recording software free mengatakan...

thankz gan,,

dah d coba n 100% workendoor
:))

fajarnoverdi mengatakan...

sm2 sob..
smga bermanfaat..
thx y sob dh komentar..

Clara Lana mengatakan...

Wah saya juga belum ada related post nya nih..
makasih lagi..

fajarnoverdi mengatakan...

@clara lana :
hehe
okok sma2 yaa.
makasi jg udh berkomentar sob.
:D

kahlil gigran mengatakan...

hankz gan,,

dah d coba n 100% berhasilllll

Darmawan Saputra mengatakan...

mantap artikelnya sob..
informasi bermanfaat sekali.

thx udah sharing

topSpot | Find your top spot here mengatakan...

Bagus tutorialnya sob..kapan-kapan bakal saya coba nih di blog saya! Nice blog.. thanks :)

emonzo mengatakan...

Nice Ane tunngu artikel untuk wordpress.,.

Posting Komentar

terima kasih telah berkunjung sobat.
Silahkan komentar,kritik dan sarannya
setidaknya tegur sapa.heheh