-->

Cara Membuat Artikel Terkait Dengan Scroll

Cara Membuat Artikel Terkait Dengan Scroll - Artikel terkait atau related post adalah kumpulan artikel yang berhubungan atau yang terkait dengan label sobat. Nah untuk sobat yang belum pernah memasang artikel terkait dan ingin memasangnya silahkan ikut cara saya yang di bawah ini. oya, seperti judul yang telah saya buat di atas artikel terkait yang akan saya share kali ini menggunakan scroll, seperti gambar di bawah ini..

arikel terkait

Ok langsung saja.
1. Login ke blog sobat terlebih dahulu.
2. Klik Template
untuk menjaga dari hal-hal yang tidak di inginkan sebaiknya biasakan back up terlebih dahulu template sobat sebelum mengedit html
3. Klik edit HTML, kalau sudah terbuka centang Expand Template Widget
4. Cari code <data:post.body/>
5. Copy kode di bawah ini, Lalu paste/letak kan tepat di bawah code tadi.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<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>

6. Klik Save Template.
selesai

Selanjutnya coba buka artikel sobat, di bawah postingan sekarang sudah terpasang artikel terkait dengan scroll..
ok mungkin segitu aja dulu Cara Membuat Artikel Terkait Dengan Scroll
selamat mencoba dan semoga berhasil.
silahkan baca juga artikel saya tentang Cara Menghapus Broken Link Di Blog

20 Responses to "Cara Membuat Artikel Terkait Dengan Scroll"

  1. kalau pakai scroll bisa hemat tempat dong :)

    ReplyDelete
  2. warnanya juga sama seperti screenshot itu ya mbak?? kalau modifikasi yang mana donk??

    ReplyDelete
  3. asik nih artikelnya, bisa ipraktekkan di blog saya :) thanks ya atas sharing info tutorialnya

    ReplyDelete
  4. Kalau langsung edit widgetnya bagaimana gan?

    ReplyDelete
  5. mantep juga sarannya..makasih ya

    ReplyDelete
  6. kl bkin kotak komenter dgn scroll gmn Sob..?
    makasih Sob....

    ReplyDelete
  7. nice share gan, tapi saya pengguna hape, dan masih awam dg code wml, hingga mustahil rasanya tuk copas script sebanyak itu dari opmin

    ReplyDelete
  8. @BlogS of Hariyanto: benar sob..:D

    @PUISI DAN PENDIDIKAN : iya sob warna nya sama seperti screen shot..
    kalau sobat mau modif warna background silahkan tambah background:#00ff00; (warna hijau)
    solid #ccc; DISINI '>

    @Made Budi : sama-sama sob

    @SR11 : maksudnya edit widget gi mana sob..?

    @tik tok : sama-sama sob makasih sudah mampir.

    @Nakusan Computer : sama-sama sob.
    insya allah laen waktu saya akan membuatnya sob.

    @pranamoelya : ga papa sob laen waktu bisa mampir lg kok..
    kita sama" msh belajar kok sob jadi ga ada yg namanya awam-awaman..hehe

    ReplyDelete
  9. Terimakasih informasi nya gan, sangat bermanfaat nice post :)
    ditunggu kunjungan baliknya yaah ,

    ReplyDelete
  10. langsung dicoba nih.....reima kasih untuk info yang sangat bermanfaat ini.
    sukses buat anda....

    ReplyDelete
  11. dapet banyak space untuk diisi dengan konten yang lain. :)

    ReplyDelete
  12. Support me too! http://robby-lim.blogspot.com/

    ReplyDelete
  13. wah...menarik nih...nambah ilmu lagi nih...

    ReplyDelete
  14. d tunggu artikel terbarunya Sob...

    ReplyDelete
  15. wah tambah ilmu baru..
    nice sharing :)

    ReplyDelete
  16. salam kenal dari blogger pemula...
    saya follow blog disini untuk mendapatkan artikel dan tutorial terbaru.
    mohon dukungannya ya sob...thanks

    ReplyDelete
  17. haahhaiiii.. berhasil gan.

    thanks banyak yak.
    kunjungi blogg ane gan, biar rejeki nya tambah nompolk.

    ReplyDelete

Sebelum memberikan komentar harap di baca dulu


1. komen lah sesuai artikel yang sedang dibahas
2. Jangan Memasukan Link Aktif,
3. Komentar Singkat yang tidak relevan tidak akan di Publikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel