Cara Membuat Fungsi Scroll pada Daftar Komentar Blog

B
ila 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;

Related Posts:

  • Test Kecepatan Loading BlogDemi kepuasan pengunjung web kita banyak diantara anda berusaha keras untuk menata penampilan blog seindah mungkin bahkan tidak jarang diatara anda tidak memperhatikan kecepatan loading blog anda. Hal inilah yang akan menjadi… Read More
  • Membuat Blog dalam Mode MaintenanceTerkadang diantara kita senang dengan mengotak-ngatik blog agar menjadi enak dilihat dan nyaman digunakan. Namun dengan mengotak-ngatik justru pembaca blog kita akan merasa kurang nyaman ketika anda sedang merubah blog terseb… Read More
  • Maksimalkan SEO pada LinkMemaksimalkan kinerja link sangat dibutuhkan oleh kita semua terlebih search engine sangat suka link yang masuk atau inbound link. Hal inilah yang banyak webmaster pikirkan bagaimana cara meletakkan link dan link tersebut bis… Read More
  • Kesalahan Blogger PemulaKesalahan ini pernah saya alami saat tengah menjadi Blogger Pemula. Hal ini yang membuat saya justru tidak memiliki beberapa hal positif bagi blog saya. Dari hal penggunaan template serta bagaimana saya promosi. ternyata sete… Read More
  • Memasang Kode Parse HTMLSebelumnya saya sangat berterimaksih sekali buat kalian yang masih setia membaca artikel dari The FIM Site.. Oiya terkadang kita ingin memasang iklan yang diletakkan dalam artikel dengan mengedit html namun masih saja tidak m… Read More