Cara Membuat Arikel Terkait (Related Post Thumbnail)

Cara Membuat Arikel Terkait (Related Post Thumbnail) – Artikel terkait atau Related post adalah Kumpulan link yang berkaitan dengan artikel yang sedang dibaca. Kebanyakan Artikel terkait atau Related post letaknya berada dibawah postingan, karena posisi inilah yang paling strategis. Ada 3 jenis modifikasi dari Artikel terkait atau Related post : yang pertama Artikel terkait atau Related post gambar dan judul, kedua Artikel terkait atau Related post berisikan judul saja dan yang ketiga Artikel terkait atau Related post dengan gambar saja.

Namun pada postingan kali ini yang akan dibahas adalah Modifikasi yang pertama yaitu Cara Membuat Arikel Terkait (Related Post Thumbnail).

Cara Membuat Arikel Terkait (Related Post Thumbnail) :

1.    Download Template terlebih dahulu untuk berjaga-jaga jika terjadi kesalahan

2.    Cari kode </Head> (Gunakan CTRL+F untuk mempercepat pencarian)

3.    Letakkan kode Dibawah ini tepat diatas kode </Head>

<!--Related Posts with thumbnails Scripts and Styles Start-->

<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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>

</b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

4.    Cari salah satu kode <div class='post-footer-line post-footer-line-1'> atau kode ini <p class='post-footer-line post-footer-line-1'>

5.    Jika sudah ditemukan, Copy dan Letakkan kode dibawah ini tepat diatasnya

<!-- 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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle="Related Posts";

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

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

6.    Simpan dan lihat hasilnya

Catatan :
var maxresults=5;  ganti angka 5 untuk jumlah yang akan ditampilkan
var relatedpoststitle="Related Posts";  ganti related posts untuk judul yang ingin anda tampilkan


Selamat Mencoba & Happy Blogging.

Anda sedang membaca : Cara Membuat Arikel Terkait (Related Post Thumbnail)