Cara membuat related post dengan Thumbnail / gambar di blogspot

Cara membuat related post dengan thumbnail banyak dicari karena dengan related post , maka postingan kita yang terdahulu bisa muncul dan masih terkait dengan artikel baru sehingga kemungkinan posting dahulu tidak sia-sia!! Teknik ini bisa merupakan teknik SEO dan bisa mempercantik tampilan blog anda kalau blog anda bejenis kelamin wanita he.. oke sobat ngadu banteng di sini ada cara yang sangat mudah unutk membuat related post dengan thumbnail yang design elegan  dan ga katrok he..!! Kaya begini penampakanya Related postnya :

Langkah pertama sobat ngadu banteng adalah seperti biasa
1. Masuk ke blogger dulu wajib pilih Menu Design dan pilih yang Edit HTML
2. Sobat ngadu banteng kasih centang pada "Exspand Widgets Template"
3. Cari tersangka dengan kode </head> Untuk mempermudah pencarian kode ini sobat ngadu banteng tekan di key board CTRL + F trus tinggal di copas tuh code diatas tar muncul ndiri kok


Kalau sudah ketemu jangan digebukin dulu yah sobat ngadu banteng..he!! tapi letakan kode di bawah ini di atas kode </head>

<!--Related Posts with thumbnails Start-->

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

#related-posts {

float:center;

height:100%;

min-height:100%;

padding-top:10px;

padding-left:15px;

padding-right:15px;

}

#related-posts h2{

font-size: 1.3em;

color: black;

font-family: Arial;

margin-bottom: 0.75em;

}

#related-posts a{

color:black;

}

#related-posts a:hover {

background-color:#eeeeee;

}

</style>

<script type='text/javascript'>

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaA2_WUWIokd3uVRUFkFY903ImuLD7l8BcBMQgmzYVVgqoqGg7STy8P4s2G2vwyz0SdCuXng3oBgRXwNerzBMX6SOrtN69vs_HPOdbKTT7F36V9NLW7QAy5ZfHz3g-5J5E6ZQ39sUpY1EM/";

var maxresults=5;

var splittercolor="#cccccc";

var relatedpoststitle="You might also like:";

</script>

<script src='http://hbhost.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>

<!-- remove --></b:if>

<!--Related Posts with thumbnails End-->

Kerja yang bagus mas bro oke sobat ngadu banteng langkah selanjutnya kita cari lagi biang keroknya nih cari kode ini 

<p class='post-footer-line post-footer-line-1'/>   Biasanya sih nongkrong di pasar ini he lo di tempate mas bro lum ketemu bisa dicari dengan kode ini  post-footer-line

Kalau sudah ketemu mas bro sobat ngadu banteng bisa kasih kode ini di bawah kode tadi:

<!-- 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>

<!-- Related Posts with Thumbnails Code End-->

 Terus jangan lupa di SAVE yah mas bro.. dah selesai sudah dan selamat mas bro sobat ngadu banteng dah nongol tuh related postnya di template sobat ngadu banteng