Membuat Artikel Terkait (Related Post) Valid HTML5

(adsbygoogle = window.adsbygoogle || []).push({});

Artikel terkait atau juga related post berfungsi sebagai penunjuk kepada para pembaca blog atau visitor untuk membaca artikel lainnya yang saling berkaitan dengan artikel yang sedang dibacanya.
artikel terkait ini biasanya dipasang dibawah postingan blog atau diatas kotak komentar tentunya untuk merujuk pembaca blog membaca artikel lainnya, membuat atau memasang artikel terkait dibawah postingan blog ini tentu akan membantu visitor untuk menemukan artikel menarik lainnya yang ada pada blog Anda. Artikel terkait atau related post ini akan lebih menarik jika ditambahkan dengan kode css yang membantu mempercantik tampilan kotak related post atau artikel terkait ini. Oke langsung saja bagi Anda yang ingin memasang atau membuat artikel terkait atau related post valid html5 dibawah postingan. silahkan baca tutorialnya dibawah ini :


1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode css berikut, lalu Paste diatas kode ]]></b:skin>

/* Related Post */
.related-post { margin:0 auto; font-size:13px; background:#fff; border-radius:4px}
.related-post h4 {margin:0 0 10px;border-bottom:4px solid #999;color:#333;padding:6px 20px 6px 5px;font-weight:normal;position:relative;font-family:Oswald,Arial, Sans-Serif;text-transform:uppercase}
ul.related-post-style-1 {padding-left:0 !important; margin-top:-12px}
.related-post-style-1 li {background:url(https://lh4.googleusercontent.com/-K1czBoXEQmk/UyRNRQHdmqI/AAAAAAAACYk/q7gif-Msztk/w17-h15-no/Related-Ficri.png) no-repeat 8px 14px;list-style:none; padding:10px 20px 8px 30px; border-top:1px solid #eceef5}
.related-post-style-1 li a{ color:#555; text-decoration:none}
.related-post-style-1 li a:hover{ color:#39a6f3; text-decoration:none}

5. Lalu cari kode <data:post.body/>
6. Copy kode script berikut, lalu Paste dibawah kode <data:post.body/> (kode yang ke 2)
Catatan :
Anda akan menemukan kode script <data:post.body/> hingga 1-3 kode, jika tidak berhasil pada kode ke 2 coba Anda Paste pada kode berikutnya.

<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: 7,
      titleLength: &quot;auto&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: true,
      widgetStyle: 1,
      callBack: function() {}
  };
  </script>
<script src='https://googledrive.com/host/0B9LjnohZPx_KeTNMQVViZkpaaFk/RelatedPost-HTML5.js' type='text/javascript'/></b:if>

Catatan :
Artikel Terkait : = Bisa Anda ganti dengan tulisan lain.
numPosts: 7, = Jumlah postingan artikel terkait, bisa Anda ganti jumlahnya
newTabLink: true, = Jika Anda mengganti true menjadi false maka jika diklik tidak akan muncul tab baru.
widgetStyle: 1, = Jika Anda mengganti 1 menjadi 2 dan seterusnya maka tampilan artikel terkait ini akan berubah, tapi saya sarankan agar ini tidak dilakukan.

Sekian artikel mengenai Artikel Terkait (Related Post) Valid HTML5 2014. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

Tweet