Membuat Artikel Terkait di bawah posting blogspot yang keren

Bagi anda yang kesulitan membuat artikel terkait yang super keren layaknya artikel terkait blog ini, dan enak dilihat baca, tutorial singkat ini akan membahas Cara Membuat Artikel Terkait di bawah posting blogspot yang keren

Bagi yang menggunakan draft.blogger.com,
Klik template> Edit Template HTML > Ceklis Expand Widget Template
Langsung aja copy script ini
dibawah kode <div class='post-body entry-content'><data:post.body/>  (cari dengan ctrl +F)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Artikel Terkait : </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=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

lalu copy ini
diatas ]]></b:skin>

#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/AVvXsEjohdrE_WDr3S8IhxBzbdTvfbjP1UYfM-t_pJ7FvJNzKtBrPe7Gq7nv0_4UP7LD5sD2FcN_uHh1Pu3_52d-_fyr8WI0GuUwTrUdxjSxo2MPMkhRJGZX0ZFABb67X3LRcP0q_T0WAbGwwEk/&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;
}

kode yang berupa angka dan kode hexadecimal warna diatas bisa dubah-ubah sesuai keinginan

dan terakhir copy script ini dibawah ]]></b:skin>

<script src='http://oemar.googlecode.com/files/Related_post_hack.js' type='text/javascript'/>

semoga tampilannya seperti dibawah ini atau makin keren lagi