Tutorial Memasang Related post bergambar pada Blogspot

Oke dalam pertemuan kali ini, kita akan membahas tentang Tutorial Memasang Related post bergambar pada Blogspot , sebagai contohnya tuh kayak gini lo..

langkah-langkah yang harus anda lakukan adalah sebagai berikut :

1. Buka Blogger - dashbor - edit HTML

2. Centang Expand widget

3. Cari kode ini (tekan Ctrl + F agar lebih mudah)

</head>

4. Copy dan pastekan kode di bawah ini diatas kode "</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/AVvXsEgb6BWbyri_JveGiQXPr9PO_dI0_wZ0gaMCQRSIr4bRPWdvT9joywrXU9Sg3TtGksrlJh6HsY-_tBxFqTjBKRKHaLAgg-o_2QG6x13n6EOmalC91FO7fjmLvUUVLIxH1BCRXGje6VrAN4CM/s1600/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

 Catatan :

• Untuk membuat gambar default pada posting yang tidak bergambar, gantikan url yang berwarna merah dengan url gambar anda sendiri. tapi klo anda pengen standart dari sononya ya gak usah ga papa
• Untuk menampilkan lebih dari lima posting terkait, tinggal ganti aja angka 5 pada var maxresults=5; dengan angka selera anda max 24.
• Hilangkan kode b:if cond='data:blog.pageType == &quot;item&quot;' jika anda ingin menampilkan related post di Homepage anda

5. Setelah itu, temukan kode ini

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

kalo tidak ada, coba kode yang ini

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

masih ga ada? coba yang ini

<data:post.body/>

6. setelah itu, kopi paste kan kode dibawah ini kode diatas (yang anda 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><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://helplogger.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEe5_9IzNQpkiP1NNSg-MKc8QUZ7XdQ0pclHICSNk8pALNjN5DHrqHRcmSi-3-1_K3FAwmhIECDr0ffTdQZg1wb1txle4RIyHrA3hzEaJzuXCrMvaFW6wVFxlVtu79XLqXYlEBkgs3LdLM/s1600/best+blogger+tips.png'/></a></b:if></b:if><!-- Related Posts with Thumbnails Code End-->

catatan :

• Hilangkan kode b:if cond='data:blog.pageType == &quot;item&quot;' jika anda ingin menampilkan related post di Homepage anda

Jika anda lebih suka memasang related pos yang simpel tanpa gambar, anda bisa membaca Tutorial memasang related pos tanpa gambar. Sekian posting tentang Tutorial Memasang Related post bergambar pada Blogspot  Semoga Bermanfaat...!!

(sumber : helplogger.blogspot.com )