Memasang Related Post pada Sidebar

Menampilkan menu tambahan pada side bar bisa merupakan alternatif bagi blogger agar pembaca bisa melihat/membaca artikel yang ada secara mud...

Menampilkan menu tambahan pada side bar bisa merupakan alternatif bagi blogger agar pembaca bisa melihat/membaca artikel yang ada secara mudah, Pada umumnya penempatan artikel yang terkait diletakkan  dibawah posting/artikel, dengan berbagai modifikasi, ada yang menambahkan icon disamping judul artikel, ada yang membuat related post dengan fungsi scroll dan ada yang membuat related post tampil dengan image, kali ini saya ingin berbagi mengenai cara membuat related post tampil di sidebar seperti di blog ini. caranya tidak sulit dan bahkan mudah untuk dilakukan.
Ikuti langkah Berikut :
  1. Login ke account blogger anda, klik rancangan/layout lalu klik edit HTML
  2. Jangan lupa centang expand widget templates untuk mengedit template secara keseluruhan
  3. masukan kode dibawah ini sebelum tag </head>

    <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>

Kemudian tambahkan kode yang warna merah pada kode tersebut :

    <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
  • Masuk ke menu Layout -> Page Elements dan add a new HTML/Javascript widget. beri judul atau title Title Related Post ( atau yang lain sesuai kebutuhan ) kemudian copy paste script di bawah ini : //bisa pasang dibagian mana saja//side bar//footer//sesuai kebutuhan//

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

Simpan dan lihat hasilnya..!
Selamat mencoba ....!

COMMENTS

BLOGGER: 11
  1. owh jadi seperti ya caranya,,,
    oke thanks langsung saja dech dicoba....

    BalasHapus
  2. sipp dech klo gitu jadi menambah pengetahuan saya,,,,,
    makasih ya...

    BalasHapus
  3. ilmu yang sangat bermanfaat nich buat semua blogger,,,,
    thanks ya

    BalasHapus
  4. related post memang bagus dipasang pada sidebar
    tapi bagi sidebar yang sudah penuh dengan widget, mungkin masih kudu dipasang pada posisinya yang normal seperti dibawah posting.

    BalasHapus
  5. keren juga nih informasinya gan, aku akan cobain praktek nih, hehehe

    BalasHapus
  6. @all.
    makasih semoga bermanfaat..!
    untuk pemasangan widget memang harus dipilih sesuai kebutuhan jangan terlalu banyak..!

    BalasHapus
  7. terima kasih infonya sangat bermanfaat nih

    BalasHapus
  8. blog ane dh trlalu berat gan,,
    thxz utk info'a

    BalasHapus
  9. Anonim8/24/2011

    Keren gan, sukses gan..

    BalasHapus
Note :

. Komentar yang mengandung usur pornografi / sara / kekerasan akan dihapus.
. Terima kasih komentarnya...!
. Semoga bermanfaat...!

Nama

Aluminium,4,Amdal,15,Arsitektur,63,Bahan bangunan,8,Bangunan Air,2,budaya indonesia,26,Denah Rumah,22,Galeri,25,Green house,6,Info sekilas,27,Interior,1,Irigasi,2,Jembatan,3,K3 konstruksi,4,Konservasi tanah,5,Konstruksi,48,Konstruksi Beton,15,Konstruksi kayu,38,Kuda kuda Baja,1,Kuda kuda kayu,4,Kusen,4,Lingkungan,15,Masjid,11,Mebelair,2,Menu navigasi,3,Opini,13,Pemberdayaan Masyarakat,7,Pendidikan,3,Peraturan,31,Pondasi,4,Profil Kusen,4,Property,46,RAB,28,Rumah adat,21,S E O,7,Sambungan Kayu,30,Sertifikasi,12,sipil,53,SNI,22,Software,2,Tangga,3,Tips trik blogger,27,Undang undang,12,Wisata,2,
ltr
item
Home Design and Ideas: Memasang Related Post pada Sidebar
Memasang Related Post pada Sidebar
http://1.bp.blogspot.com/-ZIh5imJrq_0/Tgn9GnS_DtI/AAAAAAAAAUY/CRroddtA_EQ/s200/related+post+pd+side+bar.JPG
http://1.bp.blogspot.com/-ZIh5imJrq_0/Tgn9GnS_DtI/AAAAAAAAAUY/CRroddtA_EQ/s72-c/related+post+pd+side+bar.JPG
Home Design and Ideas
https://www.hdesignideas.com/2011/06/memasang-related-post-pada-sidebar.html
https://www.hdesignideas.com/
https://www.hdesignideas.com/
https://www.hdesignideas.com/2011/06/memasang-related-post-pada-sidebar.html
true
2215255630784927830
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content