Membuat related post dengan scroll

Barangkali istilah related post atau posting terkait sudah tidak asing lagi bagi teman-teman. Walaupun begitu, saya tetap menuliskan cara membuat related posts fungsi scrolling. Dengan mengaktifkan fungsi scrolling pada widget related posts maka pengunjung tidak lagi merasa terganggu dengan artikel-artikel terkait yang terlalu kepanjangan ke bawah. Apalagi widget related post ini diletakkan di bawah posting. Tertarik ingin memasang related post fungsi scrolling? Tapi tunggu dulu.. Jika anda terlanjur memasang widget related post lama yang pernah saya tulis, maka harus dihapus dulu. Bingung cara menghapusnya? Caranya lakukan dengan alur mundur (dari bawah ke atas) dengan mengikuti petunjuk dari posting saya yang sebelumnya.

Related post fungsi srolling memangnya gimana sih? Oke, biar gampang bisa dilihat seperti gambar di bawah ini :





Di gambar tampak ada scroll yang bisa dinaik-turunkan untuk melihat posting-posting yang terkait. Oke, langsung saja ke cara pasang widget related posts dengan fungsi scrolling di bawah posting blog anda.

1. Login ke blogger dengan id anda
2. Klik Rancangan
3. Pada tab menu, pilih Edit HTML
4. Centang kotak kecil Expand Template Widget
5. Cari kode <p><data:post.body/></p>
   Letakkan kode berikut di bawah kode tadi :
   
   
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <H2>Related Post:</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 = 50;
   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. Jika sudah, sekarang cari kode ]]></b:skin>
   
   
7. Letakkan kode berikut di atas kode tadi :
   
   
   /*-- modifikasi related posts oleh http://infonetmu.blogspot.com--*/
   .rbbox{border: 1px solid #D8D8D8;padding: 5px;
   background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
   .rbbox:hover{background-color: #EFFBEF;}


8. Klik SIMPAN TEMPLATE
9. Selesai
   

Disana ada tulisan Related Post yang bisa diganti dengan teks favorit anda. Untuk kode warna juga demikian, sesuaikan dengan desain template anda. Sekarang coba lihat salah satu posting anda. Maka related posts dengan fungsi scroll akan berada di bawah posting. Tampilannya pun lebih cantik dengan kotak yang mengelilingi widget ini. Mudah bukan, oke selamat mencoba.


BACA JUGA!
- Cara memasang google Translate bendera
- Menampilkan kode html dengan kotak background
- Mengganti Tulisan Posting Lama dan Posting Baru dengan gambar
- Cara Menghilangkan Tulisan Subscribe To Post (Atom) Blog
- Cara membuat related post bergambar
- Cara membuat tag cloud
- Membuat header menjadi dua kolom
- Membuat buku tamu/shoutmix tersembunyi
- Tabel kode warna css
- Cara mudah Memasang shoutmix bersama
- Cara memasang widget alexa pada blog
- Cara meningkatkan alexa rank blog
- membuat kotak daftar isi blog
- Cara Mengukur seberapa berat blog/web kamu
- Cara supaya domain co.cc bisa diakses tanpa www(redirect tanpa www)
- Merubah Domain Blogspot menjadi co.cc
- Membuat scroll pada komentar blog
- Fungsi Gadget Followers pada Blog
- Cara mudah memasang meta tag blogger
- Mengubah tampilan iklan kumpulblogger