Membuat Related Post dengan Image Manual tanpa plugin

Menampilkan link  posting berkaitan bersama dengan gambar dari masing-masing postingan akan sangat membantu  pengguna menemukan halaman lain yang dicari. Terkadang, meskipun postingan yang terkait bukan yang pengguna cari, namun karena dipasang Related Post Thumbnails pengguna mengunjungi halaman tersebut.  Pengguna akan merasa tertarik untuk mengunjungi  posting terkait yang disajikan secara menarik dengan gambar.

Ini sangat berguna bagi pengunjung untuk mempermudah mengunjungi halaman lain tanpa melalui proses pencarian. Disamping mempercantik tampilan pada blog, hal ini juga salah satu hal cara meningkatkan trafik pada sebuh blog dimana pengunjung dalam blog bisa lebih interaktif

Related Post dengan image ini bersifat manual, mengapa saya lebih tertarik dengan yang manual? karena ini tidak beitu membebani pada saat loding page suatu halaman terkail.

Berikut adalah cara yang umum Membuat Related Post Dengan Gambar Pada Blog Script Blogspot


1. Pertama  Pilih theme - Edit HTML - klik lanjutkan

          muncul gambar dibawah ini  klik Expan Template 

2. Cari Kode </head>

Tempatkan kode dibawah ini tepad diatasnya 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/AVvXsEh_ZBIW_VmstyuSNk0iiqDwxD6QOw9f4ZFtyvaFXFiHZTR0kSJxKwEMWueYncv7DYMCpuRBCRB95SZ4TtSxNRTkLKD09XXDSleFe2JkG5_i_X273P-DaHvOjrZ22D_3gyRhY_cyRHQ7VIg/s1600/noimage.jpg";

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

3. Cari Kode 

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

Jika tidak ketemu cari kode yang ini

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

Kemudian tepatkan kode dibawah ini persis dibawahnya


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

4. Untuk mengatur jumlah posting yang berkaitan, cukup ganti kode di bawah ini

var maxresults=5; 

5. Untuk mengganti nama Related Post yang berkaitan, cukup cari kode dibawah. dan ganti nama related post yang sesuai kamu inginkan.

var relatedpoststitle="Related Posts"; 

6. Untuk mengganti gambar default
ganti gambar  dibawah dengan gambar yang kamu inginkan

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_ZBIW_VmstyuSNk0iiqDwxD6QOw9f4ZFtyvaFXFiHZTR0kSJxKwEMWueYncv7DYMCpuRBCRB95SZ4TtSxNRTkLKD09XXDSleFe2JkG5_i_X273P-DaHvOjrZ22D_3gyRhY_cyRHQ7VIg/s1600/noimage.jpg";
 ganti kode warna merah dengan kode gambar yang kamu suka

7. Untuk mengganti Line var/ garis
var splittercolor="#d4eaf2";
ganti kode warna merah dengan kode yang kamu inginkan

Sebetulnya ada banyak skrip manual yang menyediakan secara gratis.
point penting memnggunakan Skript Related Post pada Postingan

1. Desaign 
2. Skrip yang digunakan
3. Kemampuan server dari skrip yang digunakan
4. Komunikatif

Yang terakhis selamat mencoba...