membuat kotak komentar dengan scroll

postingan yang ketiga yang membahas mengenai pembuatan scroll, sebelumnya saya sudah nulis tutorial Cara Membuat Artikel Terkait (dengan Scroll) dan cara membuat daftar isi dengan fungsi scroll

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: teman teman juga dapat 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 kamu atur sesuai keinginan kamu, tapi lihat dulu hasil kerjaannya kamu pada kolom komentar postingannya, apakah sudah sesuai dengan ukuran kotak komen yg kamu inginkan

selamat mencoba

Dapatkan berita-berita terbaru kami di
twitter | facebook | RSS feeds | versi mobile
-----Nostalgia 90an yuk di blognya rayi-----

Artikel Menarik Lainnya