Membuat Artikel Terkait ala Kang Ismet Valid HTML 5

Membuat Artikel Terkait ala Kang Ismet Valid HTML 5 - Memasang Artikel Terkait atau Related Post sangatlah penting dimana pengunjung bisa membaca artikel lainnya yang masih berhubungan dan tentunya membuat pengunjung bisa betah untuk membaca artikel yang bermanfaat lainnya. Untuk DEMO bisa lihat pada bagian bawah postingan :)

at
Untuk yang ingin menggunakan ikuti tutorial dibawah ini:
1. Masuk ke akun Blogger
2. Pilih Template dan Edit HTML
3. Silahkan simpan kode CSS dibawah ini di atas kode ]]></b:skin> atau kode </style>
.related-post {
 margin:2em auto 0;
 font-size:13px;
 background:#fff;
 border-radius:4px;
}
.related-post h4 {
 font-size:14px;
 margin:0 0 .5em;
 background:#9dcb63;
 color:#fff;
 padding:14px 20px 14px 75px;
 font-weight:normal;
 border-radius:4px 4px 0 0;
 position:relative;
    font-family:Oswald,Arial, Sans-Serif;
    text-transform:uppercase;
}
.related-post h4:before {
 content: "\f074";
 font-family:fontAwesome;
 font-size:22px;
 font-style: normal;
 background-color:#8db857;
 color:#fff;
 border-radius:4px 0 0 0;
 top:0;
 left:0;
 padding:13px 20px;
 position:absolute;
}
ul.related-post-style-1 {
padding-left:0 !important;
    margin-top:-12px;
}
.related-post-style-1 li {
 list-style:none;
 padding:15px 20px;
 border-top:1px solid #eceef5;
}
.related-post-style-1 li a{
 color:#79798d;
 text-decoration:none;
}
.related-post-style-1 li a:hover{
 color:#33aea5;
 text-decoration:none;
}
.related-post-style-1 li:before {
 content: "\f08e";
 font-family:fontAwesome;
 color:#c7cbd4;
 font-style: normal;
 top:0;
 left:0;
 margin-right:13px;
}
4. Letakkan kode berikut diatas kode </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
5. Cari kode <data:post.body/> Dan letakan kode HTML berikut tepat dibawahnya.
Biasanya ada 3 atau 4 kode tersebut silahkan letakkan pada kode nomor 2 atau yang sudah ada  tinggal mengganti kode HTML dibawah ini 
<!-- 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 -->
Pada tulisan Artikel Terkait anda bisa menggantinya dengan keinginan anda dan numPosts: 5 adalah jumlah yang akan ditampilan.
6. Simpan Template

Semoga Postingan tentang Membuat Artikel Terkait ala Kang Ismet Valid HTML 5 bisa bermanfaat.

