Membuat Related Post with Thumbnail

Cara membuat related post with thumbnail
Seperti halnya posting sebelumnya yang telah dibahas yaitu cara membuat related post by categories (artikel yang berkaitan melakui kategories), posting kali ini tidak jauh beda, letak perbedaan yang signifikan pada cara membuat related post with thumbnail adalah gambar. Related post yang ini artinya di lengkapi dengan gambar sehingga akan mempercantik tampilan posting sobat. Untuk lebih jelasnya sebaiknya langsung ke TKP yuk.

Langkah-langkah pasang related post with thumbnail:
1. Login ke blogger.com, pada dashboard blogger sobat dan arahkan ke Layout > Edit HTML dan centang kotak "Expand Template Widget"

2. Cari kode </head> dan ganti dengan kode di bawah ini

<!--Related Posts with thumbnails Scripts and Styles Start-->
<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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

3. Kemudian cari kode

<div class='post-footer-linepost-footer-line-1'>

jika tidak ditemukan coba cari kode di bawah ini

<p class='post-footer-linepost-footer-line-1'>

Sekarang tinggal meletakkan kode di bawah ini sesudahnya

<!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

4. Jika sobat ingin mengganti berapa banyak related post yang akan ditampilkan maka sobat harus mengganti kode atau script di bawah ini.

var maxresults=5;

5. Jika sobat ingin mengganti title atau judul dengan yang sobat inginkan maka sobat cukup mengganti kode atau script di bawah ini

var relatedpoststitle="Related Posts";

Selesai deh membuat related post with thumbnail. Ok blog belajar seo blogspot ini akan membahas lebih banyak lagi tentang blogger tutorial untuk itu sering-seringlah mampir lagi ok. Selamat mencoba...