CARA MEMBUAT "ARTIKEL TERKAIT"

 

 

Pertama membuat Related Posts  tanpa gambar.

Langkah-langkahnya sebagai berikut:
1. Login/masuk blogger.com -> klik blog yang akan diedit
2. Klik Layout / Tata Letak
3. Klik Tambahkan Gadget -> klik gadget "HTML/JavaScript Tambahkan"
4. Letakkan kode berikut:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
'containerSelector':'div.post-body'
,'loadingText':'loading...'
});</script>

5. Klik Simpan.
6. Klik Simpan Setelan.
Selesai. Coba lihat salah satu halaman artikel Anda. Akan muncul Related Post di bagian paling bawah.

Cara ke dua yaitu membuat Related Post dengan Gambar  Contohnya, lihat gambar berikut:

Ikuti panduan singkat berikut:
1. Login/masuk blogger.com -> klik blog yang akan diedit
2. Klik Template -> Edit HTML
3. Cari kode ]]></b:skin>
4. Letakkan kode berikut di atasnya kode nomor 3:

<!--Related Posts with thumbnails Scripts and Styles Start-->
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Cari kode </head>
5. Letakkan kode berikut tepat di atasnya kode nomor 4:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9C1y87ZKoreKwiwlaIQTi9ufcm6NW13mRJ45mKsXmDMiTmgfzj-eVJ15xit8yawrR9rxVKmnKBJPzci9wOv5WUFzuRuqcXWfxFnJAcwjPH9Let1648MrcbTXC2uCf_wOvIot0Qdp1Hrqz/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type="text/javascript" src="http://yourjavascript.com/233021883/www.mybloggerblog.com.js"></script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

6. Cari kode berikut <p class='post-footer-line post-footer-line-1'>
7. Taruh kode berikut di bawahnya atau setelah kode nomor 6:

<!--Related Posts with thumbnails Scripts and Styles 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>
<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>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='www.mybloggerblog.com'></a>
</b:if></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

8. Klik Simpan Template. Selesai.