Cara Memasang Scroll Box Pada Kotak Komentar Blog

Scroll Box Pada Kotak Komentar Blog

Lihat Demo nya

Cara menambahkan fungsi scroll pada kotak komentar blog ini bertujuan selain menghemat areal halaman pada setiap postingan juga dapat mempercantik dan kerapian tata letak blog.

Berikut langkah-langkahnya :

Langkah Pertama
Setelah login ke akun blog, pada tampilan dasbor blog, pilih atau klik Rancangan / templates dan pilih Edit HTML kemudian jangan lupa centang/aktifkan pilihan Expand Widget Templates.

Langkah Kedua
Silakan tekan Ctrl+F pada keyboard dan cari kode di bawah ini

<div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>

Kalau sudah ketemu kodenya, silakan copypaste kode di bawah ini pas di atas kode tadi.

<div style='background-color:#cceaef;overflow:auto;width:ancho; height:300px;'>

  Setalah di copypaste kode (lengkap-nya) menjadi berikut ini.

<div style='background-color:#cceaef;overflow:auto; width:ancho; height:300px;'>


<div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>


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


<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' title='comment permalink'>


<data:comment.timestamp/>


</a>


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

</span>

</dd>

</b:loop>

</dl>

</div>

</div>

Perhatikan kode yang berwarna merah, height:300px merupakan kode untuk mengatur tinggi areal kotak komentar dan untuk kode warna merah, </div> merupakan penutup dari kode yang ditambahkan tadi.

Demikian disimpen ben ra lali, semoga bermanfaat

Sumber:

ARTIKEL TERKAIT: