Kingarif86.blogspot.com - Pada tulisan ini akan share tentang tutorial cara membuat related post sebagai widget. Membuat related post dengan widget ini bukan hanya untuk pengguna blog berplatform wordpress saja. Sekarang ini, pengguna blog berplatform Blogspot pun bisa membuat related post tampil di sidebar blogspot, memang jaman sudah canggih sob apa ja bisa dibuat. Tidak Seperti halnya WordPress yang mempunyai Tag dan Category yang bisa digunakan sebagai acuan untuk related post, pada blogspot hal ini menggunakan pemanfaatan dari Label saat kita update posting. Related Post akan menunjukkan/mencari posting mana saja yang dianggapnya mempunyai label sama.
Kebanyakan basa-basinya nech....(hehehe). Mari kita langsung saja bahas tutorial Cara Membuat Related Post Widget di Blogspot
Sebelum mulai sebaiknya sobat lihat dulu contonya disini
1. Tentunya sobat Login dulu ke akun blogger sobat, kalau tidak login ya tidak bisa jadi dunk tutorialnya...hehehe
Kebanyakan basa-basinya nech....(hehehe). Mari kita langsung saja bahas tutorial Cara Membuat Related Post Widget di Blogspot
Sebelum mulai sebaiknya sobat lihat dulu contonya disini
1. Tentunya sobat Login dulu ke akun blogger sobat, kalau tidak login ya tidak bisa jadi dunk tutorialnya...hehehe
2. Klik Rancangan/Layout kemudian sobat masuk ke Edit HTML
Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.
3. Masukkan kode script berikut sesudah tag <head> dan sebelum tag </head> atau diatasnya seperti contah 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><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><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> Catatan : kode yang berwarna merah adalah jumlah maxsimal postingan atau related posts yang akan ditanyangkan, sobat bisa ganti kode tersebut sesuai pilihan sobat
7. Selanjutnya sobat klik Page Elements dan add a new HTML/Javascript widget. beri judul atau title Title Related Post. kemudian copy paste kode di bawah ini pada kotak yang tersedia
<script type="text/javascript">removeRelatedDuplicates();printRelatedLabels();</script><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>Jika sobat berhasil tinggalkan komentar sobat disini. Akhir kata saya mengucapkan selamat mencoba.
0 komentar:
Posting Komentar