Cara membuat artikel terkait bergaya modern

Artikel terkait bergaya modern ini sebetulnya sama dengan versi yang lama cuman sedikit di modifikasi sehingga menjadi seperti gambar dibawah ini. Membuat artikel terkait mungkin untuk para master blog sudah tidak asing lagi tapi untuk pemula seperti saya memang agak sedikit kebingungan dan tutorial ini saya tujukan untuk para pemula yang setiap saat pasti ada terus blog pemula nggakmungkin lah nggak ada..!!!! untuk yang udah senior jangan ngetawain yah.. heheheheheh langsung saja kita mulai langkah langkahnya

Langkah 1.Login ke blogger dengan akun sobat
Langkah 2.klik klik layout-HTML
Langkah 3.Centang Expand Template Widget
Langkah 4.Silahkan sobat cari kode seperti ini </head>
Langkah 5.Masukan kode dibawah ini tepat diatas kode tadi

<!--Related Posts Scripts and Styles Start-->
<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;

}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFMwpMKHlLyUz9eFKkRgaQwUgutxaj6vDOWdFVOzdXqLpaYn4_ZN7UpPa0II5MS_nenEXrF4HZhiIH84ev28ahHcy92Ln-KUU19da87ZYS_kc3k88ZRjGCD6ZtlAJj4pR-J6pyd6hZJ9w/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>

<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-for-blogger.js' type='text/javascript'/>

<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->

Langkah 6.Coba sobat cari kode yang seperti dibawah ini
<div class='post-footer-line post-footer-line-1'>
jika tidak ketemu kode yang itu coba kode yang ini
<p class='post-footer-line post-footer-line-1'>

Langkah 7.Copy paste kode dibawah ini tepat tepat dibawah kode tadi yang tadi itu

loh yang yang langkah ke 6

<!-- Related Posts Code Start-->

<!--Remove--><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>
<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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-for-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget for Blogger" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>

<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>

<!--Remove--></b:if>
<!-- Related Posts Code End-->

Langkah ke delapan silah kan lihat hasilnya klik readmore atau klik selengkapnya maka disitu akan terpangpang artikel terkait bergaya modern seperti gambar di atas
Catatan: var maxresults=5; = angka 5 menunjukan banyaknya artikel terkait yang ingin ditampilakan dan sobat bisa merubahnya sesuai selera
Untuk blog yang menggunakan bahasa inggris silahkan rubah tulisan ini ="Artikel Terkait"; = Cukup segitu infonya ya sob semoga lebih semangat didalam menjalankan ibadah puasa sambil ngeblog wasalam.....

Posted in: Tip Blogging