Cara Membuat Artikel Terkait Dengan Fungsi Scroll

Artikel terkait fungsinya adalah agar setiap post/artikel yang terkait atau terbit dalam kategori yang sama, dapat ditampilkan juga dalam post yang sedang dibaca pengunjung. 

Selain itu, artikel terkait dengan scroll ini dapat menghemat tempat dan juga memasukkan berpuluh-puluh postingan tanpa batas. Jadi, dengan menggunakan artikel terkait memudahkan para pengunjung untuk melihat posting atau artikel lain yang berkaitan dengan artikel yang sedang dibaca, dalam hal ini artikel yang berkaitan sesuai dengan label atau kategori.

Berikut Screenshotnya

Dan berikut Cara Membuat Artikel Terkait Dengan Scroll Box :

1. Masuk ke akun Blogger Anda.
2. Klik Rancangan > Edit HTML.
3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk mengantisipasi jika nanti terjadi kesalahan dalam pengeditan kita dapat dengan mudah mengembalikan template ke seperti semula.
4. Cari kode <data:post.body/> Untuk mempercepat pencarian, silakan tekan Ctrl + F lalu masukkan kodenya.
5.  Jika Anda sudah menggunakan fungsi Read More, maka terdapat 2 kode <data:post.body/> pilih yang kedua. Dan jika Anda sudah menggunakan Artikel Terkait, hapus saja kode artikel terkait yang lama.
   
6. Copy kode di bawah ini dan paste di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 = 9999;
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>

Dan yang terakhir janga lupa Simpan.

Kalo misalkan ternyata tidak ada pada <data:post.body/> yang ke 2 maka sahabat sekalian bisa memindahkan script di atas ini ke bawah <data:post.body/> yang pertama. Terimakasih.

Sumber : http://aneukcabak.blogspot.com/2012/05/cara-membuat-artikel-terkait-dengan.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 Dan Memasang Scroll Pada Label Kategori Blog
• Mengatur Jumlah Posting Pada Halaman Label (widget)