Cara Membuat Related Articles pada Blog dengan Fungsi Scroll

Cara Membuat Related Articles pada Blog dengan Fungsi Scroll - Salam gedek sob :) udah banyak mungkin ya tentang cara membuat related article atau related post pada blog. Tapi dari sekian banyak contoh, ane nemuin satu metod related article yang bagus, plus ruingan, ga hanya ringan tapi ruingan jadi sobat ga usah khawatir loading blog bakalan lemot. Pengunjung betah, mbah google pun betah hahaha...

Cara membuat related articles pada blog dengan fungsi scroll

Ikuti langkah-langkah berikut:

1. Login ke akun blogger kalian kemudian masuk menu Design - Edit HTML/Edit Template
2. Ceklist expand template widget
3. Sebelum melakukan penambahan didalam template, sebaiknya backup dulu template kalian, gunanya untuk mengembalikan template kepada keadaan semula bila terjadi kesalahan, caranya dengan mendownload full template
4. Temukan kode <data:post.body> dan letakan kode dibawah ini dibawahnya
5. <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <br/>
   <br/>
   <H2>Artikel Terkait:</H2>
   <div class='rbbox'>
   <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid
   #ccc;'>
   <div id='albri'/>
   <script type='text/javascript'>
   var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
   var maxNumberOfPostsPerLabel = 4;
   var maxNumberOfLabels = 10;
   maxNumberOfPostsPerLabel = 10;
   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;albri&#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>
   <script type="text/javascript">RelPost();</script>
   </div>
   </b:if>
6. Kemudian cari kode ]]></b:skin> dan tempatkan kode dibawah ini diatasnya
   
   .rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
   background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
   .rbbox:hover{background-color: rgb(255, 255, 255);

Catatan : Untuk kode yang berwarna merah silahkan sobat sesuaikan sendiri.
Mudah kan cara membuat related article pada blog dengan fungsi scroll? Sobat juga bisa melihat artikel lain tentang cara membuat related posts dengan model simple, silahkan sobat cari di blog ini. Atau mungkin sobat punya cara yang lebih efektif? :)

Title : Cara Membuat Related Articles pada Blog dengan Fungsi Scroll
URL : http://blogedek.blogspot.com/2011/12/membuat-related-articles-pada-blog.html
Jangan lupa untuk membagikan artikel Cara Membuat Related Articles pada Blog dengan Fungsi Scroll ini jika bermanfaat bagi sobat.