Campoeng Cmoneng

"Belajar IPS Lewat Internet"

Senin 17 Maret 2025

Membuat Scroll Box Pada Kotak Komentar Blog

Scroll boxs pada kotak komentar berfungsi untuk menghemat areal halaman pada postingan selain juga tampilan blog kelihatan rapi. Meskipun telah dipasang, ada kemungkinan dicopot atau kemudian dipasang lagi, makanya sekalian disimpan pada bilik halaman ini agar tidak lupa.

Hal ini dapat dipasang di blog lain bila setelan template sama
Berikut langkah-langkah cara memasangnya :

Langkah Pertama
1.  Login kea kun blog (Muncul tampilan dasbor blog),
2.  Pilih dan klik setelan blog
3.  Pilih Post dan Komentar
4.  Pada lokasi komentar pilih”Jendela Munculan”
5.  Klik Simpan setelan (disudut kanan atas)

Langkah Kedua
1.  Setelah login ke akun blog,
2.  Pilih atau klik Rancangan / templates
3.  Pilih Edit HTML
4.  Jangan lupa centang/aktifkan pilihan Expand Widget Templates.

Langkah Ketiga
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.
Lalu jangan lupa tambahkan kode </div> untuk penutupnya di bawab </dl> 

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

Setalah di copypaste kode (lengkap-nya) menjadi di bawah 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>

Kode yang berwarna merah, height:300px untuk mengatur tinggi areal kotak komentar, </div> merupakan penutup di bawah </dl>

Sebelum di save klik Pratinjau dahulu
Demikian Disimpen Ben Ra Lali, semoga bermanfaat 


ARTIKEL TERKAIT
Di bawah ini adalah beberapa materi lanjutan dan sebelumnya yang berkaitan dengan materi di atas
Label: