scrollbox pada komentar

Selamat malam kawan,postingan ini khusus dari permintaan YENI.J yang bertanya ( mau tanya...mcm mana kamu buat scroll box dekat comments?boley ajar? ) rupanya bloggerwati cantik ini dari tanah sebrang yang juga mempunyai sebuah blog unik dan menarik di yaniej.blogspot.com mudah mudahan aku gak salah mengartikan pertanyaannya yaitu menanyakan bagai mana membuat scrollbox pada komentar,benar gak yah..?? hehehe...Ok kita lanjut ini didasarkan kepada pemikiran atau prediksi bahwa komentar yang masuk semakin lama akan semakin bertambah banyak .. duh narsisnya.. sehingga halaman blog akan panjang. Untuk mengatasi ini maka dibuat scrolling pada daftar komentar itu , sehingga blog tidak tampak memanjang ke bawah. Caranya bisa simple bisa juga ribet.. hal ini tergantung pada templatenya. Kalau kodenya sama ya.. gampang.. tapi kalau gak sama.. yaa rasakan sendiri aja deh.. hehehe.. yang jelas kita harus mengenali kode HTML tamplate kita sendiri.. karena untuk kode kode tambahan sebenarnya sama aja
Kalau berminat Membuat Scroll Pada Komentar, langkahnya seperti ini :

1. Masuk ke Acount blogger anda atau ke Dashboard
2. Pilih Layout, kemudian klik Edit HTML
3. klik expand templates widget 
4. Cari kode seperti di bawah ini 

Cara 1

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<div class='comments-singleblock'>
<dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>

tambahkan kode ini diatasnya

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

dan kode ini dibawah kode </dl>

 </div>

SAVE
#-----------------------------------------------#
Cara 2

<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/>
</dt>
<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>
<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>

Kalo sudah ketemu, tambahkan kode berikut, tepat di atasnya,

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

dan kode ini dibawah kode </dl>

</div>

Ingat ya, setelah kode </dl> !!

SAVE
#-----------------------------------------------# 
Cara 3

/* Comments
-------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}

Tambahkan kode dibawah ini di atas kode #comments-block .comment-author {

height:400px;

overflow:auto;
border:1px solid grey;

Ket: angka 400px : adalah tinggi kotak scroll itu, tinggal diganti sesuai selera kita.
dan SAVE 
#-----------------------------------------------#
Cara 4

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

Nah, kalau sudah memperhatikan kode di atas, sekarang tambahkan kode berwarna merah,yang akhirnya menjadi seperti berikut:

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

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

</div>

klik SAVE
sampai disini selesai deh semoga bermanfaat yah..!!