Cara Menghasilkan Related Articles Pada Blog Dengan Fungsi Scroll

Salam gedek sob :) udah banyak mungkin ya mengenai cara menghasilkan related article atau related post pada blog. Tapi dari sekian banyak contoh, ane nemuin satu metod related article yang bagus, plus ruingan, ga cuma ringan tetapi ruingan jadi teman dekat ga usah kalut loading blog bakalan lemot. Pengunjung betah, mbah google pun betah hahaha...

Cara menghasilkan related articles pada blog dengan fungsi scroll

Ikuti tindakan berikut:

1. Login ke akun blogger kalian lalu masuk suguhan Design - Edit HTML/Edit Template
2. Ceklist expand template widget
3. Sebelum melakukan penambahan didalam template, semestinya backup dahulu template kalian, gunanya untuk mengembalikan template terhadap kondisi semula jikalau terjadi kesalahan, caranya dengan mendownload full template
4. Temukan arahan <data:post.body> dan letakan arahan 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 arahan ]]></b:skin> dan tempatkan arahan 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 arahan yang berwarna merah silahkan teman dekat sesuaikan sendiri.
Praktis kan cara menghasilkan related article pada blog dengan fungsi scroll? Sobat juga dapat menyaksikan postingan lain mengenai cara menghasilkan related posts dengan versi simple, silahkan teman dekat cari di blog ini. Atau mungkin teman dekat punya cara yang lebih efektif? :)

Share this post