Cara Membuat Artikel Terkait di Sidebar Blog

Cara membuat artikel terkait pada sidebar blog. Membuat artikel terkait pada sidebar blogger atau blogspot tentunya lebih menarik dibandingkan artikel terkait yang sudah umum berada di bawah setiap postingan. Blog ini juga menggunakan artikel terkait dibagian sidebar kanan. Karena saya sendiri sudah mencoba pada blog ini, saya akan share cara membuat artikel terkait pada sidebar blog.

Cara membuat artikel terkait atau related post pada sidebar

• Login ke blog anda > Edit HTML > centang expand widget templates
• Cari kode </head> ( gunakan CTRL + F untuk mempermudah pencarian )
• Copy kode dibawah ini dan paste di atas kode </head>

Kode

<!-- Related Post -->
<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>

• Selanjutnya cari kode <div class='post-footer-line post-footer-line-1'> atau <div class='post-footer-line post-footer-line-2'> atau <div class='post-footer-line post-footer-line-3'>
• Pilih salah satu saja, kemudian paste kode berikut tepat dibawahnya

 <b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<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=15&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

• Kalau sudah silahkan simpan template
• Sekarang lanjut ke Page element > add a gadged dibagian sidebar kanan / kiri > pilih HTML / Javascript > Beri judul ' Artikel Terkait ' kemudian paste kode berikut pada gadget tersebut

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

• Save
• Sekarang kembali lagi ke Edit HTML > centang expand widget template dan cari title='Artikel Terkait'
• Biasanya kodenya seperti dibawah ini

<b:widget id='HTML2' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

• Sekarang anda tambahkan kode berwarna merah dibawah ini sehingga hasilnyapun seperti dibawah ini

<b:widget id='HTML2' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <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>

• Simpan template dan lihat hasilnya

Cara membuat artikel terkait atau related post

Cara membuat artikel terkait atau related post pada sidebar blog memang sedikit rumit yah? ^^. tapi tenang saja, cara ini sudah saya praktekkan sebelumnya, kalau bingung anda bisa tanya langsung pada komentar. Kelebihan membuat artikel terkait / related post semacam ini adalah artikel yang di tampilkan di random. oh iya kode yang warna hijau di abaikan saja, karena itu hanya nomor urut id widget anda. Misalkan di blog anda HTML5, jangan diganti, cukup di abaikan saja. Kode yang berwarna biru adalah jumlah artikel terkait yang ingin di munculkan. Ok itu saja langkah-langkah cara membuat artikel terkait atau related post pada sidebar blog.

Baca Juga di Blog Bamz :

http://www.bamz.us/2012/01/tutorial-dasar-blogspot.html
http://www.bamz.us/2011/11/membuat-menu-vertikal-di-blogspot.html
http://www.bamz.us/2011/11/cara-membuat-menu-drop-down-blogspot.html
http://www.bamz.us/2011/11/cara-membuat-popular-post.html
http://www.bamz.us/2011/11/cara-membuat-daftar-isi-blog.html
http://www.bamz.us/2011/11/cara-membuat-tombol-share-facebook.html
http://www.bamz.us/2011/11/meta-tags-for-seo-blogspot.html
http://www.bamz.us/2011/11/cara-membuat-artikel-terkait.html
http://www.bamz.us/2011/11/cara-membuat-breadcrumb.html
http://www.bamz.us/2011/11/cara-membuat-menu-horizontal.html
http://www.bamz.us/2011/11/cara-membuat-read-more-otomatis-di-blog.html
http://www.bamz.us/2011/11/cara-membuat-contact-us.html
http://www.bamz.us/2011/11/cara-membuat-artikel-terkait-di-blog.html
http://www.bamz.us/2011/12/cara-membuat-recent-comment-blog.html
http://www.bamz.us/2011/12/memasang-facebook-like-di-blog.html
http://www.bamz.us/2011/12/membuat-widget-recent-post-blogspot.html
http://www.bamz.us/2012/02/aktifkan-threaded-comments-blogger.html
http://www.bamz.us/2012/02/custom-design-css-threaded-comments.html
http://www.bamz.us/2012/02/menu-horizontal-keren.html
http://www.bamz.us/2012/01/membuat-navigasi-nomer-halaman-blog.html