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