Membuat Artikel Terkait dengan Thumbnail / Gambar

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>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- 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/AVvXsEgM9gcNproEqmthXOyaUqYJwMAQH3c3zm2XA6e4Ci8TBTg2Uv-hP6v0mCjfitUwBI4Wk9VeKNbNFw3ylbK-A9EF_x87dZMeZfEQbDKZ6uxjWPmy6iEApC1QPSYr_oUTmipgx4uphBiyIyc/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'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

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

<!-- 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>

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

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> dan <!-- remove --></b:if>