Membuat Related Post Dengan Thumbnail di Blog

Hai semuannya saya akan berbagi tutorial nih, artikelnnya sih sudah sangat umum tetapi bagi blogger pemula pasti belum tau nih tentang artikel yang satu ini. Oke saya jelaskan sedikit saja, Related Post adalah artikel terkait yang terdapat pada blog kamu dan letak artikel terkait adalah pada akhir artikel blog anda. Tapi kali ini saya akan menyajikan perbedaan antara related post pada umumnya dengan related post dengan thumbnails, related post dengan thumbnails boleh di bilang sangat menarik dan sangat berguna jika di pasang di blog kamu.

• Login ke akun blogger kamu.
• Pilih Rancangan > EDIT HTML.
• Jangan Lupa Centang Expand Widget Template.
• Cari kode </head> setelah ketemu copy kode di bawah ini tepat di atas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<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, Times New Roman , 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/AVvXsEhQEjGzFUoay15Gnb_uMTemRlRFJSoksTIStHbCYYGbzdAvjpQvVHoIRE8wI_FnMxvpcaABJv8LsF7Yk9_-djVO1CHQG-y_k4Amuz93MB0USQVi9QhN3AIt-SnZeuQP9is9HaTtNmRu7i8/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://infonetmu.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-->

Cara Membuat Related Post Thumbnail Marquee

Cara Membuat Related Post Thumbnail Marquee, cara ini sangat cocok bagi yang berjiwa dinamis. Karena gambar Related post ini bergerak atau marque yang pastinya sangat terasa hidup blognya. Sebenarnya kode javascriptnya tidak terlalu jauh berbeda dengan kode Cara Membuat Related Post Dengan Thumbnail, hanya sedikit tambahan kode marquee dan ada letak kode yang dipindah agar judul related postnya tidak ikut bergoyang ( ter marquee ). 

Postingan ini sekaligus pelengkap  tentang Widget Relates Post yang lainnya, Cara Membuat Related Post Dengan Marquee, Cara Membuat Related Post Dengan Scroll, Cara membuat Related Post Dengan Icon, Cara Membuat Related Post Dengan Thumbnail, Cara Membuat Related Post LinkWithin, Cara Membuat Related Post Di Sidebar.

  

Yuk langsung kita ikuti caranya membuat related post thumbnail marquee :

• Klik Desain
• Pilih Template 
• Klik EDIT HTML Jangan Lupa " Centang Expand Widget Template".
• Cari kode </head> . setelah ketemu copy kode di bawah ini tepat di atas kode </head>

<!-- Marquee Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<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, Times New Roman , 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/AVvXsEiDAaAVOYy3hSWze9jmTvWhdoi7dDmhpskw43ZoSwCX8TB9FdkcKUPXKb5GHux-p-Xog0_qoMHW42GwWbjf615scewdviSr6z_bsFYAMeDR4AeWzDOzF5IqaTSpH38uvU8BuV1tnkN_9AI/s1600/Serpihan+waktu+Related+Post+Dengan+Thumbnail.png";
var splittercolor="#d4eaf2";
</script>
<script src='http://djangkarubumi.googlecode.com/files/SerpihanWaktuRelatedPostThumnail.js' type='text/javascript'/>
<!-- remove --></b:if>
<!-- Marquee Related Posts with thumbnails Scripts and Styles End-->

• Selanjutnya Cari kode <data:post.body/> . Setelah ketemu copy kode di bawah ini tepat di bawah kode <data:post.body/> . ( jika lebih dari satu silahkan mencoba satu-persatu ).

<!-- Marquee Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://djangkarubumi.blogspot.com/' style='display:none;'>Serpihan Waktu</a>
</b:if>
</b:if>
<!-- Marquee Related Posts with Thumbnails Code End-->

• Klik Simpan dan lihat hasilnya.

Tambahan :

• Warna merah bisa dirumbah sesuai yang dikehendaki.
• Selain dibawah Kode <data:post.body/> kode tersebut juga bisa diletakan dibawah <div class='post-footer-line post-footer-line-1'> atau yang semirip dengan kode tersebut , jika terdapat lebih dari satu silahkan coba satu-persatu, umumnya di kode pertama .

Sekian penjelasan dari saya semoga bisa memahami dan selamat mencoba.Dan semoga behasil.