Memasang Related Post (Artikel Terkait) Bergambar (Thumbnail) di Blog

Menambahkan related post (artikel terkait) akan membuat pengunjung anda bereksplorasi di blog anda. Pengunjung akan lebih lama mengunjungi blog anda dan dapat melihat artikel-artikel menarik di dalam blog anda dari related post ini. Tentu saja ini akan baik bagi blog anda, karena bila pengunjung merasa blog anda adalah salah satu referensi yang bagus untuk dibaca, maka mungkin anda akan mendapatkan promosi gratis dari pengunjung.

Untuk memasangnya anda perlu melakukan beberapa langkah. Berikut adalah langkah dalam memasangnya di blog.

Memasang Related Post (Artikel Terkait) Bergambar (Thumbnail)

Sebelum melakukan perubahan pada halaman HTML Template, sebaiknya anda mem-backup template anda terlebih dahulu.

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode berikut tepat di atas kode </head>

<!--Awal Kode Related Posts Bergambar by www.thekampoengblogger.blogspot.com -->
<!-- hapus --><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: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quothttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoTuM9XxxJDcBdURcQCbLn9q5s7cDHm2ZIIxHt6VsPRb7VidhcnGi0e7OYsjuE6y5Sqcp1j5LOX_GQeK2WsDKgqUHR9zlDS9XmUZmcb6L1k6IzTvfOVqnRvf46cDSRGdTMHMwiNGtrYBE/s84/no%2520image.png&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://the-kampoeng-blogger.googlecode.com/files/relatedpostbergambar.js' type='text/javascript'/>
<!-- hapus --></b:if>
<!--Akhir Kode Related Posts Bergambar-->

Step 3

Letakkan kode berikut tepat di atas kode <div class='post-footer'>

<!-- Awal Kode Related Posts Bergambar-->
<!-- 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=5&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>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://thekampoengblogger.blogspot.com'><img alt='Tips Blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPUmf64nyIJ7mU-Ige-9g09kEJ0fRgJvvhJsvah3HT2RUTAS8RErp-v5AkQYAZNACDoSSQqbS9vYiQZ6dl6CsuNYiHadKEOEuAwDoH8VObwejt2B25LPWfLN0HRAZ9btXiVe3x_u6Xzcib/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!--Akhir Kode Related Posts Bergambar by www.thekampoengblogger.blogspot.com-->

Step 4

Klik Save Template

Semoga bermanfaat.
Wassalam.
 

Written by: Rysmah Zainal Arifin

The Kampoeng Blogger, Updated at: 9:37 PM

Posted in: Body , Related Post