Cara Membuat Related Post Valid HTM5

Cara Membuat Related Post Valid HTM5, Jika sebelumnya related post yang saya bagikan hampir sama yaitu memiliki thumbnail lain halnya dengan yang sekarang, dimana related post tampilannya sederhana tidak memiliki thumbnail namun Anda tidak perlu khawatir karena related post ini sudah valid HTML5 alias tidak ada error pada saat Anda mengetes kevalidasihannya.

Kedua Related posts sebelumnya tidak dipasangi awesome namun yang sekarang telah dipasangi awesome agar terlihat lebih indah gitu. Demo silahkan Anda lihat pada Template buatan saya disini.

Baca juga :

• Cara Membuat Related Post Dengan Thumbnail


• Cara Membuat Related Post Dan Iklan Berdampingan

Cara Pemasangan di Blog

1. Letakkan CSS berikut di atas ]]></b:skin> atau di dalam </style>

.related-post {
  width:98.5%;
  margin:2em auto 0;
  font-size:13px;
  background:#fff;
  border-radius:4px;
  margin-top:5px;
}

.related-post h4 {
  font-size:14px;
  margin:0 0 .5em;
  background:#444;
  color:#fff;
  padding:12px 20px 14px 75px;
  font-weight:normal;
  position:relative;
  font-family:Oswald,Arial,Sans-Serif;
  text-transform:uppercase;
  border-bottom:5px solid #be4741;
}

.related-post h4:before {
  content:"
  f074"
  ;
  font-family:fontAwesome;
  font-size:22px;
  font-style:normal;
  background-color:#be4741;
  color:#fff;
  top:0;
  left:0;
  padding:13px 20px;
  position:absolute;
}

ul.related-post-style-1 {
  padding-left:0 !important;
  margin-top:-12px;
}

.related-post-style-1 li {
  list-style:none;
  padding:15px 20px;
  border-top:1px solid #eceef5;
}

.related-post-style-1 li a {
  color:#79798d;
  text-decoration:none;
}

.related-post-style-1 li a:hover {
  color:#d84527;
  text-decoration:none;
}

.related-post-style-1 li:before {
  content:"
  f08e"
  ;
  font-family:fontAwesome;
  color:#c7cbd4;
  font-style:normal;
  top:0;
  left:0;
  margin-right:13px;
}

2. Selanjutnya letakkan code HTML di bawah ini tepat di bawah <data:post.body/> jika kode tersebut terdapat 2 maka letakkan pada code yang kedua

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-post' id='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 src='https://googledrive.com/host/0B-AwFcTnFgXXSThpN1BnWTJMZ0U' type='text/javascript'/>
</b:if>

Perhatikan code numPosts:5 itu adalah jumlah artikel didalam related posts, silahkan tentukan jumlah sesuai dengan keinginan Anda

3. Simpan code berikut, tepat di atas code </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

4. Save