87 Responses to Membuat Artikel Terkait ala Kang Ismet Valid HTML 5

  1. keren sob tampilan artikel terkait nya. Ane jadi pengen cobain nih.

    ReplyDelete
    Replies
    1. silahkan dicoba :) di edit lagi biar pas sama templatenya :D

      Delete
  2. Wah ini yang sangat kutunggu - tunggu Mas..
    Tq mas

    ReplyDelete
  3. wah keren nih
    mau saya pke ah di blog baru ane kayanya cocok

    ReplyDelete
    Replies
    1. silahkan mas jore, apa nama blognya nih :D

      Delete
  4. wah widget related postnya tambah keren ya mas ,,
    #kunjungan perdana , salam kenal mas

    ReplyDelete
    Replies
    1. iya bener neng :D salam kenal kembali :)

      Delete
  5. makasih mas, sekalian di modif lagi biar tembah keren :D

    ReplyDelete
  6. wah hebat juga ya kang ismet bisa bikin widget artikel terkait yang super keren :)

    ReplyDelete
    Replies
    1. bener sekali mbak ririn.. ,keren sekali :D

      Delete
  7. ya, keren abis nih, kalau kang ismet emang gak ada matinya untuk membuat blog tampil cantik dan elegan

    ReplyDelete
  8. artikel terkaitnya otomatis berubah-ubah tiap posting ya... boleh juga nih scriptnya

    ReplyDelete
  9. ijin praktek dulu sob,kayaknya keren nih :D

    ReplyDelete
  10. Klu udah ada nama kang ismet pasti seru tuh mas..tutorial keren dan gayanya yang up to date

    ReplyDelete
    Replies
    1. iya seperti punya mas Nyzam, gak kalah serunya juga :D

      Delete
  11. demonya saya cari2 ga ketemu bos, hehehe.....

    ReplyDelete
    Replies
    1. lah demo ada di bawah postingan yang ada tulisan artikel terkait :D emang nyarinya kemana tah..

      Delete
  12. Waah nambah nambah ilmu nih,,,, MAKASIH sob

    ReplyDelete
  13. kalau artikel nya valid, jadi lebih ringan dan seo friendly ya mas :)

    ReplyDelete
  14. kalau aku..memakai aplikasi gratisan yang siap pakai untuk widget artikel terkait.....
    keep happy blogging always..salam dari Makassar :-)

    ReplyDelete
  15. Wahh keyen banget kang ,Pengen nerapin sih di blog tapi udah ada related postnya :(
    Jadi di terapin di Blog satu lagi ajah deh :D
    Ngomong" template nya semakin hari makin top ajah nih ^_^

    ReplyDelete
    Replies
    1. banyak yah blognya kang :D ,iya nih berkat ilmu dari kang Felix juga bisa jadi gini.. :)

      Delete
  16. kog punya ane yang muncul cuma 1 ya gan,,,
    mohon pencerahannya,,,

    ReplyDelete
  17. tampilan nya ringkas dan terlihat keren ya mas widget artikel terkait nya :)

    ReplyDelete
  18. tampilan baru ni mas , mantab eui...

    ReplyDelete
    Replies
    1. udah lama ,hehe mas ilkom nih yang lama nongol :D

      Delete
  19. blog ane kebetulan sudah ada artikel terkaitnya gan. mau pasnag lagi takut nya nanti malah error

    ReplyDelete
    Replies
    1. hehe jangan takut mas. sebelumnya mending di back up dulu kalau takut naninya error :D

      Delete
  20. related post ini berguna sekali untuk meningkatkan page view

    ReplyDelete
  21. Wah ternyata widget dari kang ismet ga kalah bagus dari mas sugeng, bener-bener template maker yang profesional deh hehe.

    Tapi sayangnya widget artikel terkait yang saya pasang modifikasi dari mas sugeng.

    Datang ya ada postingan terbaru.

    ReplyDelete
    Replies
    1. buat alternative saya pak, :) siap meluncur

      Delete
  22. kebetulan saya sudah menggunakan template dari kang ismet jadi artikel terkaitnya sudah ada tinggal pake hehehehehehe :)

    ReplyDelete
  23. keren gan.. simple tapi elegant

    http://nandarious.com/

    ReplyDelete
    Replies
    1. bisa diedit lagi biar lebih pas dengan template :D

      Delete
  24. keren memang kalau buatannya kang ismet, jadi pengen nyoba nih mas, makasih sharingnya mas :)

    ReplyDelete
    Replies
    1. makasih kembali :) iya bener mas anthonie :)

      Delete
  25. wah bagus banger mas pos nya sangat bermanfaat untuk kita semua

    ReplyDelete
  26. Memang keren-keren hasil karya Kang Ismet :)

    ReplyDelete
  27. Mohon maaf untuk pengunjung Blog Maz Mawan belum bisa BW ke blog ,dikarenakan koneksi internet yang kurang stabil :D

    ReplyDelete
    Replies
    1. Kenapa kok gitu ? :D
      Oh iya hbt tuh apaan mas ?

      Delete
    2. hollabacktexas,hehe :D tenang aja pasti di singgah semua kok :)

      Delete
    3. Oh kiran apa, hehe
      Biasanya kan admin :D

      Delete
    4. kalau admin terlalu mainstream,hehe kangen nih 1 minggu gak buka blog aja terasa setahun , =D

      Delete
    5. Iya juda sih, hehe
      Wah sama gan, udah nempel banget sama blog solanya :D

      Delete
  28. wahh mantap juga ya mas...
    saya pernah juga bikin yang beginian hehe..
    tapi ganti lagi , :D

    ReplyDelete
    Replies
    1. mas fikri kan dh jago jadi sering ganti2 deh :D

      Delete
  29. keren mas infonya, saya pernah coba bikin artikel terkait ala kang ismet ini dan hasilnya bisa menambah pageview hingga 100% jika kita menampilkan sampai 10 artikel terkait dibawah postingan :)

    makasih sharingnya :D

    ReplyDelete
    Replies
    1. perlu dicoba nih mbak indri :D makasih kembali infonya :)

      Delete
  30. wah, bisa bantu biar valid gan..salam kenal dari batang..

    ReplyDelete
    Replies
    1. salam kembali dari batang juga :D di blog mana yah pak?

      Delete
  31. Wah keren izin nyobain dulu ah gan .....

    ReplyDelete
  32. Replies
    1. untuk sementara belum ada tutorial diblog ini :)

      Delete
  33. Sudah saya terapkan. Untuk artikel terkait di versi selluler bagaimana cara memeasangnya gan?

    ReplyDelete
    Replies
    1. sebenarnnya sudah langsung bisa di versi mobile mas :)

      Delete
  34. Kereen gan :yes ane berhasil nerapin di blog ane..
    Thanks gan (y)

    ReplyDelete
  35. terimakasih sobat... sudah kami terapkan diblog.. :)

    ReplyDelete
  36. Keren bngt mas, harus di coba nih hehehe :D

    ReplyDelete
  37. Keren ni mas termakasih mas... boleh di coba di blog newbi ane http://biokom-pti.blogspot.com/2014/06/penjelasan-mengenai-alexa-alexa-internet-amazon.html

    ReplyDelete
    Replies
    1. iya silahkan, makasih sudah berkunjung :)

      Delete
  38. Cukup keren kang. tapi tidak bisa diterapkan di versi mobile...

    ReplyDelete
    Replies
    1. ya benar kalau di tampilkan di mobile lebih bagus hanya link saja itu akan lebih ringan :)

      Delete
  39. Hmmm , gan ane gagal nyoba tutornya , apa ada yang salah ya? sma skali gak ada perubahan di blog saya

    ReplyDelete
  40. mohon pencerahanya mas,,, versi mobile cuma ada tulisan "ARTIKEL TERKAIT" tapi artikelnya gak keluar.... kalo versi destopnya keluar semua....mohon maaf...pemula

    ReplyDelete
  41. ijin coba nih gan
    www.foxsoft77.my.id

    ReplyDelete

Note:
► Silahkan Berkomentar Sesuai Tema.✔
► No LINK. SPAM & PROMOSI ✘
► Segala Komentar Yang Masuk tidak Saya Moderasi ✔
► Dilarang Promosi (kecuali Ijin Admin ) ✔
► Link Hidup = Hapus.✔