Artikel Terkait (Related Post) Valid HTML5 2014

Artikel Terkait (Related Post) Valid HTML5 2014 - 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. Banyak sekali artikel terkait atau related post ini yang sudah dibuat, namun banyak Blogger yang menggunakan artikel terkait atau related post dibawah postingan ini tidak valid html5, dan sekarang pada blog Ficri Pebriyana akan membagikan artikel mengenai cara memasang atau membuat related post atau artikel terkait dibawah postingan blog. Menjadikan Halaman Postingan Valid HTML5 itu sangat berguna dan bermanfaat sekali, ditambah dengan HomePage Valid HTML5 ini akan membantu Artikel Cepat Teridex Google. Pada tahun 2014 ini banyak sekali Blogger yang mengiginkan blognya Valid HTML5 namun ketika mereka menggunakan Template Blog yang sudah dipasangnya sejak lama, mereka kesusahan dalam menjadikan blognya Valid HTML5. Jadi untuk memudahkan blog valid html5 silahkan download saja template yang seo friendly tahun 2014.

Kembali lagi ke artikel terkait (related post) valid HTML5 2014, 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 2014 dibawah postingan blog 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...

Ficri Pebriyana

Blogger yang jarang nulis artikel :D

Bagikan Artikel ini