Cara Membuat Related Post dengan Foto untuk Blogger biar kelihatan Cantik

Contoh Related Post / Artikel Terkait dengan Gambar

Menampilkan link ke posting terkait / Related Post bersama dengan Foto atau Gambar yang sesuai akan mempercantik tampilan halaman Web atau Blog kamu. Pembaca akan tergoda untuk pergi untuk posting yang bersangkutan pada saat mereka melihat Gambar yang menarik dan Artikel yang berkaitan dengan yang di baca pada saat itu.

Ceritanya begini :  

Waktu itu aku penasaran Banget, pengen Buat "Related Post" untuk Blog aku, maklum aku adalah Blogger Pemula (Newbie) yang memang selalu pengen tau dan pengen banget punya Blog yang cantik dan menarik. karena ke inginanku yang begitu tinggi sampai sampai dua hari  berturut turut mencari cari artikel di Blog milik  Blogger senior, Browsing di Mbah Google juga udah berkali kali, tapi nggak nemuin juga cara yang paling simpel dan Mudah untuk bisa membuat Related Post / Artikel terkait, aku sempat Putus asa juga, namun di antara keputus asaan itu akhirnya aku nemuin sebuah artikel yang sangat simpel dan benar benar mudah banget di terapkan, tinggal Copy Code HTML nya lalu di Tempel di menu "Edit Template" Jadi Deeehhh...!!!

Ini adalah tulisan Pertama mengenai Related Post  yang di sertai Foto / Gambar yang sudah aku Praktekkan di salah satu Blog aku "Seputar Gresik"  Posting terkait kali ini di sertai gambar  mini  dan Cantik yang dihasilkan oleh blogger untuk setiap posting.

Berikut adalah langkah-langkah rinci untuk menginstal widget posting terkait untuk blogger dengan Gambar :

1. Yang Pasti, Kamu harus Login dulu ke Blogger, masuk ke Dashboard Blogger kamu dan arahkan ke menu Rancangan & Edit HTML lalu Pastikan Centang "Expand Template Widged" pada kotak kecil di sebelah tulisan.

2. Setelah itu Kamu Cari Kode :

</head>
 

Lalu Ganti Kode itu dengan Kode HTML dalam Kotak di Bawah ini :  

 

<!--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/AVvXsEjb7gyn_1Si62RwyEfZp_TW4CzuLBfUrBXFGPvWyiOhhyFb2YtMmeiP2zEUqapbgSldibYqzwpkqDvcx__LYnCDgWrcjW5RQXf9MZmF4paG2vb60jPZwLikI7ktL9rlGCime-Y6nVHj5xU/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

3. Sekarang Cari Kode Ini :

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

Keterangan : Jika tidak menemukan kode itu Coba yang ini :         

<p class='post-footer-line post-footer-line-1'>
 
Sekarang segera setelah adanya garis-garis ini  
( jika kamu udah nemuin kode yang di maksud )  
tempatkan kode ini :

<!-- 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://www.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Widgets" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Ya Udah ... Cuma Gitu ajja koq Caranya..., Mudah khan...??!!! 

Selamat Mencoba dan Semoga Berhasil,  Jangan Lupa Tinggalkan Komentar... Okey...??!!