Tutorial membuat related post / post yg berkaitan / related artikel / artikel terkait

Pada tutorial kali ini saya akan membuat tutorial tentang cara membuat related post. Membuat related post bukan hanya monopoli pengguna blog berplatform wordpress saja. Sekarang ini, pengguna blog berplatform Blogspot pun bisa membuat related post tampil di sidebar blog mereka.  Tidak Seperti Wordpress yang mempunyai Tag dan Category yang bisa digunakan sebagai acuan untuk related post, pada blogspot prinsip ini menggunakan pemanfaatan dari Label saat kita posting. Related Post akan menunjukkan posting mana saja yang mempunyai label sama.

Mari kita langsung aja bahas Cara Membuat Related Post di Blogspot

 

• Login ke akun blogger anda, pilih blog yang ingin anda edit, klik link Layout kemudian masuk ke Edit HTML
• Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.
Download template anda untuk membackup jika terjadi error.
Masukkan kode script berikut sebelum tag </head> :

 <style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmBPB7qp_NQPHgfzm_C39l2gHCISQ7-WKxH40wyHPgNBqcYCCKQR_ctCb4BxR8pBY_gJ_mFdepR_60O84J5lYBUP6UbwRDZWFGcdt90JUhFj_2_dK7nRzmr6e2Huv0IhJaSxhnzK2e2h8/&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}
</style>
<script src='http://oemar.googlecode.com/files/Related_post_hack.js' type='text/javascript'/>

•  Kemudian cari kode berikut : 

<data:post.body/>

• Lalu letakan kode berikut sesudah  <data:post.body/> :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
Widget by <a href='http://anthneic.blogspot.com/' title='aNtH Blog'> aNtH Blog</a>
</div></b:if>

• Save template anda. 
• Anda bisa mengganti tulisan yang warna merah dengan tulisan yang anda inginkan. misal "Arikel terkait"

Selamat mencoba, semoga bermanfaat.