Membuat Related Posts Dengan Thumbnail

Sangat menarik bila kita dapat membuat artikel kita yang banyak dapat dibaca oleh orang lain dengan menyematkan Thumbnail di bawah setiap postingan yang kita buat.

1. Buka menu Design -> Edit HTML

2. Beri centang pada "Expand Widgets Templates"

3. Letakkan kode berikut diatas </head>

<!--Related Posts with thumbnails Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}

#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}

#related-posts a{
color:black;
}

#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRcPZ0KhDPziQkIWrL3498ipxySaUZt7xQaJoAxqm7U_kNmUofKKtT6mTedObhBDVgqpbo9XRRsISC_5gP0QBfmIPcKh2qRzZ_Fsr2TXcoomPT9_esrKO2jmYdGkZkBxnfdoOhL4itlTjY/";
var maxresults=5;
var splittercolor="#cccccc";
var relatedpoststitle="You might also like:";
</script>
<script src='http://hbhost.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails End-->

4. Lalu cari <p class='post-footer-line post-footer-line-1'/>
5. Kalau tidak ketemu coba cari post-footer-line

6. Letakkan kode berikut dibawahnya.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->

7. Kalau sudah Save template anda.

Keterangan

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRcPZ0KhDPziQkIWrL3498ipxySaUZt7xQaJoAxqm7U_kNmUofKKtT6mTedObhBDVgqpbo9XRRsISC_5gP0QBfmIPcKh2qRzZ_Fsr2TXcoomPT9_esrKO2jmYdGkZkBxnfdoOhL4itlTjY/" menunjukkan gambar yang muncul pada postingan yang tidak memiliki gambar. Anda bisa mengganti gambar tersebut dengan gambar lain.

var maxresults=5 menunjukkan jumlah postingan yang muncul pada related post. Silahkan atur jumlah postingan yang mau ditampilkan dengan mengganti angkanya.

var splittercolor="#cccccc" menunjukkan warna garis pemisah. Ganti cccccc dengan kode warna yang anda inginkan.

var relatedpoststitle="You might also like:" menunjukkan judul related post. Ganti teks yang berwarna merah dengan judul yang anda inginkan.


Bagi Kamu yang tidak mau sulit" mencarinya ada cara cepatnya juga loch!

1. Buka situs >> http://www.linkwithin.com/learn
2. Isi alamat e-mail anda
3. Link web anda
4. Isikan jenis web apa yang anda punya
5. Pilih mau ditampilkan berapa postingan kita

Read more »