earth

Guestbook

/* Iklan google ads */
Sehubungan ada sohib yang subuh-subuh sudah sms nanyain tentang bagaimana cara bikin Related Post (Artikel Terkait), akhirnya harus nulis juga mengenai Related Post ini meski baru aja semalam aku curat-coret di blog ini. Ga pa pa kan? Demi sohib dan kamu semua aku rela mati (baca: makan timbel) deh, hehehe...

Sebenarnya apabila kita searching mengenai Related Post ini maka akan muncul puluhan tulisan seputarnya, baik yang dalam bahasa asing maupun bahasa kita (sayang blum ada dalam bahasa sunda unk). Tapi kalo kamu males “kakaratak” and milih-milih artikel yang pas, baca aja tulisan ini, mudah-mudahan bisa kamu terima dengan suka cita dan lapang dada, hehehe...

Fungsi Related Post adalah untuk menunjukkan artikel-artikel yang berhubungan dengan suatu kategori atau label dari sebuah tulisan. Dengan adanya Related Post ini, si pembaca dapat langsung melihat artikel terkait sehingga bisa langsung meg-klik-nya tanpa harus membuka-buka Blog Archieves.

Untuk menambahkan Related Post dalam blog, kamu bisa mengikuti langkah-langkah berikut :
  • Login terlebih dahulu ke akun blogger kamu.
  • Dari halaman Dashboard klik Tata Letak dan pilih Edit HTML.
  • Kemudian centrang pada Expand Template Widget.
  • Carilah kode <data:post.body/> (gunakan Control F atau F3).
  • Letakkan kode script berikut di bawahnya:
    <!-- Mulai Related Post -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='margin-top:20px; padding:0px 10px; border:2px solid #CCC'>
    <div class='related-posts'>
    
    <div class='widget-content'>
    <h4>Artikel terkait dengan kategori ini:</h4>
    <div id='datablogku' style='margin:10px 0px 10px 0px'/>
    
    <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;datablogku&#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>
    <!-- Terimakasih karena anda tidak menghapus link ini -->
    <div style='font-size:85%; float:right; margin-top:3px;'><a href='http://ruangsc.blogspot.com/2009/06/menampilkan-related-post-artikel.html' target='_blank' title='Cara membuat Related Post'>Widget by SC Community</a>
    </div></div>
    </b:if>
    <!-- Akhir Related Post -->
    
    Catatan:
    » Ukuran yang diberi warna merah bisa kamu ubah.
    » Jika kamu sudah menggunakan script Readmore ini, letakkan kode tersebut di bawah <data:post.body/> yang pertama (paling atas). Jika berbeda, kamu bisa mencobanya di bawah <data:post.body/> yang kedua (paling bawah).
    » Jika kamu sudah menambahkan Icons Social Bookmarking atau Addthis Sharing Tools, letakkan kode tersebut dibawah script Icons Social Bookmark atau Addthis Sharing Tools.
  • Simpan hasil edit kamu dan ucapkan Alhamdulillah....

Mudah kan? Nah, sekarang kamu tinggal melihat hasilnya.
Selamat mencoba...

Referensi: Dari berbagai sumber
  • Artikel Terkait Dengan HTML Tutorials

    Terimakasih sudah membaca artikel SC Community's Blog

    28 komentar

    udah nyoba tapi belum jadi, waktu posting harus masukin data lagi ga yang dibawah judul

    26 Juni 2009 20.27  

    Betulan keren sekali ni blog,, 2 jempol buat sampeyan mas,, :D

    28 Juni 2009 11.30  

    asslamualikum..aku udah nambah kan skrip atikel yang terkait di blog, tapi ga muncul2 juga ya? kenap?padahal udah sesuai yang di anjurkan.

    29 Juli 2009 12.10  

    makasih, udah saya coba bikin ...sukses

    19 Agustus 2009 07.55  

    makasih sob artikelnya, ak mo coba praktekin ya :)

    blog psikologi

    29 Oktober 2009 21.08  

    Pa kalo gak ada data:post.body nya gimana?

    6 November 2009 19.17  

    Wah nyunda pisan si kang Admin euy.. lam kenal
    kang.. siap jadi tukang nongkrong baru di blog ieu nya :P

    4 Januari 2010 20.21  

    gimana aq coba kok nggak muncul? mohon bantuanya???

    7 Januari 2010 16.51  

    mantab kang stelah gw coba2, ternyata berhasil jg kodenya diletakan dibawah yg kedua... bkn yg pertama.

    7 Januari 2010 16.59  

    tq infonya fathur..

    pantes gw letakan di yg pertama kaga bisa..

    27 April 2010 15.16  

    kok gk bisa kang, kan nya ada dua yang satu diatas yang satu dibawah kalo readmore saya yang pakai di bawah terus gimana? kalo kode ini dimana?

    29 April 2010 13.01  

    oh. saya ikutin kang rohman waktu itu soalnya

    8 Mei 2010 12.12  

    asslamualikum..aku udah nambah kan skrip atikel yang terkait di blog, tapi ga muncul2 juga ya? kenap?padahal udah sesuai yang di anjurkan.

    28 Mei 2010 09.16  

    kang kalo cara ngilanginnya gimana ?

    29 September 2010 17.42  

    Trima kasih infonya...
    Langsung ke TKP...
    Sukses selalu. Amin...

    23 Oktober 2010 18.40  

    Mantap Gan! Saya cari-cari cara nambahin widget "related post". Udah muter tujuh keliling akhirnya nemu yang paling simple. Mantap pokoknya!

    23 Januari 2011 20.45  

    pengen pakek widget ini tp saya udah pasang yg ada gambarnya n bingung hapusnya mas

    15 Maret 2011 10.46  

    Bos saya sudah coba, tapi di blog saya kok gak well formed ya? Katanya gak bisa di parse karena ada kesalahan. Mohon pencerahannya gan.
    :(
    http://ribuan-cara.blogspot.com
    http://thousand-tips.blogspot.com

    14 April 2012 01.55  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler