Cara Menambahkan Fungsi Scroll Pada Kotak Komentar Blog

Cara menambahkan fungsi scroll pada kotak komentar blog ini bertujuan untuk meminimalisir areal komentar pada setiap postingan yang sudah memiliki banyak komentar. Serta sebagai pertimbangan kerapian tata letak blog yang kita kelolah. Jika teman-teman hendak menggunakan fungsi scroll pada kotak komentar blognya, silakan ikuti langkah-langkah berikut ini tapi sebelumnya perlu saya sampaikan bahwa template blogmu sama dengan template blogku. Jadi, silakan perhatikan baik-baik kode yang akan saya sertakan. Berikut langkah-langkahnya :


Langkah Pertama
Silakan login dulu ke akun blog Anda. Cara ini saya lakukan pada tampilan baru dasbor blog. Pada tampilan baru dasbor blogmu, silakan pilih atau klik nama blogmu kemudian pada halaman dasbor blog, silakan pilih templates dan pilih Edit HTML kemudian pilih proceed serta jangan lupa 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 simpan kode di bawah ini pas di atas kode tadi.

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

Untuk lebih jelasnya, silakan perhatikan kode lengkap berikut ini.

<div style='overflow:auto; width:ancho; height:200px;'>
<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 yang pertama yaitu height:200px merupakan kode untuk mengatur tinggi areal kotak komentarnya dan untuk kode warna merah yang kedua yaitu </div> merupakan penutup dari kode yang ditambahkan tadi.

Demikian tutorial blog tentang Cara Menambahkan Fungsi Scroll Pada Kotak Komentar Blog dan semoga bermanfaat

Tweet