Cara Membuat Related Post Widget di Blogspot

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 ke Edit 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:
    <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>
  • Pada Script diatas, tambahkan script yang dicetak tebal 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: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
  • 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 :
  • <script type="text/javascript"> removeRelatedDuplicates(); printRelatedLabels(); </script>
  • Sekarang kembali lagi ke Layout -> Edit HTML, centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan, kemudian  cari HTML/Javascript widget Related Post yang kita add. Tambahkan baris yang berwarna merah seperti dibawah ini :
  • <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>
  • Klik Save dan lihat hasilnya.

Sumber : Belajarngeblog.com
Share on Google Plus

About Admin

Cara adalah blog referensi tentang berbagai cara cara yang kita butuh kan dalam kehidupan sehari. Semoga bisa menjadi sumber bacaan yang yang menyenangkan. Terima Kasih telah berkunjung. :D

0 comments:

Post a Comment