Menambahkan Fungsi Scrolling Pada Kotak Komentar

Penambahan fungsi scrolling pada kotak komentar, ini merupakan salah satu bagian dari modifikasi kotak komentar.

Materi di artikel kali ini dikarenakan ada sobat blogger yang menanyakannya, sahabat marfin.. " mas saya suka dengan blog mas, saya mau tau cara bikin kolom komentar seperti yangf mas punya, saya pengen belajar mas.. " dan.. "kolom komintarnya ga memakan banyak area gan.. betul gan, saa mau belajar kaya gitu gan."

Langkah-langkahnya sbb :

1. Login ke Blogger > Rancangan > Edit HTML > Edit Template, centang expand template widget.

2. Backup. Copas dahulu seluruh kode HTML template ke dalam Notepad dan simpan.

3. Lalu cari dengan Ctrl F "<dl expr:class='data:post.avatarIndentClass' id='comments-block'>".

4. Copy kode html fungsi scrolling dibawah ini, tepat di atasnya.

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

dan..

</div>

5. Kemudian cari " <b:if cond='data:post.commentPagingRequired'>", lalu copy </div> dibawah ini.

</div>

Ket : 
overflow, ini yang membuat fungsi efek scrolling secara otomatis jika sudah melebihi tinggi yang sudah kita tentukan.
height, sesuaikan nilainya.
widht, sesuaikan nilainya.


6. Perhatikan langkah 4 & 5, paste seperti contoh dibawah ini.

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

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

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=8387318707126436251&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E%3A%20#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;' style='padding:0px 5px; border:1px solid #999;'>Reply</a></span>

            </dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<i><a href='http://ecaknyo.blogspot.com/2010/08/cara-membuat-warna-kotak-komentar-admin.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow003.gif'/> Buat kotak komentar admin seperti ini..</a></i>
<p><data:comment.body/></p>
</dd>
<b:else/>

            <dd expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' 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/>
                  <span class='interaction-iframe-guide'/>
                </p>
              </b:if>
            </dd>

</b:if>

            <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>
</div>
      <b:if cond='data:post.commentPagingRequired'>

7. Simpan template dan reload blog untuk melihat perubahan dibagian komentarnya.



Selamat Mencoba.