Cara Membuat artikel Terkait dengan Scroll di bawah postingan Blog.

Walau mungkin cara ini sudah tidak asing lagi dan bisa di bilang jadul. Tapi tak apa mungkin sebagian dari sobat belum tahu dan ingin mempraktekkanya...hehehehe. pada dasarnya artikel terkait atau related post bisa ditempatkan di sidebar, untuk kali ini kita akan mencoba untuk menempatkan artikel terkait di bawah postingan. Untuk Contoh Lihat Screenshot di bawah ini :

sebelum mulai membuat artikel terkait ini silakan di backup dulu template Sobat. setelah itu apakah artikel Sobat sudah di categorikan/label??kalau belum coba kategorikan/label artikel Sobat dulu, karena ini sangat mempengaruhi ada tidaknya tampilan artikel terkait di bawah postingan, untuk yang sudah mengkategorikan/label artikelnya,bisa langsung membuat artikel terkait di bawah ini :

1. Login ke Blogger dengan akun gmail Sobat

2. Klik Tata Letak

3. Klik tab Edit HTML

4. Klik Expand Template Widget

5. Kemudian Cari kode yang seperti ini :

<p><data:post.body/></p> atau <data:post.body/>

atau tekan Ctrl + F untuk pencarian cepat.

6. Setelah ketemu copy/paste kode di bawah ini setelah kode <p><data:post.body/></p> atau <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<strong>Artikel Terkait di Bawah posting</strong>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='ardi33'/>
<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;ardi33&#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>

Catatan : Tulisan Berwarna Biru bisa Sobat Rubah Sesuka Sobat...

7. Save/simpan, dan kemudian lihat hasilnya.

Nah mungkin Hanya itu yang bisa saya Sampaikan, lebih dan kurangnya mohon di maafkan. Selamat mencoba dan Semoga Berhasil... :D

Baca Juga yang ini Sob...:

Tutor Blogger

• Cara Membuat Scroll pada Label Blog
• Daftar Social Bookmark Indonesia | Tutor Blogger
• Cara Mendapatkan PageRank Dari Google
• Penyebab Link in Alexa Tidak Bertambah atau No Data
• Perbedaan Menjiplak dan Meng-Copas di Blogger
• Membuat Scroll Pada Kotak Komentar Blog
• Membuat Kotak Komentar Thread Keren di Blogger
• Widget Penting yang harus ada di Blogger.
• Cara Cepat dan Mudah Mengetahui Blog Dofollow Atau Nofollow
• Tips Mendapat Backlink Berkualitas Permanent.
• Penyebab Jumlah Pelanggan Feedburner Naik-Turun
• Membuat Recent Coment avatar di Blogger
• Membuat Random Post di Blogger.
• Pentingnya Blogwalking | Tips SEO
• Di Halaman Awal/Home Blog Hanya Muncul 1 Postingan.
• Cara Scan Blog dari Virus atau Malware
• Memasang Meta tag Otomatis di setiap halaman Blog.
• Cara Membuat Link Sumber Otomatis ketika Artikel Blog di Copas.
• Berkomentar Bisa Dapat Backlink Untuk Optimasi SEO
• Membuat Thread Balas/Reply Komentar Blogger.
• Cara Membuat Tombol Shared (Daun) keren di Blog.
• Cara Menampilkan Navbar Blog secara Auto Hidden.
• Cara Membuat Box Followers Twitter di Blog.
• Cara Merubah Tulisan Posting Baru, Beranda, Posting Lama dengan Gambar.