Members area : Register | Sign in
Gunakan Inspirasimu untuk tetap BerKreasi

Memasang Related Post pada Sidebar

Tuesday, June 28, 2011

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 ....!
Terima kasih atas kunjungannya, Apabila ada sesuatu yang tidak berkenan sampaikan saran dan kritik pada kolom komentar agar bisa segera dilakukan perubahan/perbaikan, Semoga bermanfaat .....!
---> Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Memasang Related Post pada Sidebar ini bermanfaat, namun jangan lupa untuk meletakkan link Memasang Related Post pada Sidebar sebagai : sumbernya.

10 comments:

agen xamthone plus batulicin said...

owh jadi seperti ya caranya,,,
oke thanks langsung saja dech dicoba....

xamthone plus said...

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

obat penyakit tipes said...

ilmu yang sangat bermanfaat nich buat semua blogger,,,,
thanks ya

AsiaCantikBlog - Cute Asian Girls Pict said...

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.

agen xamthone plus palembang said...

keren juga nih informasinya gan, aku akan cobain praktek nih, hehehe

HDideas said...

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

obat herbal diabetes melitus said...

terima kasih infonya sangat bermanfaat nih

poles marmer said...

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

jack said...

thanks :D

Olive Ridle said...

Keren gan, sukses gan..

Post a Comment

 
News by Tittle :
© Copyright Home Design Ideas 2010 -2011 | Template Design by Herdiansyah Hamzah | Published by Borneo Templates | Powered by Blogger.com