Artikel Terkait (Related Post) Valid HTML5 2014

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...

9 Responses to "Artikel Terkait (Related Post) Valid HTML5 2014"

  1. Tanks,ambil bagian sedot gan...manfaat.....

    ReplyDelete
  2. Ijiin ambil bagian gan....tip yang mambantu tanks....

    ReplyDelete
  3. Gimana Cara Membuat RELATED POST Tanpa Javascript??
    [Ask] Gimana Cara Membuat RELATED POST Tanpa Javascript??

    Setahu ane satu2nya widget blogspot yang mempengaruhi hasil pencarian di search engine adalah widget POPULAR POST dan Archive. Karena link dan anchor textnya live, bukan javascript. Coba klik kanan > view source pada halaman blogspot anda, cek link yang live.

    Ada yang tahu atau bisa bikin Related Post tanpa javascript, seperti codingnya widget 'Popular Post' & 'Archive' ngga?

    ReplyDelete
    Replies
    1. tinggal kupas saja sob,
      silahkan buka link javascript diatas, terus copy kodenya, lalu masukkan lagi ke blog, namun kode java script kadang panjang, jadi sesuiakan saja...

      Delete
    2. Maksud saya, bener2 tanpa javascript
      pake bahasa program lainnya, jadi bisa muncul di view-page source

      Delete
  4. terima kasih gan,dari blog agan udah memeberikan informasi yang sangat bermanfaat untuk saya,
    saya banyak belajar dan mendapat ilmu terbaru setelah melihat postingan yang ada di blog agan.
    saya tunggu postingan selanjutnya gan..

    ReplyDelete

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Fast Hosting