Make Related Post With Thumbnail Blogger Ala Wong Pakong Blogs

Alhamdulillah bisa posting lagi, tapi tetap dengan katagory artikel tentang Tutorial dan Tips and Trick yaitu dengan judul Make Related Post With Thumbnail Blogger Ala Wong Pakong Blogs, yang di copas dari sebuah sumber yang suda lupa URLnya dimana. 

Langsung saja ke initi dari posting ini yaitu Make Related Post With Thumbnail Blogger Ala Wong Pakong Blogs dengan mengikuti sedikit langkah di bawah ini : 

1. Login Ke Blogger
2. Masuk ke Design / Rancangan
3. Edit HTML
4. Cari Kode </head> Lalu Copy Kode dibawah ini dan letakkan Diatas Kode yang anda cari tadi.

<!--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: #585858;

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

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:#444444;

}

#related-posts a:hover{

color:#000000;

}

#related-posts a:hover {

background-color:#d4eaf2;

}

</style>

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

</b:if>

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

5. Cari (ctrl + F) Kode <div class='post-footer-line post-footer-line-1'> atau  footer-line-1, Lalu copy kode dibawah ini dan letakkan di bawah kode yang anda cari tadi.

<!-- Marquee Kompiajaib 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>Baca Juga Artikel Terkait Lainnya: </b></h3>

<div style='background:#white; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;margin: 0px auto; padding: 5px;width:95%;float:left;height:100%'>

<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 style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='#' target='_blank'>widget</a></div>

</div>

</div><div style='clear:both'/>

</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

</b:if>

</b:if>

<!-- Marquee Kompiajaib Related Posts with Thumbnails Code End-->

6. Simpan Template anda.

Begitulah Make Related Post With Thumbnail Blogger Ala Wong Pakong Blogs semoga masih ada yang butuh dan ingin mecobanya. dan semoga bermanfaat.