Membuat Scroll pada Kotak Komentar

Para rekan blogger sekalian...kita berjumpa lagi dlm acara tutorial kali ini, dengan judul "Membuat Scroll pada kotak komen". Apa itu scroll? Kalau ini teman2 pasti sudah pada tahu, tu lho di bagian kanan browsernya teman2...yang biasanya mbuat gulung2 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 sih si empunya/admin sudah nulis tutorial "Cara Membuat Scrool dalam Postingan/blog" tapi setelah ditimbang-timbang, tutorial membuat scroll dalam postingan akan memnjadi tdk sempurna kalau tutorial cara membuat scroll dalam kotak komen gak dibahas, dengan begitu tiada lain dan tiada bukan, pembuatan postingan kali ini bertujuan untuk menyempurnakan postingan yang berjudul "Cara Membuat Scrool dalam Postingan/blog".

Tapi sebelum membahas masalah ini neh, ada yang nanya2 gak apa guna membuat scroll dalam kotak komen, baiklah kalau gak ada yang nanya biar saya jawab, kali aja lain waktu ada yang nanya. Singkatnya kegunaan membuat scroll dalam kotak komen yaitu untuk memperpendek area komentar, tatkala komentar para pengunjung blog kita memilki jumlah yang relatif buanyak. Oleh karena itu, trik ini sangat cocok bagi teman2 yang mempunyai blog yang selalu dibanjiri oleh komen para pengunjung. Mungkin beberapa rekan blogger yang lagi baca postingan ini menjadi penasaran bagaimana penampilan/muka si scroll dalam kolom komentar itu. santai teman, teman2 bisa melihatnya di blog ini juga kok, coba klik di sini, sekarang lihat di bagian kotak komen post, ada scrollnya kan? (Bagi tman2 yg pertama membaca postingan ini gak akan menemukan scroll dalam kotak komennya, maslahnya bisa saja karena komennya baru dikit, jadi scroll nampak setelah komennya banyak. Saya sengaja nge-link ke halaman Daftar isi, coz di sana sudah lumayan jumlah komen-nya).

Ya' cara membuatnya sekarang teman2 login dulu ke blogger, lalu klik Tata Letak, kemudian Klik Edit HTML. Dan yang paling penting janagn lupa centang si "expand widget template"

Sekarang perhatikan baik2 kode berikut ya....(gak usah lama2, 5 detik aja dah cukup)

<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 perhatikan lagi kode 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>

Adakah perbedaan antara kode pertama dengan kode kedua...?

Ya' benar, jelas ada. Bedanya kode pertama gak memiliki kode yang berwarna merah. Nah, tugas teman2 hanya menambahkan kode merah itu ke kode templatenya teman2. Perhatikan baik2 ya kodenya.

Sekedar tips untuk mempermudah menemukan kode di atas: Untuk menambah kode <div style='overflow:auto; width:ancho; height:350px;'> mungkin teman2 cukup mengetik pada kotak find (Ctrl+F) potongan kode <dl id='comments-block'>, kalau dah ketemu tinggal taruh saja kode <div style='overflow:auto; width:ancho; height:350px;'> di atasnya. yang jadi masalh ni tempat buat menyimpan kode </div> yaitu penutup kode keseluruhannya itu. Teman2 jangan sekali2 menyepelekan penyimpanan kode </div> dengan hanya mencari potongan kode </b:loop>
</dl> saja (maslahnya kode serupa lebih dari satu dalam kode templatenya teman2), ini takutnya teman2 salah menyimpan kode </div> dan alhasil gagal. Oleh karena itu saran saya, walaupun teman2 mencari dengan potongan kode saja, maka cobalah untuk mencocokkannya dengan kode yg telah saya paparkan, yang penting perhatikan baik2 kode kedua (yang memilki tambahan kode merah), mungkin kode yg ada di dalam template-nya teman2 agak beda dengan punya saya, oleh karena itu carilah yang menyerupai/mirip.

Selanjutnya teman2 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?

Ok, ini saja dulu yoh...GoOd LuCk





Semoga Bermanfaat []

Tags: membuat kotak komentar scroll, membuat scrolling kotak komentar, edit kotak komentar scroll, kode scroll kotak komentar, edit template scroll komentar