33 Cara Membuat Scroll Pada Related Post

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Awalnya alasan membuat scroll pada artikel terkait/ related post diblog ini karena pada postingan anaa cara membuat scroll pada daftar komentar sebelumnya bermaksud agar bisa dikit menghemat halaman dan tampilan lebih apik tidak dijejali dengan daftar komentar yang panjang.... tapi komentar dari sahabat blogger (ukhty Narti) yang menanyakan bagaimana agar daftar komentar tidak masuk dalam scroll membuat anaa berpikir kembali. Benar juga ada baiknya kolom untuk menuliskan komentar tidak masuk dalam scroll selain justru lebih apik, sangat membantu sahabat blogger yang masih baru (padahal asli anaa satu diantaranya) untuk tidak bingung saat ingin menuliskan komentarnya harus nyari nyari, apalagi kalau belum ngerti scroll? Karena kolomnya 'sembunyi' didalam scroll & terletak paling bawah dari daftar komentar.

 

Jadinya untuk tujuan yang sama ketika anaa hendak membuat scroll pada daftar komentar , sekarang anaa buat scroll pada artikel terkait/ related post dan menghapus scroll pada daftar komentar, kecuali anaa dah temukan cara membuat scroll pada daftar komentar tanpa memasukkan kolom komentarnya dalam scroll, duh dah otak-atik, search digoogle belum nemu caranya. Ada sahabat yang tahu?

Nah seperti biasa kalau dah nemukan ilmu ngeblog anaa buat postingannya, tentu setelah anaa berhasil mempraktekinnya sendiri diblog ini atau blog anaa lainnya tempat nguji coba.

 

Jadi panjang ceritanya? Berikut membuat scroll pada artikel terkait/ related post

image

1. Loggin ke blogger=> Klik layout=> Edit HTML=> Klik Expand Template Widget=> Cari kode 
<data:post.body/>

Kalau sudah ketemu, copi dan pastekan script/ code berikut dibawah kode 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 = 10;
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>

2. Selanjutnya cari kode ]]></b:skin>
3. JIka sudah ketemu copy dan pastekan code berikut diatas code tadi.


.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);}

4. Simpan template

Selesai, sobat telah membuat scroll pada artikel terkait/ related post pada blog sobat, lihat hasilnya!  Semoga membantu. Untuk mengganti background colornya bisa melihat codenya disini


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

33 komentar :

  1. asslmkum wr.wb
    wah siip banget sangat bermanfaat bagi blogger yg menginginkan posting mudah di akses..thnxs n good luck ya

    BalasHapus
  2. wslmun'alaik. warohmatullahi. wabarokatuh
    jazaakillahu khaeran jg tas apresiasinya ukhty! barakallahu fiik

    BalasHapus
  3. makasih tutorialnya mba...
    sangat bermanfaat...

    BalasHapus
  4. aduh aku pusing liat kode html yang kaya gtuann
    blog aku simple aj. g usah banyak yang aneh aneh dah..
    hehehehee

    BalasHapus
  5. thanks komentx, pusing? anaa malah senang ngedit ccs, heh (smile).

    BalasHapus
  6. Sangat menarik. Tentunya akan membantu membuat ruang blog menjadi lebih efektif :)

    BalasHapus
  7. manmtab blog q juga dah tak pasang cuma g tak kaih scrol......

    BalasHapus
  8. dengan memakai scroll pada daftar related post yang panjang jelas akan membuat ruang blog jadi lebih hemat, tp kembali ke sobat mau pasang atau tdk?

    BalasHapus
  9. thanks infonya sob.. ini dia yg dr dulu aku cari..

    http://mangkasarakku.blogspot.com/

    BalasHapus
  10. sama2 thanks jg komentarx!

    BalasHapus
  11. Aku suka ne posting!!!
    Permisi mo copy paste ke blogku buat bagi2 info ke yang laen. But don't worry, aq kasi link kok posting originally dari blog ini.
    Makasi banyak :)

    BalasHapus
  12. Assalamu'alaikum,

    Awalnya saya gagal karena ada 3 kode "" yang sama dan saya salah menempatkan tapi sekarang sudah 100% berjalan normal.

    Oh..ya....Saya cari-cari dimana page "about me" blog ini ya?, soalnya saya ingin mengenal lebih jauh authornya.

    Terima kasih tipnya.

    BalasHapus
  13. @ Oen: Wa iyyak

    @ Yuda: Wassalam. Profil ada tu. makasih jg apresiasinya!

    BalasHapus
  14. Assalamu'alaikum,

    Oh.. ya maaf profilenya gak kelihatan (di bawah).
    Saya kira anda pria ternyata Female.

    Salam kenal aja buat Akhwat Amatullah Syukur di Madinah.

    Terimakasih banyak atas tutorialnya.

    BalasHapus
  15. Wa'alaikumslm. Terimakasih jg apresiasinya

    BalasHapus
  16. Wah..... keren banget tutornya.....dan sangat bermanfaat untuk saya, terima kasih semoga sukses

    BalasHapus
  17. thanks banget ne infonya,,,akhirnya lengkap sudah blogku...

    BalasHapus
  18. sangat bermanfaat bagi kami yg newbie :) btw, blog yg sangat inspiratif, mau tukeran link gak

    BalasHapus
  19. Assalamulaikum wr. wb.
    Alhamdulillah setelah vacum sekian lama. Ane bisa ngeblog lagi ni mbak. Apakabar? Makin keren aja ni blog mbak...

    BalasHapus
  20. Assalamulaikum wr. wb.
    Alhamdulillah setelah vacum sekian lama. Ane bisa ngeblog lagi ni mbak. Apakabar? Makin keren aja ni blog mbak...

    BalasHapus
  21. Alhamdulillah aku berhasil membuat artikel terkait dengan scroll. Makasih atas share nya.

    BalasHapus
  22. Wow!! trik yang bagus, akan saya coba, nanti kalau berhasil saya kabari lagi. Bagus-bagus-bagus!!

    BalasHapus
  23. Terimakasih Ilmunya. Sudah dipasang tuh...

    BalasHapus
  24. mantaps gan ilmunya..

    mampir ke blog ane gan..mohon penilaian hehe..
    biar bisa memotivasi ane hehe..

    luthfi-mr.blogspot.com

    BalasHapus
  25. Gan semoga di blog saya kok ada semaca sidebarnya ya gan....? masak jadi sidebar si. mohon dilihat gan. ini disini, http://www.ikaa-jogja.blogspot.com
    mohon bantuannya

    BalasHapus
  26. Thanks gan atas infonya ?!!

    Kunjung balik dong ke http://schatzraka-share.blogspot.com

    Ok.

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!