Cara Membuat artikel Terkait dengan Scroll di bawah postingan Blog.

Written By Hanif Aghar on Sabtu, 30 Juni 2012 | 5:52 PM

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...:

6 komentar:

  1. hohohoh, di template blog ane kagak ada script ini sob...

    :D

    BalasHapus
  2. Kok gak bisa ya sob?
    Mungkin pengaruh template yg saya pake ya?

    BalasHapus
  3. berhasil bro. tapi ada sedikit masalah, tulisan yang warnanya biru udah aku rubah tapi kok gak bisa dikasih
    ya biar bisa ganti garis, soalnya gak ganti garis malah lanjut dibelakang postingan.
    tolong kasih solusi gan...

    BalasHapus
    Balasan
    1. Mungkin Kepanjangan kali Sob...
      Ato coba kasih Kode < br > "Tanpa Spasi" Sebelum kode diatas, dan simpen Kode ini < /br> "Tanpa Spasi" Di Paling Ujung/akhir dari Kode diatas...

      Terima Kasih...

      Hapus
    2. its work gan, sukses jaya sentosa hehehe.
      ternyata tadi lupa
      nya gak aku tutup pantesan gagal.
      thanks gan atas bantuannya, blog yg penuh ilmu smoga tambah ramai gan.

      Hapus
  4. Oke2 Thankss Gan
    www.fsaeshop.blogspot.com (Game'n Software)

    BalasHapus

Silahkan Tulis Komentar, Kritik dan Saran Anda di Sini. Namun saya Mohon untuk tidak menggunakan komentar spam dan berkomentarlah yang sopan. Link aktif dari sumber lain yang ditulis pada kotak komentar akan saya Hapus. Terima kasih..

 
berita unik