Cara Membuat Komentar Blog Menggunakan Scroll

Selamat Malam Dan Salam Sejahtera Bagi Kita Semua.

Para sobat blogger sekalian... senang rasanya saya bisa dapat berjumpa kembali lagi dengan sobat sekalian dalam mengupdate informasi-informasi terbaru di Blog kita yang tercinta ini Natan Auto Software. Pada malam hari ini saya akan Share sedikit Bagaimana "Cara Membuat Komentar Blog Menggunakan Scroll".  kira-kira Sobat ada yang tau gak apa itu scroll.?? Kalau yang satu ini sobat sekalian pasti sudah pada tahu bukan, itu lho yang biasa ada di bagian kanan browser kita yang biasanya membuat gulungan/penggeseran halaman web/blog ke bawah dan keatas, nah itulah yang namanya scroll. jika sobat pengen membuat kotak komentar Blog sobat juga dapat mempunyai fungsi scroll, disini saya akan memberitahukan kepada sobat cara mudahnya yang bisa sobat lakukan, 
 Berikut cara Kerjanya : Cekidot...

   1.  Login ke Akun Blog Sobat
   2.  Pilih Rancangan 
   3.  lalu klik Tata Letak,

   4. kemudian Klik Edit HTML.

Dan yang paling penting jangan lupa centang si "expand widget template"

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

---

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

 

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

NB: Sobat juga bisa mengatur panjang lokasi kotak komentar yang ber-scroll itu dengan cara mengatur nilai pada kode <div style='overflow:auto; width:ancho; height:350px;'> nah perhatikan pada bagian:350px . Angka tersebut dapat Sobat atur sesuai dengan keinginan sobat masing-masing, tapi lihat dahulu hasil kerjaannya pada kolom komentar postingannya, apakah sudah sesuai dengan ukuran kotak komentar yg Sobat inginkan.
  Baiklah Sob, sekianlah sedikit Pengetahuan yang dapat saya bagikan kepada semua sahabat Blog disini menurut pengalaman kerja saya sendiri.
  Semoga Bermanfaat & Selamat Mencoba..(*n_n*)

                       Salam Sejahtera ..:: Natan Auto Software ::..