Membuat scroll pada kotak komentar

Tiap blogger yang menulis artikel pada blognya tentu berharap akan komentar dari para pengunjung yang membaca artikel-artikelnya. Dengan adanya komentar para pengunjung tersebut, isi dan tujuan dari artikel yang ditulis telah sampai pada tujuannya, yakni berbagi ilmu, cerita ataupun lainnya pada orang lain. Ada beberapa artikel yang berisi informasi menarik (dibutuhkan orang banyak) biasanya mendapatkan komentar pengunjung yang banyak pula dan hal ini otomatis membuat komentar menjadi memanjang ke bawah dan membuat halaman blog menjadi memanjang pula.

Berkenaan dengan memanjangnya halaman blog yang disebabkan banyak komentar pengunjung, pada kesempatan kali saya coba berbagi mengenai cara menambahkan scroll pada komentar yang bertujuan untuk menghemat ruang pada suatu halaman blog. Membuat scroll pada kotak komentar tentu sudah banyak blogger yang menulisnya, tetapi tidak ada salahnya jika pada kesempatan kali ini saya juga berbagi hal yang sama dengan menulis langkah-langkah dalam pembuatannya, yang saya harapkan bisa bermanfaat terutama buat sobat yang mau mengaplikasikannya pada blog sobat.

Langkah-langkah yang dilakukan dalam pembuatan scroll kotak komentar sebagai berikut:

1. Login ke blogger dengan menulis email dan password sobat

2. Pada dashboard klik rancangan, dilanjutkan dengan edit HTML

3. Centang tanda expand template widget

4. Tekan Ctrl-F dan cari kode <dl id='comments-block'>

5. Jika kode tersebut sudah sobat temukan, silahkan copas kode di bawah ini dan letakkan di atas  kode tadi.

<div style='overflow:auto; width:ancho; height:250px;'>

6. Karena kita menggunakan perintah <div> jangan lupa untuk menutup dengan kode </div>. Silahkan sobat letakkan kode </div> setelah kode </dl>, atau untuk lebih jelasnya bisa sobat lihat pada contoh di bawah ini.

<div style='overflow:auto; width:ancho; height:250px;'>
   <dl id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>

          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

            <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'>

              <a expr:href='data:comment.url' title='comment permalink'>

                <data:comment.timestamp/>

              </a>

              <b:include data='comment' name='commentDeleteIcon'/>

            </span>

          </dd>

        </b:loop>

      </dl>
</div>

7. Simpan template dan coba lihat hasilnya.

Sekian pertemuan kita kali ini, semoga apa yang saya utarakan di atas bermanfaat dan bisa sobat aplikasi kan di blog sobat, salam.

Artikel Terkait Lainnya