Cara membuat scroll pada daftar komentar di blog

Daftar Komentar dari pengunjung blog yang panjang tentu membuat tampilan halaman semakin panjang kebawah. Ini juga menyebabkan blog kurang enak untuk dilihat. Nah, pada postingan kali ini, saya share buat anda cara untuk membuat scrol pada daftar komentar di blog anda.
Baik, langsung saja ikuti langkah-langkah sebagai berikut..

1. Log In ke blogger
2. Masuk ke Rancangan
3. Edit HTML (centang kotak Expand Template Widget)
4. Cari kode yang sama persis dengan kode dibawah ini ;

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

5. Tambahkan kode berikut, tepat persis di atasnya

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

6. Lalu scroll ke bawah lagi dan tambahkan kode </div>
7. Sehingga kodenya menjadi seperti dibawah ini

<div style='overflow:auto; width:ancho; height:650px;'>
        <dl expr:class='data:post.avatarIndentClass' 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'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <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' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <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' rel='nofollow' title='comment permalink'>
                  <data:comment.timestamp/&gt;
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
          </b:loop>
        </dl>
</div>

8. Untuk code yang berwana biru adalah tinggi dari tabel scroll komentar. Silahkan diganti sesuai dengan kebutuhan blog anda.

9. Bila sudah yakin penempatan script diatas sudah benar, silahkan SIMPAN dan lihat hasilnya..

Silahkan bagi yang ingin bertanya untuk lebih jelasnya, atau ingin menambahkan dan punya alternatif lain silahkan ditambahkan. Terimakasih dan selamat mencoba. :)

Artikel Terkait