Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Membuat Related Posts dengan Thumbnails

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 Blogger
2. Simpan kode ini di atas </head>

<!--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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPHli8iC8cWO1NvJrPeZQBymtWuPFHDk05wq-PiYL_SfMW0eqWjN_MOrF4zb1N-hByynQiG5COyr7SczJ7L9CinIVJqlUxPPqQWolUdZz3oEEOmzxcdTqHeS7kCy36IXPUVpGBYxNFFXo/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-->

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.

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.