Cara Membuat Related Post Widget di Blogspot

Posted by admin
17 Comments
This item was filled under [ Tutorial Blogspot ]

Pada belajar blogspot kali ini saya akan membuat tutorial tentang cara membuat related post widget . Membuat related post bukan hanya monopoli pengguna blog berplatform wordpress saja. Sekarang ini, pengguna blog berplatform Blogspot pun bisa membuat related post tampil di sidebar blog mereka.  Tidak Seperti Wordpress yang mempunyai Tag dan Category yang bisa digunakan sebagai acuan untuk related post, pada blogspot prinsip ini menggunakan pemanfaatan dari Label saat kita posting. Related Post akan menunjukkan posting mana saja yang mempunyai label sama.

Yuk kita langsung aja bahas Cara Membuat Related Post Widget di Blogspot

  • Login ke akun blogger anda, pilih blog yang ingin anda edit, klik link Layout kemudian masuk ke Edit HTML
  • Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.
  • Masukkan kode script berikut sesudah tag <head> dan sebelum tag </head> seperti dibawah ini:

    • <script type="text/javascript">
    //<![CDATA[
    var relatedTitles = new Array();
    var relatedTitlesNum = 0;
    var relatedUrls = new Array();
    function related_results_labels(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    relatedUrls[relatedTitlesNum] = entry.link[k].href;
    relatedTitlesNum++;
    break;
    }
    }
    }
    }
    function removeRelatedDuplicates() {
    var tmp = new Array(0);
    var tmp2 = new Array(0);
    for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmp, relatedUrls[i])) {
    tmp.length += 1;
    tmp[tmp.length - 1] = relatedUrls[i];
    tmp2.length += 1;
    tmp2[tmp2.length - 1] = relatedTitles[i];
    }
    }
    relatedTitles = tmp2;
    relatedUrls = tmp;
    }
    function contains(a, e) {
    for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
    return false;
    }
    function printRelatedLabels() {
    var r = Math.floor((relatedTitles.length - 1) * Math.random());
    var i = 0;
    document.write('<ul>');
    while (i < relatedTitles.length && i < 20) {
    document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
    if (r < relatedTitles.length - 1) {
    r++;
    } else {
    r = 0;
    }
    i++;
    }
    document.write('</ul>');
    }
    //]]>
    </script>

  • Kemudian cari kode widget seperti dibawah ini

    • <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop>
    </b:if>

  • Pada Script diatas, tambahkan script yang dicetak tebal seperti dibawah ini

    • <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
    <b:if cond='data:blog.pageType == "item"'>
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;
    max-results=10"' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>

  • Save template
  • kemudian buka Layout -> Page Elements dan add a new HTML/Javascript widget. beri judul atau title Title Related Post. kemudian copy paste script di bawah ini pada kotak yg disediakan :

    • <script type="text/javascript">
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>

  • Sekarang kembali lagi ke Layout -> Edit HTML, centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan, kemudian  cari HTML/Javascript widget Related Post yang kita add. Tambahkan baris yang berwarna merah seperti dibawah ini :

    • <b:widget id='HTML13' locked='false' title='Related Post' type='HTML'>
    <b:includable id='main'>
    <b:if cond='data:blog.pageType == "item"'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <data:content/>
    </div>
    <b:include name='quickedit'/>
    </b:if>
    </b:includable>
    </b:widget>

  • Klik Save dan lihat hasilnya.
Related Posts

Incoming search terms for the article:

Popularity: 1,939 views
Tagged with: [ ]
You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

17 Comments on “Cara Membuat Related Post Widget di Blogspot”

  • ayu

    Bagus nih artikelnya…makasih pencerahannya.
    harus dicoba nih….

    ayu´s last blog post..Panduan Cari Jodoh

    Balas

    admin Reply:
    October 23rd, 2008 at 3:07 pm

    @ayu, silahkan mbak, sama2, semoga bermanfaat

    Balas

  • Any

    Terima kasih tips nya .. saya sudah gunakan di blog saya .. tapi boleh dong diberitau juga cara membuat recent post dan recent comments dengan ukuran design seperti 3 kolom seperti di halaman ini .. rencananya mau saya tempatkan di 3 kolom yang barusan saya buat hasil belajar dari artikel ini .. terima kasih sebelumnya

    Any´s last blog post..I Saw the Beauty of Rain …

    Balas

  • firman

    wah,,thank’s bgt nih utk artikelnya…

    firman´s last blog post..Sarah palin main film porno??

    Balas

  • firman

    kok aku ga bisa ya mas?

    firman´s last blog post..Sarah palin main film porno??

    Balas

    admin Reply:
    January 23rd, 2009 at 5:48 pm

    @firman, ga bisa gimana mas? bisa lebih spesifik?

    Balas

  • zefka

    di WP kok muncul “possibly related post” dibawah postingan.
    Bgm cara hilangkannya? thanks

    Balas

  • haba

    Makasih. Bermanfaat sekali informasi-informasi di blog ini. Mahu tanya gimana fungsi “imported posts” dan “export post” blogspot mas? Mohon pencerahannya…TQ!

    haba´s last blog post..5 ways to creat money on youtube

    Balas

    admin Reply:
    May 19th, 2009 at 4:42 am

    export post untuk backup seluruh posting anda ke dalam file xml. sehingga jika ada sesuatu terjadi, seluruh post anda bisa di restore melalui import post

    Balas

  • Samudera Gema P

    Saya coba dulu ya…

    mohon bantuannya bila ada masalah…

    Balas

  • mbah cyber

    Panjang bgt ya..ada yg lebih panjang lagi nggak nich

    Balas

  • freedom

    Koq gak bisa. berapa kali saya coba tapi gak pernah tembus-tembus

    Balas

  • software download

    thanks tutorialnya

    software gratis, serial number, crack, key, terlengkap

    Balas

  • Uliah Black

    thank’s ,,

    Balas

  • riefjournal

    Wah, mantap Gan.Sudah berhasil ane coba.Trims & sukses selalu.

    Balas

  • Nursalim

    Bagaimana dengan blog yang menggunakan read more seperti blog saya?
    mohon bantuannya untuk dapat mengirim email tentang tutorialnya ok.

    Balas

  • Artikel Bisnis dan Usaha

    Alhamdulillah, akhirnya nambah ilmu juga aku setelah ketemu artikel ini. trims sobat, salam kenal.

    Balas

Leave a Comment

«
»