Pada postingan sebelumnya, saya pernah menjelaskan bagaimana membuat artikel terkait (related post), dengan point berjejer ke bawah sesuai kategori (contoh di blog ini). Sekarang saya akan menjelaskan langkah-langkah membuat Artikel Terkait, dengan thumbnails, contoh seperti gambar ini :

1. Masuk ke Dasbor > Tata Letak > Edit HTML, beri centang pada "Expand Template Widget"
2. Cari kode
</head>
Ganti dengan kode ini :
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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 type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>
4. Setelah itu cari kode ini :
<div class='post-footer-line post-footer-line-1'>
kalau tidak ketemu, coba cari ini :
<p class='post-footer-line post-footer-line-1'> 
5. Masukan kode di bawah ini, tepat setelah kode yang kamu temukan.
<!-- 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--> 
6. Save, dan lihat hasilnya.

Catatan:

1. Untuk menampilkan berapa jumlah related post cari kode ini, ganti angka sesuai yang diinginkan.
var maxresults=5; 
2. Untuk mengganti judul cari kode ini, dan rubah yang berwarna merah :
var relatedpoststitle="Related Posts"; 
3. Tampilan thumbnail postingan, yang tidak mempunyai gambar (image) seperti ini:


Untuk merubahnya, cari kode dibawah ini, dan ganti dengan url gambar rekan.
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
4. untuk merubah warna splitter (garis pembatas) ganti kode ini :
var splittercolor="#d4eaf2";
5. Untuk merubah warna background, temukan kode ini :
background-color:#d4eaf2;
Selamat mencoba.......
Enjoy blogging!

6 komentar

thanks for your share....

Balas

gan di blogku kok tdk bisa yah, kira2 dmana letak masalh na
pleace

Balas

kang
berarti kalo related postnya yang bersangkutan ada gambarnya udah pasti otomatis keluar kan ?

Balas

kang is, koq di tempatku gak bisa ya? mohon saran plzzzz... tq

Balas

Kang ngagaduhan artikel terkait tapi dileubeut postingan?Nu siga di situs-situs newspaper gitu kang :D

Balas

Kang blog saya kok tidak valid ya untuk halaman postingnya, masalahnya pada json-in-script&callback=related_results_labels_thumbs&max-results padahal sudah benar

Balas

Poskan Komentar


×
Chat