Baiklah pada postingan kali ini saya akan share tentang bagaimana Cara Membuat Artikel Terkait (Related Post) dengan Scroll Bar dalam postingan Blog atau tepatnya berada di bawah postingan blog. Seberapa penting sih  memasang Artikel terkait di blog ?  pastinya sangat penting !! dengan memasang Artikel Terkait di blog akan lebih memudahkan lagi bagi para visitor blog membaca dan melihat artikel-artikel yang berhubungan dengan artikel yang dibaca.
Dan jika dikreasikan dengan Sroll Bar akan lebih menghemat tempat di blog kita jika isi postingan sudah banyak.



Untuk cara memasangnya silahkan ikuti langkah-langkahnya berikut ini :
1. Login ke akun blog
2. Selanjutnya edit HTML lalu centang Expand Template Widget dan jangan lupa download template untuk berjaga-jaga jika terjadi kesalahan.
3.  Kemudian carilah kode berikut ini (gunakan ctrl+f untuk mempermudah pencarian)
<data:post.body/>
4. Jika sudah letakkan kode di bawah ini tepat di bawah kode <data:post.body/> [ setiap template blog berbeda-beda, seperti template blog ini memiliki 4 <data:post.body/> ] coba letakkan kode setelah kode Y kedua. atau tepatnya diantara <data:post.body/> dan <div style='clear: both;'/> <!-- clear for photos floats --> . Jangan takut salah dulu sob, coba tes satu-satu klo diletakkan di  <data:post.body/> yang kedua ga bisa coba di  <data:post.body/> yang selanjutnya.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<div style='border: 0px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 300px; background-color: #fcf7f7;'>
<div class='widget-content'>
<h3>Artikel Terkait Lainnya :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</div>
</b:if>
NB:
- Untuk kode yang berwarna merah silahkan sesuaikan dengan keinginan 
- Untuk kode yang berwarna hijau adl warna background  

5. Simpan dan Lihat hasilnya
>>>>>Selamat Mencoba<<<<<
4.5

72 komentar:

  1. Ini yang ane maksud,, izin sedot gan,,

    mintak komen juga ya gan.,, [ww]-Share

    ReplyDelete
  2. wah-wah...artikel menarik semua..hehe
    tapi ane dah terlanjur pake ARTIKEL TERKAIT tanpa pake scroll bar gan :)

    ReplyDelete
  3. nice info... bermanfaat banget...

    http://pojokan-artikel.blogspot.com/

    ReplyDelete
  4. tutorial blog_ok sama2 sobat ...
    Hidayat_ok thanks sobat,,, kpan2 dicoba aja gan lebih hemat tempat pastinya . .
    Dani_Ok sama2 sobat . . makasih udah mampir dimari . . .

    ReplyDelete
  5. thanks infonya,tipsnya akan saya terapkan di http://yangyang-perdianto.blogspot.com

    ReplyDelete
  6. Syukron tipsnya berhasil di web ku

    ReplyDelete
  7. Setelah saya ikuti semua sekarang udah berjalan di web ku
    Terima Kasih

    ReplyDelete
  8. Gan, artikelnya sungguh sangat bermanfaat.

    Oh ya bila Agan berkenan, ane ada sebuah trik untuk Membuat Daftar Artikel Terkait Pada Template Seluler Blogspot.

    Salam kenal dan terimakasih.

    ReplyDelete
  9. Ini nih yang ane cari, terima kasih sob

    ReplyDelete
  10. OK sama2 sobat
    thanks all udah sudi mampir di blog Y sederhana ini,,,
    selamat mencoba dan Semoga bermanfaat

    ReplyDelete
  11. terimakasih, gak pake banyak!! nice post sob

    ReplyDelete
  12. mantap infonya gan di tunggu kunjungan baliknya
    http://firecybernet.blogspot.com/

    ReplyDelete
  13. Mas blog aq kq ndak bisa dipasang ntu ya....? Knapa mas. Tolong di jawab di blog aq ya...?

    ReplyDelete
  14. nice posting gan baca juga artikel saya tentang MEMBUAT ARTIKEL TERKAIT DENGAN SCROLL BAR

    http://michaellandresteven96.blogspot.com/2012/02/cara-membuat-artikel-terkait-dengan.html

    ReplyDelete
  15. @The 7Bloggers:udah saya jwb mas diblog'a . . biar lbh jelas'a baca lg artikel saya di atas . thanks udah mampir

    ReplyDelete
  16. ini dia yang saya cari. thanks ya...

    ReplyDelete
  17. izin copas om.malas nulisnya hehheh>>

    nice tutor

    ReplyDelete
  18. mantaph ni..
    ijin olah TKP dulu gan..

    ReplyDelete
  19. Dadang_ok sama2 sobat
    katobduit_silahkan sob,, semoga bermanfaat
    takasih tahu_ia sama2 sob,,
    An Nahl_Silahkan sobat,, smoga berhasil

    mkasih sahabat udah mampir di blog sederhana ini

    ReplyDelete
  20. mohon bantuannya gan di template saya gak ada kodenya uda saya cari pake ctrl+f saya menggunakan template lasantha

    ReplyDelete
  21. @Ksatria Fantasy:Setiap template blog itu pasti ada ko sob kode'a
    mungkin sobat blm mencentang expand template widget waktu mau nyari kode'a
    dicoba lag ajja sob Good Luck

    ReplyDelete
  22. Saya sudah terapkan ilmunya mas...
    Terima kasih banyak atas sharingnya.

    Salam
    Yopan Prihadi

    ReplyDelete
  23. bagus gan...berhasil..makasih banyak nih

    ReplyDelete
  24. wah...mantap sekali nih buat mempermudah navigasi hehehe...mantap kang...

    ReplyDelete
  25. sudah dipasang gan, terbukti running..
    sudah lama2 cari baru ketemu di http://abyfarhan7.blogspot.com
    Thanks

    ReplyDelete
  26. ga muncul related post nya saya...hanya tulisan :artikel terkait yg muncul..ada solusi lain ga..?

    ReplyDelete
  27. @Aby Farhan:Udah mas, tetep kagak bisa....? Hehehehe mungkin templatenya ajah ya kali?

    Oy bang aku saranin untuk SEO tag H3 pada kata artikel terkait di atas dihilangkan ajah. Byar tidak menjadi duplikat kontent sama title posting?

    ReplyDelete
  28. Makasih gan infonya sudah saya terapkan dan berhasil.. Saya juga sudah follow blog agan, kalo tidak keberatan follow back blog saya juga ya di www.dudirudiana.blogspot.com
    Terima Kasih

    ReplyDelete
  29. wahhhh...ini artikel yang ane cari gan..
    ijin sedot ilmu ya gan..jangan lupa mampir ke blog ane juga..
    terimakasih,,,:D

    ReplyDelete
  30. Thanks infonya gan ,,bermanfaat buat ane yg masih newbie
    Di tunggu kunjungan balik nya http://bloggerkw.blogspot.com/

    ReplyDelete
  31. terima kasih infonya gan..sangat membantu..

    ReplyDelete
  32. thx sob gimana yah biar artikel terkait nya biar bisa banyak lebih dari 50
    ini nya udah gua ganti 100 semua var maxNumberOfPostsPerLabel = 4;
    var maxNumberOfLabels = 10;
    maxNumberOfPostsPerLabel = 100;
    maxNumberOfLabels = 3;
    bales ke email ane is_smile182@yahoo.comatau
    main ke web ane www.ahlulbadr.com

    ReplyDelete
  33. Ty gan infonya menarik...
    ini yg saya cari" selama ini

    ReplyDelete
  34. nice tutorial,,,sangat berguna bgt ini..lanjutkan

    ReplyDelete
  35. 100% working gan...
    terimakasih sudah berbagi.. jangan lupa kunjungi :
    http://tentangkita-indraka.blogspot.com

    thanks gan.
    semangat berbagi

    ReplyDelete
  36. bisa gan, ternyata di kode body yg ketiga, terima kasih informasinya masbro :)

    ReplyDelete
  37. setiap copy tuh kode html,, seringgggg skale ada tulisan "Lebih dari satu bagian ditemukan dengan id: header2. ID Bagian haruslah unik."

    itu kenapa gan ? trimmss...

    ReplyDelete
  38. mksih sob...udah saya coba dan berhasilll

    ReplyDelete
  39. makasih yaa.. sudah saya pasang :D

    ReplyDelete
  40. thanks sudah berbagi ilmunya, sukses selalu....

    ReplyDelete
  41. di blog punya ane, dipasang di data post body yang pertama langsung ok. thank udah sharing sob

    ReplyDelete
  42. Tipsnya sangat bagus dan jelas, saya coba dulu gan.

    ReplyDelete
  43. saya suka blok anda tentang cara membuat artikel terkait scroll bar, saya berharap untuk melihat lebih banyak dari anda. apakah anda menjalankan situs lain????

    ReplyDelete
  44. Tukar link disini yuk http://rendo-redcell.blogspot.com/p/link-exchange.html

    ReplyDelete
  45. Mohon Ijin dipakai di blogku boss

    ReplyDelete
  46. Terima kasih mas.. berhasil... terpasang..!!!

    ReplyDelete
  47. Trimakasih atas infonya, dari tadi mbaca artikel blog lain gk berhasil. setelah baca blog ini berhasil juga :)

    ReplyDelete
  48. kok ane blum berhasil nerapin di blog ane gan........hasilnya tetep kyak gini http://laginemu-trik.blogspot.com

    ReplyDelete
  49. Ini dia yang saya cari, saya coba dulu ya gan. Nice artikel.

    Visit back www.pakayangan.blogspot.com

    ReplyDelete
  50. thanks gan, ahamdulillah berhasil :)

    ReplyDelete
  51. sangat membantu sekali sob..
    maksih ya..hehe

    ReplyDelete
  52. wah ternyata gtu ya gan,,,
    oke lah coba dulu di http://masphatar.blogspot.com
    thaks infonya gan..

    ReplyDelete
  53. tanks gan tips nya
    http://stafabandet.blogspot.com/

    ReplyDelete
  54. Salam kenal gan, mampir di blog saya juga ya ^_^

    ReplyDelete
  55. izin praktek gan... mudah2an berhasil.
    salam blogger.

    ReplyDelete
  56. Terima kasih gan tutorialnya. Kunjung balik ya..
    http://tenlibrary.blogspot.com

    ReplyDelete
  57. MAKASIH ARTIKELYA GAN , KUNJUNGI BALIK YAA

    ReplyDelete

Terima Kasih atas kunjungan dan komentarnya pada Blog ini. Thanks atas setiap Komentar, Masukkan, Saran, dan Kritik Y dapat membangun blog ini agar lebih baik lagi kedepannya. Berkomentarlah sesuai dengan Isi Bahasan Artikel. Mohon dengan Sangat Kepada Sobat-sobat untuk tidak berkomentar Y berbau unsur:
- Sara
- Pornografi
- No Spam !!! [Komentar menyertakan link aktif akan otomatis terdelete]
Terima Kasih atas Kunjungannya Sobat,,
Salam Sukses dari AF Sahabat Artikel

 
Top