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:

Blogger

• Cara Menghapus Komentar Spam Secara Otomatis
• Cara Membuat Blog Terindeks Google dengan Cepat
• 5 Kesalahan yang Dilakukan Oleh Blogger Pemula
• Mengembalikan Blog yang Sudah Dihapus, Bisakah ?
• Apa Itu Niche Blogging ?
• Daftar 60+ Forum Do-Follow Ber-PageRank Tinggi 2014
• Cara Menghindari Blog Dihapus Oleh Google
• Cara Memilih Nama Blog & Situs yang Ramah SEO
• Cara Mengembalikan Mood Blogging
• Mengapa Subscriber Feedburner Menjadi 0 ?
• 7 Tips SEO untuk Blogger
• 10 Tips Mantap Untuk Meningkatkan Trafik Organik
• 7 Trik Membuat Artikel Lama Menjadi Populer
• 7 Cara Mendapat Pengunjung Dengan Mudah
• Tutorial Blog dan SEO Terkena Malware ?
• Bagaimana Mengefektifkan Backlink Dalam SEO
• 8 Tips Membuat Loading Blog Lebih Cepat
• Cara Membuat Kotak Fanpage Facebook Hitam Putih
• Optimasi Gambar Untuk Dapatkan Pengunjung
• Cara Menghindari SEO yang Berlebihan
• 8 Tips Untuk Seorang Blogger Pemula
• Cara Mendapatkan Google Sitelink Dengan Cepat
• Cara Membuat dan Tips Pengaturan Meta Tag
• Cara Meningkatkan Ranking Alexa Dengan Cepat
• Cara Mengklaim Situs di Alexa

Posted in: Blogger