Februari 18, 2012

Cara Buat Artikel Terkait Di Sidebar

Cara Buat Artikel Terkait Di Sidebar. Mau coba buat widget yang satu ini, seperti yang ada di sidebar blog ini. Gampang-gampang susah sih, tapi asal teliti pasti berhasil. Karena yang berhasil pasang widget ini jauh lebih banyak ketimbang yang tidak berhasil. Mungkin karena agak sedikit muter-muter alias tuing-tuing cara penerapannya. Ok dicoba ajah dulu yah.

Langkah-langkahnya Cara Buat Artikel Terkait Di 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>
    <!-- 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
Demikian cara membuat related post atau artikel terkait di sidebar, smoga bermanfaat tuh.




referensi:
http://www.bamz.us

1 komentar:

Copyright © / dillablog

Template by : Urang-kurai / powered by :blogger