Cara Pasang Related Posts Model Scroll

Untuk menambah agar pengunjung lebih betah adalah dengan memasang related post diakhir tulisan posting kita, agar pembaca dapat melihat artikel yang berkaitan dengan post tersebut.

Banyak sekali tutorial yang mengangkat tema ini, kali ini saya juga posting related post dengan modifikasi scroll, sehingga tidak memakan tempat dan enak dilihat.

1. Sebelumnya anda backup template anda dengan mendownloadnya, ini untuk berjaga-jaga kalau tidak berhasil anda dapat mengembalikan template asli anda.
   
   
2. Login blogger - layout - edit html
3. Beri tanda centang pada Expand Template Widget.
4. Silahkan adan cari kode berikut dalam html anda
   ]]></b:skin> 
   (gunakan tomblo Ctrl + F untuk pencarian)
5. Diatas kode tadi (pada nmr 4) taruh kode ini: /* Related Post */
   #underpost{
   font-family:Arial, Tahoma, Verdana, Sans-serif;
   font-size:small;
   color:#cc6600;
   background:#f1f1f1;
   clear:both;
   float:left;
   width:450px;
   -moz-border-radius:10px;
   border:0;
   height:auto;
   margin:0 auto;
   padding:10px;
   }
   #underpost h2{
   font-family:'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
   font-size:large;
   color:#003300;
   margin-bottom:5px;
   border-bottom:1px solid #cccccc;
   padding:0 0 5px;
   }
   #underpost a,#underpost a:link,#underpost a:active,#underpost a:visited{
   color:#cc6600;
   text-decoration:none;
   }
   #underpost a:hover{
   text-decoration:underline;
   }
   #artikel-terkait{
   overflow:auto;
   width:auto;
   height:200px;
   padding:10px;
   }
   
6. Langkah selanjutnya cari kode berikut <p><data:post.body/></p>
7. Kemudian letakkan kode berikut dibawah kode tadi (nomer 6)<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='underpost'>
   <div class='similiar'>
   <div class='widget-content'>
   <h2>Artikel Menarik Lainnya</h2>
   <div id='artikel-terkait'>
   <div id='relposts'/><br/><br/>
   <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;relposts&#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>
   </div>
   </b:if>
8. Terakhir simpan dan lihat hasilnya, untuk mengembalikan template seperti semula silahkan upload kembali template asli anda yang telah anda download pada awal tadi.
9. Selamat mencoba. Sumber : http://www.pancatunggal.info/2011/07/cara-pasang-related-posts-model-scroll.html

Artikel Terkait:

Blog

• Jquery Multi Level Menu Horizontal
• Membuat Tepi Gambar Bershadow Dengan CSS 3
• Cara Memasang Optimasi Template Menjadi SEO Friendly
• Cara Memasang Meta Tag SEO Friendly
• Membuat Gambar Slider Carousel Otomatis Berdasarkan Label
• Cara Gampang Memasang/Membuat Tab Menu Tanpa Edit HTML
• Membuat/Memasang Recent Comment Dengan Jquery pada Blog
• RPP Membukukan penyesuaian kas di bank
• Cara membuat/memasang Menu Tersembunyi Unik dengan CSS
• Widget Sharing Is Caring - Cara Memasang Widget Caring Is Sexy
• Cara membuat Buku tamu melayang Dengan Light Effect jQuery
• Cara Membuat/Memasang Menu Tab View di Blog
• Cara Membuat Gambar Berdampingan pada posting
• Cara Membuat Menu Horizontal Drop Down Dengan Animasi
• Cara Memasang Menu Horizontal Kwicks JQuery Slide
• Cara mudah memasang Iklan diatas postingan
• Cara Mendapatkan Google Adsense lewat Docstoc
• Cara Membuat Sitemap Blog
• Membuat Iklan Berdampingan
• Cara Pasang Meta Tag SEO pada Blog
• Cara Mudah Membuat Kotak Komentar Facebook di Blogger
• Cara Mendaftarkan Blog di Webmaster Google
• Cara Membuat Artikel Terkait Dengan Fungsi Scroll
• Cara Membuat Dan Memasang Scroll Pada Label Kategori Blog
• Mengatur Jumlah Posting Pada Halaman Label (widget)