Membuat Related Post dengan Thumbnail Secara Manual

Kali ini saya akan memberi tahu bagaimana cara membuat sebuah related post beserta thumbnail yang manual, biasanya letaknya dibawah postingan blog kita. Namun jika kamu ingin yang lebih mudah silahkan ke linkwithin.com karena situs itu juga memberi fasilitas pembuat related post yang sama seperti ini tetapi caranya sangat mudah :D hehe jadi ini khusus untuk yang advanced saja biar ga ngebul :p hehe berikut tutornya :

1. Login ke Blogger.com

2. Buka Rancangan --> Edit HTML --> Centang Expand Template Widget dan Jangan lupa di back up templatenya !

3. Cari kode </head> hapus kode tersebut dan ganti dengan kode dibawah ini.

<!--Related Posts dengan thumbnails Dimulai dari sini-->
<!-- 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/AVvXsEhyvUyMGFynStbwG2OkGgtrMATWuP8W4Iq-hJ4WTGM7UuajxTtUwXaZCSHutl5SSMnjhXLSWIIn_OtCYNbOWuyanKJUTtQMj3jhfQ9aI0_GhJDVkTBnMLhiidEo-Kn_F4kKRBjr8kD1pHU/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://hzndi.googlecode.com/files/related-posts-with-thumbnails-hzndi.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts dengan thumbnails akhiran disini-->
</head>

4. Sekarang cari kode ini <div class='post-footer-line post-footer-line-1'> dan jika kamu tidak bisa menemukan kode diatas cari kode ini <p class='post-footer-line post-footer-line-1'>. Setelah itu, Copas kode di bawah ini dan letakan DI BAWAH salah satu kode yang kamu temukan. 

<!-- 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://hzndi.blogspot.com/2012/03/membuat-related-post-dengan-thumbnail.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-->

Jika kamu menemukan kode <div class='post-footer-line post-footer-line-1'> maka letakan kode diatas yang sudah kamu copas dibawah/setelah kode <div class='post-footer-line post-footer-line-1'> atau jika kamu menemukan kode <p class='post-footer-line post-footer-line-1'> maka letakan kode diatas, dibawah/setelah kode <p class='post-footer-line post-footer-line-1'>. Mengerti ?

NOTE : Ubah kode2 dibawah ini sesuai keinginan kamu 

var maxresults=5; --> jumlah postingan 

var splittercolor="#d4eaf2";--> warna pembagi 

5. Simpan Template :)

Postingan Terkait:

Posted in: Blogger