Membuat artikel terkait dibawah postingan berikut gambarnya

Kali ini Saya akan memberikan panduan untuk membuat artikel terkait, dimana artikel terkait tersebut diletakkan dibawah postingan berikut dengan tampilan gambar yang ada pada postingan tersebut. Dengan menempatkan artikel terkait dibawah postingan, pembaca bisa menjelajah beberapa artikel yang terkait dengan postingan yang telah dibaca oleh pembaca.

Semoga postingan ini bisa bermanfaat bagi Anda. Nah, berikut ini langkah-langkahnya:

1. Silahkan login terlebih dahulu ke akun blogger Anda
2. Pada tampilan 'home' pilih 'menu dropdown' pada blog yang akan Anda buatkan artikel terkait
3. Kemudian pilih 'Template'. Nanti Anda akan masuk ke halaman 'dashboard'
4. Pada halaman 'dashboard' silahkan Anda pilih 'Edit HTML' yang ada disebelah tombol 'Sesuaikan'

5. Setelah muncul tampilan script atau kode blog Anda. Arahkan kursor pada script atau kode tersebut.
6. Dengan menggunakan 'Ctrl + F' silahkan Anda cari kode </head>
7. Setelah Anda menemukannya. Letakkan kode dibawah ini di atas kode </head>

<!--Start Related Posts-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:90%;
min-height:90%;
padding-top:0px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.0em;
font-weight: bold;
color: #808080;
font-family: Arial,Georgia,Serif;
margin-bottom: 0.8em;
margin-top:0em;
padding-bottom:0em;
}
#related-posts a{
color:#808080;
}
#related-posts a:hover{
color:grey;
}
#related-posts a:hover {
background-color:#DCDCDC;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhexjy8vUSLP0PavwGlxVWzTLu-C7nsf8BVqqVladmVQhEgMBWNLTzDxeeHDRumeWzsvMqfwFhoOJeK4zbzsjy0bCyf2VHprFhzcYsHXwFJBEwOq1KBQTMYJqAMBIIBhj_uq9DJXQP5XrLG/s1600/No+Image.jpg";
var maxresults=7;
var splittercolor="#A9A9A9";
var relatedpoststitle="Artikel terkait:";
</script>
<script src='http://yourjavascript.com/22811210832/RelatedPoststhumb3.txt.js' type='text/javascript'/>
</b:if>
<!--End Related Post-->

8. Masih dengan menggunakan 'Ctrl + F', silahkan Anda cari kode <data:post.body/>. Kemudian letakkan kode berikut ini di bawah kode <data:post.body/>. Bila Anda menemukan ada dua kode, pilihlah kode yang kedua.

<!-- Start Related Posts-->
<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=7"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
<div style='clear:both'/>
</b:if>
<!-- End Related Posts-->

9. Setelah itu pilih tombol 'Simpan template'
10. Selesai. Silahkan Anda coba sendiri.

Sekian semoga bermanfaat. Mohon maaf bila ada kesalahan.