22 January, 2010

Membuat Tulisan Terkait atau Related Post Bag.2

Membuat Related post atau arikel terkait atau tulisan terkait memiliki banyak versi, salah satunya yang dalam tutorial saya Membuat related post di halaman single page (di halaman posting), hayo bingung dah lo.

Kali ini kita akan membuat tulisan terkait/related post di widget sidebar kita.

Langsung saja tanpa perlu basa basi :

Langkah 1 :

Masuk/logIn ke dasbor blogger kamu KLIK Tata letak/layOut --- KLIK Edit HTML.
Kemudian beri tanda centang pada Expand Template Widget

Download Template Lengkap Untuk memback up template lama kamu.

Cari Kode :
]]></b:skin>
</head>


Untuk mempermudah Pencarian Klik F3 (Masukkan kode yang ingin di cari) Sudah ketemu, oke bagus lanjut

Copy-Pastekan Kode berikut di Tepat Atas Kode: </head> Dan tepat di bawah kode :
 ]]></b:skin>

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



Langkah 2 :
Okey kalu sudah kemudian cari Kode di bawah dan tambahkan kode yang saya beri warna merah


<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 != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name +
&quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;'
type='text/javascript'/>
</b:if>
</b:loop>
</b:if>


Sudah Beres! Simpan Templete kamu

Langkah 3 :
KLIK Tata Letak/layout --- Pilih Elemen Halaman
Tambahkan Gedget dan copy-pasteken kode di bawah, beri judul Related post atau Tulisan terkait

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

Simpan.

Untuk mencoba klik salah satu judul postingan kamu maka Tulisan terkait atau related post akan muncul.

Klik : http://xsample-blogger.blogspot.com/2010/01/google-inc.html  untuk melihat contoh.

9 comments

  1. Thanks infonya sobat.. punyaku kalau di opera n chrome gak mau tampil tuh.. heran juga.. kalau pakai ff atau IE mau.. pusiiing

    ReplyDelete
  2. masa sih!! di tempat w bisa Tea. seneng aja pake chrome simpel!! yah walau masih kalah sama FF tapi ya itu tadi simple!! he thanks kunjungannya!

    ReplyDelete
  3. makasih infonya, sekarang lagi belajar wp

    ReplyDelete
  4. mas, nanya donk
    caranya bikin kolom categori blogspot biar ada scroll-nya gmana yah..?

    ReplyDelete
  5. Halo mas taufan salam kenal! coba di link di bawah ini

    http://piss-blogger.blogspot.com/2010/01/cara-membuat-widget-scrolling-atau.html

    di coba mas!

    ReplyDelete
  6. Saya heran sob.. kalau pakai ie dan FF relatednya bisa tampil.. tapi kalau pakai opera dan chrome gak mau tampil untuk blog ku ini.. padahal sy lagi enjoy dg chrome nih..

    ReplyDelete
  7. Yups saya dah pake juga sob.. emang perlu nih pasang related post... walau agak22 nambah berat ya..

    ReplyDelete
  8. saungweb!, di sebelah kanan atas sob, munculnya kecil seperti google search!

    link Tea!, wah perlu bgt tuh untuk mempermudah pengnjung! blog kita.

    ReplyDelete


Copyright © 2016 Photoshop blog dan Blogger