Membuat Artikel Terkait dengan Thumbnail / Gambar

Kali ini tutorial yang satulis adalah cara membuat Artikel Terkait dengan Thumbnail atau Gambar. Pembuatan Related Post / Artikel Terkait dengan gambar secara manual. adapun cara membuat artikel terkait dengan gambar tidaklah sulit cukup liat, baca, pahami dan lakukan pasti bisa tinggal kopy paste aja scripnya

untuk pembuatan Artikel terkait dengan gambar langkah-langkahnya sebagai berikut :

Langkah pertama yang harus dilakukan yaitu login ke blog anda > Design > Edit HTML > Centang expand widget templates.

Selanjutnya cari kode </head> dan kalau sudah ketemu silahkan paste kode di bawah ini tepat di atas kode </head>

<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/AVvXsEijiF0oEdk859uzoxkPhyphenhyphenoACNO5TDm7YgC4r_uYbKd64IRrYUE-qTjCySQf7Pwi5zkohKxC-l6itRjWcL_OVdltRtsKEfWQJmpwm9R_lN33-FScxbb0l-KwQ1EpTAm8X7RFKnTTLWHvyVo/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Terkait Yang Mungkin Anda Cari";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>

Sekarang anda cari kode ini

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

Nah kalau sudah ketemu, sekarang paste kode berikut di di bawah kode tadi

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>

Berikut ini adalah kode yang bisa anda ganti sebelum menyimpan template (ganti tulisan yang berwarna merah)

jumlah artikel terkait muncul

var maxresults=5;

Jumlah artikel terkait / label

max-results=6

Judul artikel terkait

var relatedpoststitle="Artikel Terkait Yang Mungkin Anda Cari";

Warna tulisan pada artikel yang terkait, silahkan anda ganti sesuai keinginan anda. Cari kode warna

var splittercolor="#d4eaf2";

Nah kalau sudah selesai anda bisa klik save template dan selesai dah pembuatan Artikel Terkait dengan Tumbnail atau gambar.

Pembuatan Artikel Terkait dengan Tumbnail atau Gambar ini hanya muncul pada halaman posting, jika anda ingin Artikel Terkait dengan Gambar / Thumbnail ini muncul di semua halaman blog, anda bisa menghapus kode

<b:if cond='data:blog.pageType == "item"'> dan </b:if>

Terima Kasih Atas Kunjungan Anda
Judul: Membuat Artikel Terkait dengan Thumbnail / Gambar
Ditulis Oleh Unknown email di ovianyindriasari@gmail.com
Jika mengutip harap berikan link yang menuju ke artikel Membuat Artikel Terkait dengan Thumbnail / Gambar ini. Sesama blogger mari saling menghargai. Terima kasih atas perhatiannya