Menampilkan Artikel Terkait Blog Valid HTML5

Unknown

HTML5

11 Jan 2014

9 Komentar

Showing Related Articles Blog Valid HTML5 - Artikel Terkait/Related Post sudah seharusnya ditampilkan pada postingan blog, ini cara termutakhir untuk membuat pengunjung meminati artikel-artikel lainnya, sehingga peningkatan visitor-pun bertambah dan seimbang.

Selain untuk membuat pengunjung meminati artikel-artikel lainnya, Artikel Terkait/Related Post ini juga menambahkan score SEO blog yang menampilkannya. Tetapi, saya akan menambahkan kualitas Artikel Terkait/Related Post itu dengan HTML5, tentu dengan ditambahkannya HTML5 ini, score SEO-nya pun akan di double pula.

Langkah 1 : Backup dulu template Anda untuk menghindari hal-hal yang tidak diinginkan.
Langkah 2 : Dari Dashboard Blogger Anda Buka Template > Edit HTML.
Langkah 3 : Simpan kode ini di atas ]]></b:skin>

#related-post background:none;width:100%;margin-top:35px;margin-bottom:10px;padding:5px 0 10px 0px}

#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/AVvXsEh2MYBoQArXmdLxkIhyFgEocfh8QwBdhM3Csj384LomkXa5oVlaAM4vOrUrXZRVwJwuWcKdI4XRMLxAcBpxylKMFwb-8-Sm288YP2lvflYRKdGPsOm3bGUIHfGp67nchDgmNiaYNDvIsl7_/s1600/bullet.png) no-repeat 1px 5px;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}

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='https://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js'/>

</b:if>

<!-- Related Post Widget End -->

Save, lihat hasilnya...

Baca juga : Membuat Artikel Terkait dengan Thumbnail

Sumber kode : http://blog.kangismet.net/2010/01/menampilkan-artikel-terkait-related.html