Cara Membuat Relate Post Valid HTML 5

By rizalaliansyah

Tuesday, July 14, 2015

Cara Membuat Relate Post Valid HTML 5

Cara Membuat Relate Post Valid HTML 5 - Relate post terkadang juga bisa dibilang artikel terkait, bisa jadi penting dalam blog kita. Widget ini berfungsi sebagai navigasi agar pembaca blog mengetahui postingan kita yang lain yang mungkin terkait dengan postingan yang mereka inginkan. Banyak sekali para blogger yang menggunakan related post yang mungkin tidak valid html5, dibawah ini saya akan memberikan tutorial tentang bagaimana cara membuat related post yang valid html5.

Related post biasanya dipasang dibawah postingan diatas kotak komentar untuk menyarankan pembaca untuk membaca artikel terkait lainnya pada blog anda. Widget ini akan lebih menarik engan sentuhan css yang membantu mempercantik tampilan kotak related post. Berikut caranya :

1. Masuk ke Blogger.com

2. Klik Template, kemudian Edit HTML

3. Copy kode css dibawah ini

/* 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}

4. Kemudian paste diatas kode ]]></b:skin>   

5. Copy script dibawah ini

<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;Related post : &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>

6. Paste kode dibawah kode <data:post.body/> (kode yang ke 2)

Catatan : anda akan menemukan kode tersebut 1-3 kode, jika langkah ke enam tidak berhasil, paste ke kode <data:post.body/> berikutnya (kode yang ke 3)

• Related Post : = Bisa Anda ganti dengan tulisan lain.
• numPosts: 7, = Jumlah postingan related pos.
• newTabLink: true, = Jika Anda mengganti true menjadi false maka jika diklik tidak akan muncul tab baru.
• widgetStyle: 1, = Jika Anda mengganti angka 1 menjadi 2 dan seterusnya maka tampilan artikel terkait ini akan berubah tmpilannya. Saya sarankan untuk tidak melakukannya.

Sekian artikel Cara Membuat Relate Post Valid HTML 5. Jika kurang mohon maaf

Semoga Bermanfaat...... :)

Share :

Facebook Twitter Google+