hammer of thor
» » How To Make Related Post Valid on HTML 5

How To Make Related Post Valid on HTML 5

Posted by on
Related Posts digunakan untuk memudahkan pembaca menemukan artikel pada "label" yang sama. Selain pada label yang sama, related post ini juga membuat random artikel, sehingga bukan hanya artikel yang terkait saja yang akan muncul.

Tanpa basa-basi lagi, inilah tutorialnya!

1. Buka Blogger.com
2 . Pilih Blog sobat > Template > Edit HTML
3. Copy semua kode dibawah ini, lalu paste 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRMNW0MUUuIMmQBVVGVSCEU30r6osI_lHoE81yNLD08bW8KmERSkuuJwgNjnxgcC236Ua-BTlXaIh6ypAXDVTC1mjiqDnrhjLCslvB6kkRw2O8MT1yJpG1n8Uq6grlkus0bZn0c2nljrEy/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. Cari/Find <div class='post-footer-line post-footer-line-1'> lalu copy kode dibawah ini
<!-- 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
 
 
Semoga membantu!  
 
Source: afowles | Dian Anarchyta
Labels: tutorial

Thanks for reading How To Make Related Post Valid on HTML 5. Please share...!

Back To Top