Cara Membuat Related Post SEO Valid HTML5 di Blog

Cara Membuat Related Post SEO Valid HTML5 di Blog

Cara Membuat Related Post SEO Valid HTML5 di Blog - atau biasa di sebut para bloggers dengan Related Post merupakan suatu yang penting di pasang pada blog atau postingan kita, karena dengan memasang cara ini akan mempermudah pengunjung kita untuk mencari artikel artikel yang masih terkait pada postingan yang telah dia baca sebelumnya. Biasanya Related post ini banyak dipasang pada bagian postingan, tepatnya di bawah artikel blog kita. Tapi sebelumnya ini masih berkaitan dengan postingan saya sebelumnya tentang 3 Cara Menambah Atribute Alt Tag dan Title Gambar, Semua artikel ini bertujuan untuk membuat blog kita lebih Valid HTML5 lagi dan pastinya lebih SEO. Yups, baiklah langsung saja kita menerapkan Artikel terkait berikut ini pada postingan anda.

Artikel Terkait (Related Post) Valid HTML5 Style 1

1. Masuk ke akun Blogger anda.
2. Lalu Klik Template => Edit HTML
3. Dan Cari kode Berikut ]]></b:skin>
4. Selanjutnya Copy kode css berikut, dan 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 anda cari kode <data:post.body/>
6. Dan anda Copy kode script berikut, selanjutnya Paste dibawah kode <data:post.body/> (kode pada nomor 2)
NOTE :
Anda akan menemukan banyaknya kode script <data:post.body/> hingga 1-3 kode, dan jika sobat 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>

NOTE :
Artikel Terkait : => Ganti Sesuai judul Keinginan Anda.
numPosts: 7 => Anda bisa ganti jumlah Artikelnya terserah anda.
newTabLink: true, => Jika sobat mengganti true jadi false maka jika diklik tidak muncul tab baru.
widgetStyle: 1, => Jika sobat mengganti 1 menjadi 2 dan seterusnya maka tampilan pada artikel terkait akan berubah. (sebaiknya tidak usah di rubah)

Saya merupakan anak ke 8 dari 8 bersaudara, berwatak keras kepala dan sangat mencintai dunia blogging serta desain.
"Love My Mom"

Previous
Next Post »