Cara Membuat Widget Artikel Yang Berhubungan (Related Post)

2/20/2011 Blog Tutorial Blogger Tutorial Blogger Widget
Pada psotingan sebelumnya pernah saya bahas/ketengahkan tentang Recent Post SlideShow JQuery, namun kali ini kita akan membahas Cara Membuat Widget Artikel yang Berhubungan (Related Post).

Yang dimaksud Cara Membuat Widget Artikel yang Berhubungan (Related Post) adalah Artikel yang Berhubungan dalam satu label posting. Artinya apabila kita membaca suatu artikel maka akan tampil juga artikel lain dengan label yang sama. Perhatikan screenshot dibawah ini,



Gimana sobat sudah tahu, dan tertarik??? OK kalau begitu kita langsung ke tahap pembuatannya :

  1. Seperti biasa sobat LogIn dulu di blogger masing-masing
  2. Setelah itu klik Rancangan --> Edit HTML
  3. Kasih tanda checklist pada kotak Expand Template Widget
  4. Kemudian Sobat cari kode seperti ini <data:post.body/>
  5. Lalu Copy kode dibawah ini, dan paste dibawah kode diatas :

    <b:if cond='data:blog.pageType == "item"'>
    <div class='similiar'>

    <div class='widget-content'>
    <h3>Artikel yang Berhubungan</h3>
    <div id='data2007'/><br/><br/>
    <script type='text/javascript'>

    var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
    var maxNumberOfPostsPerLabel = 4;
    var maxNumberOfLabels = 10;

    maxNumberOfPostsPerLabel = 100;
    maxNumberOfLabels = 3;

    function listEntries10(json) {
    var ul = document.createElement(&#39;ul&#39;);
    var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
    json.feed.entry.length : maxNumberOfPostsPerLabel;
    for (var i = 0; i &lt; maxPosts; i++) {
    var entry = json.feed.entry[i];
    var alturl;

    for (var k = 0; k &lt; entry.link.length; k++) {
    if (entry.link[k].rel == &#39;alternate&#39;) {
    alturl = entry.link[k].href;
    break;
    }
    }
    var li = document.createElement(&#39;li&#39;);
    var a = document.createElement(&#39;a&#39;);
    a.href = alturl;

    if(a.href!=location.href) {
    var txt = document.createTextNode(entry.title.$t);
    a.appendChild(txt);
    li.appendChild(a);
    ul.appendChild(li);
    }
    }
    for (var l = 0; l &lt; json.feed.link.length; l++) {
    if (json.feed.link[l].rel == &#39;alternate&#39;) {
    var raw = json.feed.link[l].href;
    var label = raw.substr(homeUrl3.length+13);
    var k;
    for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
    var txt = document.createTextNode(label);
    var h = document.createElement(&#39;b&#39;);
    h.appendChild(txt);
    var div1 = document.createElement(&#39;div&#39;);
    div1.appendChild(h);
    div1.appendChild(ul);
    document.getElementById(&#39;data2007&#39;).appendChild(div1);
    }
    }
    }
    function search10(query, label) {

    var script = document.createElement(&#39;script&#39;);
    script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
    + label +
    &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
    script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
    document.documentElement.firstChild.appendChild(script);
    }

    var labelArray = new Array();
    var numLabel = 0;

    <b:loop values='data:posts' var='post'>
    <b:loop values='data:post.labels' var='label'>
    textLabel = &quot;<data:label.name/>&quot;;

    var test = 0;
    for (var i = 0; i &lt; labelArray.length; i++)
    if (labelArray[i] == textLabel) test = 1;
    if (test == 0) {
    labelArray.push(textLabel);
    var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
    labelArray.length : maxNumberOfLabels;
    if (numLabel &lt; maxLabels) {
    search10(homeUrl3, textLabel);
    numLabel++;
    }
    }
    </b:loop>
    </b:loop>
    </script>
    </div>

    </div>
    </b:if>


  6. Selelah langkah-langkah di atas selesai (beres) klik tombol Save



CATATAN! :
Sobat bisa ganti tulisan Artikel yang Berhubungan yang tercetak tebal dan berwarna merah sesuai keinginan Sobat.


Selamat mencoba semoga bermanfaat.


KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

9 comments

template baru lagi sob...tapi knpa template seperti ini yang seri donlod ada masalah dgn kotak komentar dan juga seperti ada kode2 yang meragukan.

Balas

@Seri Bahasa Ia SOB sama, makanya mending download langsung yang aslinya aja di OurBlog.com, tinggal kita edit aja.

Balas

thnx for d info.
anyway, singgah sini balik..

Balas

@Beny TrilaksanaMakasi juga kawan, sering2 aja main ke gubug ini

Balas

terima kasih ilmunya kang ...
tukar link ya kang ... suwun

Balas

temflate'x bebas kang, ato sebagian..!!

Balas