Cara Membuat Related Post Widget di 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.

baca juga artikel lain:

tutorial blogging
memilah dan memilih judul dengan google keyword tools
pengertian keyword
mengoptimalkan seo
search engine optimization
situs komunitas blogger
microblogging
cara membuat link blogroll bergerak
cara membuat photoblog
membuat readmore pada blogger
memasang kalender cantik
posting artikel blogger via email
membuat link field di blogger
free template
cara mengganti template

5 Comments on Cara Membuat Related Post Widget di Blogspot

  1. HMM,..SAYA TIDAK MENGERTI KENAPA BLOG INI BISA PUNYA PR4,
    CARA BIKIN TUTORIAL DLM POSTINGAN DIATAS MALAH BIKIN TEMPLATEKU RUSAK, ( UNTUNG SBLMNYA SY BACKUP)
    Yang pasti 2x sy coba dan hasilnya sama bikin template berantakan..
    untuk tulisan terakhir dlm tutorial kembali ke layout edit HTML, jelas terasa membingungkan dan ribet bagi blogger baru sprt saya, tapi saya tahu kalau tutorial ini sangat sulit dicerna.
    Saran saya coba di revisi ulang, kasihan tuh banyak yg kebingungan gara2 ajaran yg gak focus.

  2. bro, sepertinya ada yang error nih sama tutorialnya, pas udah ke 2x nya balik ke kota edit html, dan udah diedit seperti yang bro tulis diatas, alhasil kotak widget “related post” yg tdi dibuat malah ilang. Bisa kasi pencerahan kenapa ni terjadi ? thx 🙂

Leave a Reply

Your email address will not be published.


*


Skip to toolbar