Minggu, 25 Maret 2012

Cara Membuat Artikel Terkait di Sidebar

Mungkin sebelumnya saya juga pernah menjelaskan cara membuat artikel terkait/Related post di bawah postingan dan pernah juga cara membuat artikel terkait/related post dengan scroll box.dan sekarang sedikit berbeda dari sebelumnya yaitu cara membuat artikel terkait di sidebar.Adanya widget artikel terkait ini dapat memudahkan pengunjung menjelajahi blog kita terutama untuk artikel yang berkaitan.dan apa jadinya bila blog kita dengan menggunakan artikel terkait/related post ini pasti para pengunjung akan meninggalkan blog kita karena bisa melihat info info lainnya yang berkaitan dengan artikel yang dibaca pengunjung blog tersebut.
Nah,berikut Cara Membuat Artikel Terkait di Sidebar :


1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk mengantisipasi jika nanti terjadi kesalahan dalam pengeditan kita dapat dengan mudah mengembalikan template ke seperti semula.

4. Klik Expand Template Widget.

5. Cari kode </head>. Untuk mempercepat pencarian, silakan tekan Ctrl + F lalu masukkan kodenya.

6. Copy kode di bawah ini dan paste di atas kode tersebut.

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

7. Selanjutnya cari salah satu kode dibawah ini yang mirip.karena setiap template berbeda-beda.

  • <div class='post-footer-line post-footer-line-1'>
  • <div class='post-footer-line post-footer-line-2'>
  • <div class='post-footer-line post-footer-line-3'>

8. Copy kode dibawah ini dan paste dari salah satu kode diatas.

<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>
  • 15 Banyak artikel dalam satu gadget bisa anda ganti dengan selera anda.
9. SIMPAN

Belum selesai sampai disitu masih di Blogger.sekarang anda ke :
  • Rancangan > Elemen laman > Tambah Gadget.
  • Di Dasar-dasar pilih HTML/JavaScript.
  • Beri Judul Artikel Terkait Lainnya.
  • Copy kode di bawah ini dan paste di kotak Konten.
<script type="text/javascript">removeRelatedDuplicates();printRelatedLabels();</script>

SIMPAN

1.Sekarang kembali ke Edit HTML.

2. Klik Expand Template Widget.

3. Cari kode Artikel Terkait Lainnya.Untuk mempercepat pencarian, silakan tekan Ctrl + F lalu masukkan kodenya.
tambahkan kode dibawah ini.dibawah kode <b:includable id='main'>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

selanjutnya tambahkan kode dibawah ini dibawah kode <b:include name='quickedit'/>.

</b:if>

SEHINGGA HASILNYA :

<b:widget id='HTML2' locked='false' title='Artikel Terkait Lainnya' 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>

4. SIMPAN
di