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;