Cara Membuat Widget Artikel Yang Berhubungan (Related Post) - Blog Kang Fatur
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

Cara Membuat Widget Artikel Yang Berhubungan (Related Post)

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

9 comments:

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

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

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

    ReplyDelete
  4. makasih gan..! sangat bermanfaat

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

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

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

    ReplyDelete

Subscribe Our Newsletter

Notifications

Disqus Logo