Tutorial Blog, Tips Blogging, SEO, Belajar Syntax HTML, PHP, CSS, dan Aktifitas Coding Lainnya

Modifikasi Kotak Komentar Blog dengan Scroll

Membuat scroll comments box - Scroll adalah fungsi untuk meringkas tampilan dengan cara menggulir ke atas dan ke bawah. Mungkin konco sinahu juga sering melihat di beberapa situs yang biasanya menggunakan fungsi scroll ini untuk meletakkan daftar isi, daftar artikel populer, artikel terkait, dan sebagainya. Yang seperti itu nanti insyaallah akan kita bahas pada topik membuat widget scroll.

Dalam menulis suatu artikel pada blog tentu kita ingin agar tulisan kita mendapat respon berupa komentar dari para pengunjung blog kita. Karena salah satu ciri blog yang berkualitas adalah adanya interaksi antara pengelola blog dengan pengunjung, d antaranya melalui kotak komentar.

Tapi sebagian orang ada yang kurang suka dengan tampilan kotak komentar yang memanjang ke bawah. Apalagi blog dengan lalu lintas trafik yang tinggi, sehingga intensitas komentar dari pengunjung juga tinggi. Tapi semua itu relatif, tergantung selera. Nah, kalau konco sinahu termasuk yang tertarik dengan tutorial modifikasi kotak komentar blog dengan scroll, silahkan disimak baik-baik langkah-langkahnya berikut ini.

Kotak Komentar Blog dengan Scroll

Membuat Scroll Pada Kotak Komentar Blog



1. Login ke Blogger
2. Pilih Template => Edit HTML
3. Cari kode yang mirip seperti ini :

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
<a expr:name='&quot;comment-&quot; + data:comment.id'/>
<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/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

4. Kemudian, letakkan kode berikut tepat di atasnya

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

Keterangan :

- Angka 300px bisa diganti sesuai selera

5. Save template

Gampang kan? intinya hanya menambahkan sedikit perintah kode style pada kotak komentar blog. Demikian tutorial sinahu coding kali ini tentang Modifikasi Kotak Komentar Blog dengan Scroll.



0 Komentar untuk "Modifikasi Kotak Komentar Blog dengan Scroll"

Back To Top