Membuat Related Post Valid HTML5

Membuat Related Post Valid HTML5 - Related Post atau yang biasa dikenal sebagai Arikel Terkait adalah salah satu widget yang digunakan dalam suatu blog atau website yang berguna untuk memudahkan pembaca blog menemukan artikel pada "Label" yang sama. Selain pada Label yang sama Artikel Terkait kali ini juga membuat Random Artikel, Sehingga bukan hanya artikel terkait saja yang akan muncul.

Dengan hal tersebut Pembaca akan langsung bisa menemukan judul postingan kita yang berkaitan dengan judul posting. Hal ini dilakukan supaya mereka tidak pergi dari blog kita. :)

Untuk anda yang udah penasaran ingin mencoba Artikel Terkait yang satu ini, bisa ikuti langkah-langkahnya dibawah ini :

1. Back up Template Anda sebelum melakukan perubahan apapun!
2. Dari Dashboard Blogger Anda Buka Template > Edit HTML.
3. Simpan kode ini di atas ]]></b:skin>

 #related-post {
background : none;
width : 100%;
margin-top : 35px;
margin-bottom : 10px;
padding : 5px 0 10px 0;
}
#related-post h4 {
font-size : 150%;
text-transform : uppercase;
margin : 0 0 15px;
padding : 0;
font-weight : normal;
}
#related-post li {
background : url(http://4.bp.blogspot.com/-Bt0JYGRHfpk/T7ZpN5RNSQI/AAAAAAAAGJQ/zQtrWVZwgHA/s1600/bullet.png) 1px 5px no-repeat;
color : #2c3e50;
text-indent : 0;
line-height : 1.6em;
margin : 0;
padding : 0 0 3px 19px;
}
#related-post .widget {
margin : 0;
padding : 0;
}
#related-post ul {
list-style : none;
margin : 0;
padding : 0;
} 

4. Tambahkan kode berikut dibawah <div class='post-footer-line post-footer-line-1'>

 <!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='related-post' class='related-post'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;Artikel Terkait:&lt;/h4&gt;&quot;,
      numPosts: 5,
      titleLength: &quot;auto&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      widgetStyle: 1,
      callBack: function() {}
  };
  </script>
  <script type='text/javascript' src='http://yourjavascript.com/2214513241/related-post.js'/>
</b:if>
<!-- Related Post Widget End --> 

5. Simpan Template dan lihat hasilnya..

Bagaimana? mudah bukan Cara Membuat Related Post Valid HTML5, Semoga dapat membantu anda yang sedang kesulitan mencari widget Artikel Terkait yang responsive dan simple, apalagi yang telah Valid HTML5. Jadi tambah lengkap deh. Semoga artikel ini dapat bermanfaat untuk anda. Jika anda memiliki masalah dalam penerapan tutorial kali ini, bisa ajukan disini. Sampai Jumpa. :)