Cara Membuat Related Articles pada Blog dengan Fungsi Scroll

Cara membuat related article atau related post adalah pembahasan kita kali ini.

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? :)