Cara Membuat Widget Artikel Yang Berhubungan (Related Post)

Published by Kang Fathur Sunday, February 20, 2011

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