-->
BLANTERWISDOM101

How To Make Related Post Valid on HTML 5

24/01/15
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/AVvXsEhNTy_SC-lT1pHwiE0w4dS1PpJEOdUbvYr2aPY_3mKxxMbZSkBKPSzrLYCqsoYVGwy0NDl0g8geok5JE4mKFV03cW_pn10gjZ5u0a2u7NYYlQ7HzIcM7OkJ8-6ukAwRUstaqHnSn2jnkEoC/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
Share This :
Okay