Membuat Artikel Terkait/Related Post dengan Gambar/Thumbnail - Sobat farhan sebagai blogger pastinya sudah mengenal-kan apa yang dimaksud dengan artikel terkait, atau yang sering disebut related post di dalam dunia blogging? Ya, Widget artikel terkait adalah widget yang menampilkan tautan artikel lain di blog tersebut yang masih satu category dengan artikel yang sedang di baca pengunjung. Ternyata sobat farhan, widget ini juga mempunyai berbagai macam kauntungan dan keunggulan lho bagi blog kita, selain memperindah dan mempercantik tampilan blog, widget ini juga berfungsi membantu pengunjung dalam mencari artikel yang sedang mereka cari. Baik, sobat farhan di bawah ini saya sudah persiapkan script dan langkah-langkah membuat artikel terkait dengan gambar, di simak baik-baik ya.
1. Login Ke Blogger.
2. Masuk ke Dashboard.
3. Pilih Template.
4. Pilih Edit HTML.
5. Centang box "Expand Template Widget".
6. Sobat cari kode </head> menggunakan CTRL+F, lalu letakkan kode di bawah ini tepat di atasnya.
<!--Related Posts with thumbnails by farhanshare.blogspot.com start-->
<!-- remove --><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/AVvXsEhsgtVKAh-TRS9qOCAI2FXmnPHONhSTkOY3xkdGLccxDn2OO3B5YHjk3RJVJa4uQUPA5KHiC-XkmBEQefb7UPs_O832IbNGi1JQ9mzb4tRr0NOH6Oo_OhAzW9nIb8fHMNOK98DJYbxqdzE/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="";
</script>
<script src='http://farhanshare-blogspot-com.googlecode.com/files/artikel_terkait_dengan_gambar.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails by farhanshare.blogspot.com End-->
<!-- remove --><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/AVvXsEhsgtVKAh-TRS9qOCAI2FXmnPHONhSTkOY3xkdGLccxDn2OO3B5YHjk3RJVJa4uQUPA5KHiC-XkmBEQefb7UPs_O832IbNGi1JQ9mzb4tRr0NOH6Oo_OhAzW9nIb8fHMNOK98DJYbxqdzE/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="";
</script>
<script src='http://farhanshare-blogspot-com.googlecode.com/files/artikel_terkait_dengan_gambar.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails by farhanshare.blogspot.com End-->
7. Selanjutnya sobat cari kode <data:post.body/>, biasanya kalau sobat sudah memasang read more otomatis akan terdapat beberapa kode seperti itu, carilah kode yang ke-2, setelah itu letakan kode di bawah ini tepat di bawah kode <data:post.body/> yang ke-2.
<!-- Related Posts with Thumbnails by farhanshare.blogspot.com Start-->
<!-- remove --><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'/>
<!-- remove --></b:if>
<div class='credit-link' style='margin-left:0px;float:right;'>
<a href="http://farhanshare.blogspot.com" target="blank"> Get This Widget</a>
</div>
<!-- Related Posts with Thumbnails by farhanshare.blogspot.com End-->
<!-- remove --><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'/>
<!-- remove --></b:if>
<div class='credit-link' style='margin-left:0px;float:right;'>
<a href="http://farhanshare.blogspot.com" target="blank"> Get This Widget</a>
</div>
<!-- Related Posts with Thumbnails by farhanshare.blogspot.com End-->
8. Klik "Save" dan Selesai.
Demikian sobat farhan tutorial blog tentang Membuat Artikel Terkait Dengan Gambar, semoga bermanfaat, dan selamat mencoba, bila sobat mempunyai pertanyaan seputar tutorial ini, sobat bisa tinggalkan komentar di bawah.
