Membuat scroll pada komentar blog

Para rekan blogger sekalian...kita berjumpa lagi dlm acara tutorial kali ini, dengan judul "Membuat Scroll pada komentar blog". Apa itu scroll? Kalau ini teman2 pasti sudah pada tahu, tu lho di bagian kanan browsernya teman2...yang biasanya membuat gulung2/geser halaman web/blog, nah itulah yang namanya scroll. Selama si empunya nulis2 tutorial masalah blogging di blogger, ini adalah postingan yang kedua yang membahas mengenai pembuatan scroll, sebelumnya saya sudah nulis tutorial "Cara Membuat kotak Scroolbar pada blog" tapi jika kamu pengen membuat kotak komentar kamu juga mempunyai fungsi scroll ada cara mudah yang bisa kamu lakukan,caranya sbb:

• lalu klik Tata Letak,
• kemudian Klik Edit HTML.
• Dan yang paling penting jangan lupa centang si "expand widget template"
• 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:
  

  ---

  <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:eman2 juga bisa mengatur panjang lokasi kotak komen 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 tman2 atur sesuai keinginan tman2, tapi lihat dulu hasil kerjaannya tman2 pada kolom komentar postingannya, apakah sudah sesuai dengan ukuran kotak komen yg tman2 inginkan


BACA JUGA!
- Fungsi Gadget Followers pada Blog
- Cara mudah memasang meta tag blogger
- Mengubah tampilan iklan kumpulblogger
- Cara membuat label menjadi berwarna
- Membuat widget hanya muncul pada postingan
- Cara membuat daftar isi otomatis pada blogger
- Membuat Menu Horisontal pada blogger
- Membuat Breadcrumb Navigation pada blogger
- Cara membuat widget hanya tampil di homepage
- bertukar link dengan adil
- Membuat 3 kolom element dibawah header
- Membuat dua element dibawah header
- Cara menghapus komentar blog
- Cara membuat navbar auto hidden
- Membuat search engin pada navbar blog
- Cara membuat kotak banner
- Cara Memasang search engin pada blog
- Membuat background pada relate post/artikel terkait
- Cara membuat text area dengan background warna dan gambar
- Membuat footer tiga kolom di bawah posting
- Cara memasang sitemeter pada blog
- Memasang tombol share twitter dan facebook pada setiap postingan
- Meta tag title blog yang ramah SEO
- Membuat efek turun salju pada blog