Header Ads

Cara Membuat Fungsi Scroll pada Daftar Komentar Blog

Cara Membuat Fungsi Scroll pada Daftar Komentar Blog

Bila komentar-komentar yang telah diberikan oleh para pengunjung blog sudah cukup banyak, tentunya hal ini akan membuat daftar komentar menjadi memanjang ke bawah. Belum lagi ditambah komentar-komentar dari sang pemilik blog karena merespon komentar-komentar dari pengunjung tersebut. Hal ini membuat halaman blog menjadi sangat panjang karena sudah banyaknya komentar sehingga terkesan memakan tempat.

Untuk mengatasinya kita dapat menggunakan fungsi scroll pada daftar komentar tersebut seperti yang terlihat pada gambar di atas. Caranya adalah dengan menambahkan kode CSS pada HTML template blog kita. Berikut ini adalah langkah-langkah membuatnya. Cara di bawah ini masih menggunakan antarmuka Blogger yang lama.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat backup template. Gunanya untuk berjaga-jaga kalau nanti terjadi kesalahan dalam pengeditan, kita dapat dengan mudah mengembalikan template seperti semula.

4. Beri tanda centang pada Expand Template Widget.

5. Cari kode yang mirip-mirip dengan kode di bawah ini.

#comments h4 {
color:#666666;
font-weight:normal;
letter-spacing:0.2em;
line-height:1.4em;
margin:1em 0;
font-size:14px;
text-transform:none;
}

6. Kemudian letakkan kode berikut di atas kode tersebut.

#comments {
height:400px;
overflow:auto;
}

Sehingga susunan kodenya menjadi seperti di bawah ini.

#comments {
height:400px;
overflow:auto;
}
#comments h4 {
color:#666666;
font-weight:normal;
letter-spacing:0.2em;
line-height:1.4em;
margin:1em 0;
font-size:14px;
text-transform:none;
}
  • height:400px; menunjukkan tinggi scroll sebesar 400 piksel. Anda dapat mengubahnya sesuai keinginan Anda.
7. Selanjutnya cari kode yang mirip dengan kode di bawah ini. Intinya cari kode yang ada id='comments-block'-nya.

<b:if cond='data:post.numBacklinks != 0'>
     <dl class='comments-block' id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
          <dt class='comment-author' id='comment-author'>
            <a expr:name='data:comment.anchorName'/>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
          </dt>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
          <dd class='comment-footer'>
            <span class='comment-timestamp'>
                <i><data:comment.timestamp/></i>
              <b:include data='comment' name='commentDeleteIcon'/>
                </span>
          </dd>
        </b:loop>
      </dl>
  </b:if>

8. Lalu tambahkan kode <div style='overflow:auto; width:ancho; height:400px;'> di atas kode <dl class='comments-block' id='comments-block'> dan tambahkan kode penutup </div> di bawah kode </dl> sehingga hasilnya akan menjadi seperti di bawah ini.

<b:if cond='data:post.numBacklinks != 0'>
<div style='overflow:auto; width:ancho; height:400px;'>
     <dl class='comments-block' id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
          <dt class='comment-author' id='comment-author'>
            <a expr:name='data:comment.anchorName'/>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
          </dt>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
          <dd class='comment-footer'>
            <span class='comment-timestamp'>
                <i><data:comment.timestamp/></i>
              <b:include data='comment' name='commentDeleteIcon'/>
                </span>
          </dd>
        </b:loop>
      </dl>
</div>
  </b:if>

9. Klik tombol SIMPAN TEMPLATE.

10. Selesai dan lihat blog Anda.


Bila Anda ingin menambahkan border atau garis tepi pada fungsi scroll seperti yang terlihat pada screenshot di atas, maka tambahkan kode border:1px solid #ccc; setelah kode overflow:auto; sehingga susunan kodenya akan menjadi seperti di bawah ini.

#comments {
height:400px;
overflow:auto;
border:1px solid #ccc;
}

  • border:1px solid #ccc; merupakan garis tepi atau border dengan ketebalan 1 piksel bergaya solid berwarna #ccc;

17 comments:

  1. terima kasih atas kunjungannya ya juragan? saya kopy naskah ini, mudah-mudahan ada manfaat, salam dari kami sekeluarga buat juragan sekeluarga semoga selalu sehat dan sejahtera... amin

    ReplyDelete
  2. @info toko surya62 Sama-sama gan.. dan terima kasih atas doanya..

    ReplyDelete
  3. Makasih ya mas atas postingannya...
    umpan balik mas ke blog ku :
    http://blogadexme.blogspot.com

    ReplyDelete
  4. makasih bung... mau nyobain ei..

    ReplyDelete
  5. saya berterima kasih dengan anda.. udah sukses...

    ReplyDelete
  6. @®obinhut Terima kasih juga bung udah ke sini lagi..

    ReplyDelete
  7. Mantab gan, saya coba, tp error..gmn yah???komentnya jadi gak sempurna...

    Oh ya salam kenal n sukses selalu ya...

    Sekalian follback yah..hehe...

    ReplyDelete
  8. Nice info agan...thanks!
    kalau berkenan jangan lupa blogwalkingnya..!
    salam "blogadexme".
    Thanks!

    ReplyDelete
  9. ko di template saya gak ada ya gan scrip nya...?

    ReplyDelete
  10. ada gak script buat scroll pada kotak komentar bukan pada hasil komentar orang.. karena publiser tempat ane kagak kelihat....

    ReplyDelete

Comment Policies:

1. NO SPAM
2. NO LIVE LINK

Any violation will be deleted within 24 hours, thanks for your attention.

Template images by Ollustrator. Powered by Blogger.