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 != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&callback=related_results_labels&max-results=10"'
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.
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 != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&callback=related_results_labels&max-results=10"'
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.
Tags:
Blogspot
Thanks infonya sobat.. punyaku kalau di opera n chrome gak mau tampil tuh.. heran juga.. kalau pakai ff atau IE mau.. pusiiing
BalasHapusmasa 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!
BalasHapusmakasih infonya, sekarang lagi belajar wp
BalasHapusmas, nanya donk
BalasHapuscaranya bikin kolom categori blogspot biar ada scroll-nya gmana yah..?
Halo mas taufan salam kenal! coba di link di bawah ini
BalasHapushttp://piss-blogger.blogspot.com/2010/01/cara-membuat-widget-scrolling-atau.html
di coba mas!
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..
BalasHapusYups saya dah pake juga sob.. emang perlu nih pasang related post... walau agak22 nambah berat ya..
BalasHapussaungweb!, di sebelah kanan atas sob, munculnya kecil seperti google search!
BalasHapuslink Tea!, wah perlu bgt tuh untuk mempermudah pengnjung! blog kita.
Thx info-na sob
BalasHapus