Artikel Terkait atau Related Posts digunakan untuk memudahkan pembaca menemukan artikel pada "label" yang sama. Selain pada label yang sama, related post ini juga membuat random artikel, sehingga bukan hanya artikel yang terkait saja yang akan muncul.

Contohnya seperti gambar dibawah ini:

artikel

Pembaca akan langsung bisa menemukan judul postingan kita yang berkaitan dengan judul posting. Hal ini dilakukan supaya mereka tidak lekas-lekas pergi dari blog kita...

Tahu caranya? Saya akan jelaskan satu-persatu :
  1. Back up Template Anda sebelum melakukan perubahan apapun!
  2. Dari Dashboard Blogger Anda Buka Template > Edit HTML.
  3. Simpan kode ini di atas ]]></b:skin>
  4. #related-post background:none;width:100%;margin-top:35px;margin-bottom:10px;padding:5px 0 10px 0px}
    #related-post h4{font-size:150%;text-transform:uppercase;margin:0 0 15px;padding:0;font-weight:normal}
    #related-post li{background:url(http://4.bp.blogspot.com/-Bt0JYGRHfpk/T7ZpN5RNSQI/AAAAAAAAGJQ/zQtrWVZwgHA/s1600/bullet.png) no-repeat 1px 5px;color:#2c3e50;text-indent:0;line-height:1.6em;margin:0;padding:0 0 3px 19px}
    #related-post .widget{margin:0;padding:0}
    #related-post ul{list-style:none;margin:0;padding:0}
  5. Tambahkan kode berikut dibawah <div class='post-footer-line post-footer-line-1'>
  6. <!-- Related Post Widget Start -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div id='related-post' class='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: 5,
          titleLength: &quot;auto&quot;,
          containerId: &quot;related-post&quot;,
          newTabLink: false,
          widgetStyle: 1,
          callBack: function() {}
      };
      </script>
      <script type='text/javascript' src='https://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js'/>
    </b:if>
    <!-- Related Post Widget End -->
  7. Save, lihat hasilnya...

Untuk membuat Related Posts dengan Thumbnail kik disini.

Enjoy it...

20 komentar

kode2nya banyak bgt ya, lola gak ya..
yawis, daripada penasaran dicoba dah..
thanks ya..

Balas

saya coba kok belum berhasil

Balas

tes dicoba gan,,,mudah mudahan lebih valid html

Balas

Keren dan sudah terpasang di blog saya.
Kang, di bawah judul artikel tuh bagus peletakan author, time, sama label dan komentarnya. Itu bisa dishare cara buatnya ngga :D

Balas

kang kenapa gk gunain homePage? bukannya pageType? Bukannya pageType itu bsa membuat artikel terkait ttap muncul pada versi ?m=0 atau ?m=1 :)

Balas

haduh salah tulis,, mksdnya kenapa gunain homePage , kenapa gk pageType aja?

Balas

Memang Tutorial yang Luar Biasa,

Saya pasang ah

Tolongdong Perbanyak Tips SEO nya : )

Balas

kang kok udh saya terapkan gak brhasil ya?? malah gak muncul.

Balas

kunjungi balik yah kang & Komen :D
http://firmansyahnuralifrohman.blogspot.com

Balas

keren relatednya kang saya mau cuba..

Balas

terima kasih gaan, akhirnya berhasil... :D

Balas

kang, cara nambahin bordernya gmn ya?

Balas

tutorialnya muanntap.... sudah aku terapkan di blogku...sukses gan

Balas

tutorialnya muanntap.... sudah aku terapkan di blogku...sukses gan

Balas

Sep ni kang, nambah lagi dari kang ismet jad blog ane serba kang ismet. hehehehe
http://goblogdot.blogspot.com

Balas

kang ismet . bagi style yang kek gini ...
http://prntscr.com/40lz9m

mau gue view-source . tapi takut :haha
Kunjungi Back : http://sharing-abizal.blogspot.com/

Balas

Terimakasih gan, tutorial keren ni boleh dicoba di blog newbi ane http://biokom-pti.blogspot.com/2014/06/penjelasan-mengenai-alexa-alexa-internet-amazon.html

Balas

alhamdulillah di blog ku berhasil, makasih mas atas tutorialnya. btw cara ubah ukuran font nya g mana mas ya?

Balas

Mantap tutorialnya kang... cocok untuk template Blog Berita

Balas

Poskan Komentar


×
Chat