Cara Membuat Related Post Widget di Blogspot
Maret 06, 2011
Edit
Pada belajar blogspot kali ini saya akan membuat tutorial tentang cara membuat related post widget . Membuat related post bukan hanya monopoli pengguna blog berplatform wordpress saja. Sekarang ini, pengguna blog berplatform Blogspot pun bisa membuat related post tampil di sidebar blog mereka. Tidak Seperti WordPress yang mempunyai Tag dan Category yang bisa digunakan sebagai acuan untuk related post, pada blogspot prinsip ini menggunakan pemanfaatan dari Label saat kita posting. Related Post akan menunjukkan posting mana saja yang mempunyai label sama.
Yuk kita langsung aja bahas Cara Membuat Related Post Widget di Blogspot
- Login ke akun blogger anda, pilih blog yang ingin anda edit, klik link Layout kemudian masuk keEdit HTML
- Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.
- Masukkan kode script berikut sesudah tag <head> dan sebelum tag </head> seperti dibawah ini:
- Kemudian cari kode widget seperti 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>- Pada Script diatas, tambahkan script yang dicetak tebal seperti dibawah ini
- Save template
- kemudian buka Layout -> Page Elements dan add a new HTML/Javascript widget. beri judul atau title Title Related Post. kemudian copy paste script di bawah ini pada kotak yg disediakan :
- Sekarang kembali lagi ke Layout -> Edit HTML, centang/tandai/aktifkan Expand Widget TemplatesUntuk bisa mengedit template secara keseluruhan, kemudian cari HTML/Javascript widget Related Post yang kita add. Tambahkan baris yang berwarna merah seperti dibawah ini :
- Klik Save dan lihat hasilnya.
<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><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>