16 Cara Membuat Related Post (Tulisan Terkait)

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Related posts adalah tulisan terkait atau artikel yang bersangkutan. Jadi saat kita menampilkan suatu artikel dengan adanya widget related posts ini, pembaca atau pengunjung blog anda akan mudah mendapatkan informasi tentang artikel anda yang masih memiliki keterkaitan atau masih dalam categori yang sama karena related posts ini letaknya tepat dibawah postingan. Selain memudahkan pembaca, juga sebagai satu sarana promosi tulisan anda juga kali ya?!

nah berikut tutorial untuk Membuat Related Post atau Artikel Yang Berhubungan

  1. Seperti biasa Login dulu di Blogger
  • Pada menu Dashboard klik tab Layout --> edit HTML.
  • Beri tanda tanda checklist/ centang  pada kolom kecil Expand Template Widget.
  • Selanjutnya cari kode HTML berikut :

    <data:post.body/>

  • Copy kode berikut dan paste persis dibawah kode diatas

    <b:if cond='data:blog.pageType == "item"'>

    <div class='similiar'>

    <div class='widget-content'>

    <h3>Related Posts by Categories</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>

    6. Lebih jelasnya seperti ini

    <data:post.body/>
    (Simpan kode berwarna merah disini)

    7. Save Templates! Selesai...

    Semoga bermanfaat! Selamat mencoba!


  • ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

    Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

    16 komentar :

    1. get update related post with scroll here

      BalasHapus
    2. mau nanya mbak, related post itu mekanisme gimana sih? apa acak dari semua posting ato dipilihkan dari yang sama label ato gimana mbak? makasih banyak penjelasannya

      BalasHapus
    3. Terima kasih tipsnya. UDah ku praktikkan di blogku. Salam kenal...

      BalasHapus
    4. infonya bagus.. :)kalau membuat related post seperti pada blog ini kayak gmn?

      BalasHapus
    5. kode di html blog sy gak ada /data.post.body/ udah sy cari berkali2 tp g ketemu.. trus gimana solusinya?

      BalasHapus
    6. @ Blogger Kampungan: Maaf, mungkin sobat lupa mencentang kotak kecil disamping tulisan Expand Template Widget? Kalau tidak mencentang kotak kecil itu, kode tadi mmg tdk akan sobat temukan meski nyari ratusan kali.

      BalasHapus
    7. ooo... begitu yaaa.... aku coba lagi deehhh... thank's eaaa....

      BalasHapus
    8. mohon penjelasan yang lebih lengkap mbak, mana yang harus di edit ulang di kasih warna, coz masih bingung mana yang harus di edit.

      BalasHapus
    9. @ Blogger...: G' ada lagi yang perlu diedit atau dikasih warna. Kalau ingin memasang widget related post mirip diblog ini, related post dengan scroll dan berbackground warna (bisa jg ditambah image) lihat tutorialnya disini

      BalasHapus
    10. MAkasih atas ilmunya ini sangat membantu...

      BalasHapus
    11. sangat berarti.. terima kasih banyak ya...

      BalasHapus
    12. terima kasih atas artikel ini sangat bermanfaat
      saya sedang mencari ini.
      terima kasih sudah share :D



      #Salam Sehat Selalu

      BalasHapus
    13. tips yang menarik, saya pingin mencobanya hehhe

      BalasHapus
    14. makasih kak.. :D .. sukses pasangnya.

      BalasHapus

    Catatan:
    Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
    Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
    Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
    Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
    Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
    Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

    Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

    NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
    Konversi Kode di Sini!