Minggu, 21 Februari 2010

Membuat Artikel Terkait / Related Artikel Pada Blogspot

Sudah lama sekali saya ingin menulis artikel tutorial blog mengenai cara memasang "Artikel Terkait" pada posting blog.

Salah satu cara untuk meningkatkan trafic dan pagerank adalah memasang Artikel Terkait tersebut agar pengunjung juga dapat membaca artikel yang lain sehingga pengunung blog tersebut lebih lama diblog tersebut.

Berikut cara memasang artikel terkait tersebut:
  1. Buka " Edit HTML " pada blog kemudian centangkan " Expand Widget Templates "
  2. Cari Kata <data:post.body/> dengan cara menggunakan CRTL-F
  3. Kemudian lihat kode ini: <div style='clear: both;'/> <!-- clear for photos floats -->  
  4. Masukan kode dibawah ini diatasnya
  5. <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='similiar'>


    <div class='widget-content'>
    <br/>
    <h3>Related Articles</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>
    </b:if> 
Sehingga hasilnya akan seperti ini :

</b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='similiar'>


    <div class='widget-content'>
    <br/>
    <h3>Related Articles</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>
    </b:if>


    <div style='clear: both;'/> <!-- clear for photos floats -->

    NB: Kode yang berwarna Biru bisa diubah angkanya seusai dengan kebutuhan dan hasilnya akan seperti dibawah ini. Selamat Mencoba

    Untuk melihat cara Membuat Artikel Terkait / Related Artikel Bergambar ( Thumbail ) Pada Blogspot dapat klik link ini

    Jika artikel ini bermanfaat, silahkan isikan alamat email Anda untuk berlangganan artikel Bunli secara gratis melalui email


    Delivered by FeedBurner

    Powered by FeedBurner

    73 komentar:

    1. makasih infonya...mampir balik ya...
      BalasHapus
    2. makasih infonya
      kunjungi juga my blog
      http://difagema.blogspot.com/
      BalasHapus
    3. terimakasih masukan nya..^6
      BalasHapus
    4. info yang menarik, penempatan related postnya dibagian sidebar gimana caranya?
      BalasHapus
    5. @ TUTORIAL BLOGGER
      penempatan related post tidak dapat di pasang di sidebar karena kodenya berhubungan dengan label yang digunakan pada postingan artikel
      BalasHapus
    6. Kok saya gak berhasil sih. Please bantuin dong.
      BalasHapus
    7. thanks buat tips related postnya... works great :)
      BalasHapus
    8. Punyaku kok ga bisa ya coba lihat disini http://nofianto777.blogspot.com/
      BalasHapus
    9. THANKS BOSSS,,SEEPPP JADI TAHU,,NICE POST,,,,,,
      BalasHapus
    10. mkasi sob tutorial'y...coba dlu...
      BalasHapus
    11. Sobat" blogger,bisa minta tolong g??gimana cara menghapus tempat posting jadi doubel..bila bisa,tolong email ke iwan.atom@ymail.com
      BalasHapus
    12. @Rismandi: Maaf, saya masih kurang mengerti maksud dari menghapus tempat posting menjadi double......... bisa kasih screen shootnya...... sapa tau bisa saya bantu
      BalasHapus
    13. makasih tipsnya, bang...
      sangat bermanpaat..
      BalasHapus
    14. Artikel yg oke
      mampir juga di blog ane
      http://3hsoftcom.blogspot.com
      BalasHapus
    15. merubah warna tulisan artikel tekaitnya gimana tuh disini warnanya sama dengan background jadi ga kelihatan....
      mohon bantuannya nunamina.blogspot.com
      BalasHapus
    16. makasih atas info yang berguna ini
      BalasHapus
    17. Info yang bagus gan... ijin nyoba masang y.
      BalasHapus
    18. makasi gan.. sangat membantu..
      BalasHapus
    19. matur suwun... sae sanget niki tips e kangge kulo piyambek, dados tambah ilmune.. :)
      BalasHapus
    20. sangat bermanfaat...salam kenal
      BalasHapus
    21. kok masih belum bisa yaaaa
      mohon bimbingannya
      n salam kenal
      BalasHapus
    22. @krisdiant : sepertinya kamu sala penempatan scriptnya... di coba lagi saja, seharusnya relatednya itu diatas kotak komentar
      BalasHapus
    23. Mantap gan....
      Copy langsung Klik SIMPAN
      langsung sukses....
      makasih ya gan...
      BalasHapus
    24. mantap. sekali coba langsung bisa. :)
      BalasHapus
    25. http://agam-on.blogspot.com/search/label/blogger%20tricks
      BalasHapus
    26. Taks ya! kebetulan lagi nyari
      BalasHapus
    27. Mantap, trim atas share ilmunya
      Luthfi
      BalasHapus
    28. makasih infonya, bermanfaat banget buat saya...
      info kesehatan
      BalasHapus
    29. Makasih infonya.. AkanAku coba
      BalasHapus
    30. terima kasih atas pencerahnnya
      BalasHapus
    31. Komentar ini telah dihapus oleh penulis.
      BalasHapus
    32. Thanks gan...
      ini baru pas & mantab :D
      BalasHapus
    33. cara bikin related post kyk agc gmn yach?
      BalasHapus
    34. Mantab gan... ijin bookmark ya.. :D
      BalasHapus
    35. mantabb mass :D, kunjungi juga : boieblamo.blogspot.com
      BalasHapus
    36. Haha, sudah kucoba dan berhasil, teruimakuasih Pak Bunli atas infonya...
      BalasHapus
    37. :)...trims..berhasil tuh tp kok ada angka limanya y..?
      BalasHapus
    38. makasih gan.. dah dicoba tapi kog gak muncul gambarnya ya..??? http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif
      BalasHapus
    39. @ Dukun Design:
      relatednya uda keluar kan? berarti gambar nya yang tidak ditaruh pada tempat yang benar.. coba di setiap posting gambarnya diletakan di paling atas :D
      BalasHapus
    40. gan, sebagian kode ad yang gk bias di temukan nich,,, help me..
      BalasHapus
    41. @ yang bagian mana gan? pakai CTRL-F masih tidak bisa temuin?
      BalasHapus
    42. thanks yahhhh.........skrg scriptnya udah terpasang..
      jangan lupa berkunjung jg di blog ku
      BalasHapus
    43. ok gan,, aku coba dlu ya,, thanks
      BalasHapus
    44. thanks infonya membantu sekali. blogwalking http://imagination-our-inspiration.blogspot.com
      BalasHapus
    45. Makasih banyak,,

      tutornya disini lebih lengkap daripada di lain
      BalasHapus
    46. mantap gan tapi ane males nyari kode html nya soalnya di ctrl +F uga nggak keluar.. aneh saya pke windows 7 apa ada pengaruhh nya..
      BalasHapus
    47. Thanks gan, tips nya work ni di blog ane... mantaf dah... :-)
      BalasHapus
    48. trimakasih gan,artikelnya berhasil saya praktekkan...
      BalasHapus
    49. makasih mas,,sangat bermanfaat...visit back yah!!
      BalasHapus
    50. thank gan infonya kunjungi my blog http://kliktombol.blogspot.com
      BalasHapus
    51. makasih gan infonya....mantap.
      BalasHapus
    52. oouh begini toh carane,,,,,,maturmungun
      BalasHapus