0 Cara membuat Related Post with Thumbnail di bawah Setiap postingan Blog

1. Silahkan Masuk >>Login ke akun blog sobat
2. Lalu Klik >> design >> kemudian >> edit HTML
3. Centang >> Expand Template Widget
4. Lalu sobat >> download template lengkap >> Demi untuk menghindari kesalahan saat pengeditan Template.
5. Silahkan sobat Cari kode </head> gunakan CTRL+F untuk mempercepat pencarian.
6. Setelah ketemu, kemudian sobat letakkan semua kode berikut tepat di atas atau sebelum kode </head>

<!--Related Posts with thumbnails Scripts  -->

<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:#00FF00;

}

</style>

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

</b:if>

<!--Related Posts with thumbnails Scripts  -->

7. Kalau sudah, silahkan sobat cari kode berikut:

<div class='post-footer-line post-footer-line-1'> gunakan CTRL+F untukmempermudah pencarian.

8. kemudian sobat letakkan kode di bawah ini tepat di bawah atau sesudah kode <div class='post-footer-line post-footer-line-1'>

<!-- Related Posts with Thumbnails Code Start By KUCOPAS -->

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

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=7;

var relatedpoststitle="Related Post";

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

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

</b:if>

<!-- Related Posts with Thumbnails Code End By KUCOPAS -->

9. Sebelum di simpan, silahkan sobat preview atau pratinjau terlebih dahulu.
10. Silahkan di SIMPAN atau Save, jika hasilnya sudah oke.
11. Simpan dan lihat hasilnya.

Keterangan:

- var maxresults=7; = angka 7 adalah related post yang akan di tampilkan, silahkan sobat ganti angkanya.

- background-color:#00FF00; = adalah warna Background bila tersentuh Mouse, silahkan sobat ganti kode warnanya seperti yang sobat iginkan. 

Tweet

Komentar →