Membuat Artikel Terkait di Bawah Posting dengan Gambar

558 views

Cara Membuat Related Post dengan GambarMembuat Artikel Terkait Bergambar di Bawah Posting Blog. Artikel terkait memang sangat penting dalam suatu blog, dimana menampilkan artikel lain yang berhubungan dengan post yang sedang dibaca pengunjung blog. Dan tentu saja mampu menambah jumlah tampilan halaman atau pageview. Bagi anda yang ingin membuat artikel terkait dibawah posting dengan gambar tumbnail atau cuplikan gambar berikut tutorialnya.

membuat artikel terkait dibawah posting

Membuat Raleted Post With Image Thumbnails 2013

1. Login ke akun blogger
2. Masuk ke menu template > edit HTML
3. Pastekan kode berikut tepat diatas </head>

<!–Related Posts with thumbnails Scripts and Styles Start–>
<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=&quot;http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png&quot;;
var maxresults=8;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src=’https://bloggergubug.googlecode.com/files/grelposttumb.js’ type=’text/javascript’/>
<!–Related Posts with thumbnails Scripts and Styles End–>

4. Cari kode <data:post.body/> silahkan pastekan kode berikut tepat 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=7&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–>

5. Simpan

Untuk peletakannya juga bisa dibawah post footer <div class=’post-footer’> silahkan sesuaikan dengan template anda. Ok selamat mencoba membuat artikel terkait dengan gambar tumbnail, semoga sukses 😉

Hosting Unlimited Indonesia