Cara membuat scroll pada daftar komentar

pada Sunday, January 16, 2011

Daftar komentar yang terlalu banyak mungkin sedikit mengganggu, dan akan lebih cantik jika daftar komentar yang banyak tersebut diberi fungsi scroll agar semakin menarik, lalu bagaimana cara membuat scroll pada daftar komentar tersebut?

Cara membuat scroll pada daftar komentar adalah sbb

1. Log In ke blogger

2. Masuk ke Rancangan

3. Edit HTML (centang kotak Expand Template Widget)

4. Cari kode yang mirip denga kode dibawah ini

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
5. Tambahkan kode dibawah ini tepat diatasnya

<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. Kode paling atas "650" adalah tinggi kotak scrollnya, silahkan sesuaikan sesuai kebutuhan

9. Simpan template