Jumat, 11 Mei 2012

Cara Membuat "Artikel Terkait" Di Sidebar Blog

Sepertinya di blog saya ini paling banyak  saya memposting masalah releted post atau post terkait Supaya pembaca / blogger lebih banyak pilihan dan alternatif lain.  . Marukkk. hehehehe.
related post 1; related post 2; related post 3; related post 4; related post 5; related post 6; related post 7; related post 8

Namun pada umunya artikel terkait atau related post biasannya terletak di bawah posting blog.Oleh karna itulah tutorial Cara Membuat Artikel Terkait Di Sidebar blog ini dibagikan agar blog anda terlihat lebih profesional dan tampil beda.Berikut turorial cara memasang related post di sidebar blog.

Cara Membuat Artikel Terkait (Related Post Di Sidebar Blog)
  • 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>


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

  • Save Template dan lihat hasilnya

Itulah cara membuat artikel terkait di sidebar blog yang membutuhkan kesabaran untuk memperoleh hasil yang lebih maksimal.Jika semuanya sudah mengerti...selamat mencoba dan semoga berhasil...

Bamz.us

1 comments: