Membuat Related Post / Artikel Terkait With Scroll Dibawah Posting

Membuat Related Post / Artikel Terkait With Scroll Dibawah Posting -  Dari judul diatas, tentu sahabat blogger sudah mengerti maksudnya. Related post atau posting terkait yang akan dibahas disini terletak dibawah posting plus menggunakan scroll supaya tidak banyak memakan banyak ruang di template blog kamu. Langsung saja lihat demonya dibawah ini :

Cara Membuat Related Post / Artikel Terkait With Scroll Dibawah Posting :

1. Login ke Blogger
2. Klik Design > Edit HTML 
   (sebelumnya backup template terlebih dahulu)
3. Klik Expand Widget Template
4. Letakkan kode dibawah ini diatas kode ]]></b:skin>
   
   #artikel-terkait{background-color:#F0F0F0; border:solid 1px #DEDEDE; padding:10px}
   
   Catatan : Jika perlu ganti kode berwarna merah dengan warna background serta border yang sesuai dengan template kamu
5. Selanjutnya cari kode <p><data:post.body/></p> dan letakkan kode berikut dibawahnya
   
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <br/>
   <div class='similiar'>
   <div class='widget-content' id='artikel-terkait'>
   <div style='width:100%; height:190px; overflow: auto;'>
   <div id='data2007'/>
   <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>
   </div>
   </b:if>
   
   Catatan : Kode yang berwarna merah merupakan kode panjang dan lebar space dari widget related post ini, silahkan sesuaikan dengan template kamu
6. Simpan Template

Sumber : http://kangamphi.blogspot.com/

Posted in: Tutorial Blogging