Cara Membuat Related Post Dibawah Postingan Dengan Gambar

SiFadly - Tutorial blogger kali ini, namun saya berharap Sobat bisa mengerti. 
Membuat Related Post Dibawah Poatingan Dengan Gambar yang saya ambil karena pada realitasnya seperti itu, dimana komentar blog dan komentar facebook saling berdampingan. 
Dengan demikian pengunjung blog Sobat dapat memilih, apakah mereka ingin berkomentar melalui komentar blog atau dengan komentar facebook. demonya sendiri bisa sobat liat di kolom komentar blog ini.

Berikut trik"nya sob :

1. Login ke account blogger Anda
2. Klik rancangan lalu klik Edit HTML
3. Download template Anda dulu untuk berjaga-jaga jika nanti terjadi kesalahan
4. Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget
5. Jika sudah, cari kode </head> (gunakan ctrl + f untuk mempermudah pencarian)
6. Kalau sudah dapat maka masukkan kode berikut ini di atas 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/AVvXsEgL-Bl-D2rQcHCJItusfn9_V0cDAGIoYDsrG6wLW0MGd3xhAjN1qDCVnSLUUB2QkeVGN7Qiq2x0S7F64oUcu06XPRqIu28IW5C2BFexMpqddU2qjiS82ucPXIM6ISbtfH65TO4ev7KPAG4/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

7. Kemudian Sobat cari kode <div class='post-footer-line post-footer-line-1'>
Jika anda tidak menemukan kode diatas maka carilah kode ini <p class='post-footer-line post-footer-line-1'>
8. Jika sudah dapat, masukkan kode berikut ini tepat dibawah kode tersebut.

<!-- 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://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Anda juga mngedit kode-kode dibawah ini:

• Anda dapat menyesuaikan jumlah maksimum posting terkait yang ditampilkan dengan mengedit baris ini dalam kode.

var maxresults = 5;

• Anda juga harus mengedit posting per label (itu idealnya harus satu lagi yang maxresults)

max-results = 6

• Untuk mengedit judul widget Anda dapat mengubah baris kode ini

var relatedpoststitle = "Related Posts";

• Untuk mengubah thumbnail default, Anda dapat mengedit baris kode ini

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL-Bl-D2rQcHCJItusfn9_V0cDAGIoYDsrG6wLW0MGd3xhAjN1qDCVnSLUUB2QkeVGN7Qiq2x0S7F64oUcu06XPRqIu28IW5C2BFexMpqddU2qjiS82ucPXIM6ISbtfH65TO4ev7KPAG4/s400/noimage.png";

• Untuk Mengubah Warna Line Splitter, mengedit

var splittercolor = "# d4eaf2";



Tunggu tutorial berikutnya dari saya dan jangan bosan-bosan datang kemari yaa... :)