Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Scroll pada Related Post

embuat Scroll pada Related Post
Related post adalah salah satu widget yang pernah ditulis di blog ini sebgai widget yang sebaiknya ada di blog. Karena memiliki fungsi atau manfaat yang besar untuk blog maupun pembaca. Bagi pembaca akan mempermudah untuk mengetahui atau menelusuri tulisan yang terkait dengan yang sedang dibacanya. Kemudian bagi blog bisa membuat lebih banyak page view.

Related post yang ada di blogger.com atau blogspot yaitu related post yang didasarkan pada label. Jika dalam satu label itu banyak tulisan. Misalnya ada label Blogging ada 25 post makan saat kita membaca salah postingan akan ada 24 judul yang terkait yang ada dibawahnya, ini menyebabkan menyita banyak tempat. Oleh sebab itulah perlu kita membuat scroll pada related post.

Cara Membuat Scroll pada Related Post
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode <p><data:post.body/></p>
6. Taruh (copy paste) kode berikut di bawahnya

<b:if cond='data:blog.pageType == "item"'>  <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 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?  json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); 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 < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('albri').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); 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 = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) {  labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ?  labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </SCRIPT> </DIV> <script type="text/javascript">RelPost();</script> </DIV> </b:if><br />

7. Cari kode ]]></b:skin> dan taruh kode berikut di atasnya

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}

8. Cari kode </head> dan taruh kode berikut di atasnya

<SCRIPT src='http://ateon.fs.googlepages.com/kodescript.js' type='text/javascript'/>

9. Simpan Template jika sudah selesai.

16 komentar untuk "Membuat Scroll pada Related Post"

  1. Karena related post ku belum begitu banyak. Jadi aku belum menggunakan scroll. Tapi widget yang lain udah ku kasi scroll. Thanks infonya, mantab. Keep Writing

    BalasHapus
  2. Kalu mempercantik Scroll pada Related Post bagaimana? Yang pasang gambr di scorol itu.

    BalasHapus
  3. yang penting hapi ..... bagus sekali sob infonya . thanks www.masroid.blogspot.com

    BalasHapus
  4. boleh juga gan....saya coba untuk mempercantik blog....tks

    BalasHapus
  5. mantab tutornya.
    langsung praktek ah..
    salam kenal....

    BalasHapus
  6. kode pertama d tmpt edit template q kx g ada ta bos??np kx bisa kyk gtu??
    ~x( ~x( ~x(

    BalasHapus
  7. Assalamu'alaikum...
    Lanjutkan...bagus dan mantap tutorialnya...
    Coba praktekkan

    BalasHapus
  8. follow donk blog q ............ www.masroid.blogspot.com

    BalasHapus
  9. @Njayuz Ahmad Qolfathiriyus:

    sama ni bang punyaku juga... knapa ni.. mohon bantuannya?

    BalasHapus
  10. kok ada tulisan "Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The content of elements must consist of well-formed character data or markup."

    maksudnya bagaimana gan? :-/ :-/ :-/

    BalasHapus
  11. GAN, BISA MINTA TOLONG GAK? KALO UNTUK ORANG NULIS SEPERTI DI FACEBOOK TUH GIMANA? YANG KAYAK DIMINTA EMAIL DENGAN PASSWORD TU... KAYAK GINI JUGA

    BalasHapus
  12. sip gan informasinya,,,semoga tambah sukses,,kalu ngk keberatan mampir gan ya,walaupun cuma sekedar tengok gan,,,thanks gan

    BalasHapus
  13. wahh nambah wawasan ilmu lagin nih ..

    http://caranyablogspot.blogspot.com

    BalasHapus

Berlangganan via Email