Cara menambahkan fungsi scrolling pada kotak komentar

...Modif ke-1...yaitu Penambahan fungsi scrolling pada kotak komentar... ini merupakan salah satu bagian dari modifikasi kotak komentar... karena masih ada lagi modifikasi lainnya seperti Mengubah warna kotak komentar admin blog biar berbeda dengan kotak komentar pengunjung blog (..ini nanti  akan saya bahas pada postingan berikutnya... Modif  ke-2..)... sebenarnya ada beberapa sobat  blogger yang sudah memposting hal ini... tapi setidaknya menambah tutorial di blog ini.. :) 

... Saya bahas di postingan kali ini dikarenakan ada sahabat yang menyinggungnya... 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.." ...heuuum... okelah kalau begitu... sekalian saya kasih kamu Backlink gratis Marfin.. :D

Jadi...Perhatikan Langkah-langkahnya berikut ini :

1. Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang saja expand template widget )...

2. Seperti biasa Copy-Paste dahulu seluruh kode HTML template widget blog kamu ke dalam Notepad dan simpan... untuk jaga-jaga..kan tinggal copy-paste lagi trus simpan & kembali seperti semula..

3. Lalu cari " <dl expr:class='data:post.avatarIndentClass' id='comments-block'>  "  ... ( tekan CTRL + F ..untuk pencarian)...

4. Jika sudah ketemu dan yakin sudah benar tempatnya... lalu Copy kode html Fungsi Scrolling dibawah ini.. tepat di atasnya...

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

dan..

</div>

 5. Kemudian cari ( tekan CTRL + F ..untuk pencarian).. "  <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 kuota widht & hieght yang kita tentukan...
height =  bisa kamu ubah-ubah nilainya...
widht = ini juga bisa kamu ganti dengan angka ..dan bisa kamu ubah-ubah juga.. misalnya 500px

Kamu juga bisa memodifikasi lagi kode html Fungsi Scrolling diatas... semakin cerdik akan semakin bagus tampilannya.. tambahkan background ..atau border juga bisa ...tapi hati-hati ya..nanti bisa error template blog-nya..  :)

6. Perhatikan.. langkah 4 & 5 kamu Paste-kan 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 perubahan template nya dan refresh blog kamu lihatlah dibagian komentarnya...

... Mudah kan....

Share