11 Mei 2011

Membuat scroll pada kotak komentar

Tiap blogger yang menulis artikel pada blognya tentu berharap akan komentar dari para pengunjung yang membaca artikel-artikelnya. Dengan adanya komentar para pengunjung tersebut, isi dan tujuan dari artikel yang ditulis telah sampai pada tujuannya, yakni berbagi ilmu, cerita ataupun lainnya pada orang lain. Ada beberapa artikel yang berisi informasi menarik (dibutuhkan orang banyak) biasanya mendapatkan komentar pengunjung yang banyak pula dan hal ini otomatis membuat komentar menjadi memanjang ke bawah dan membuat halaman blog menjadi memanjang pula.

Berkenaan dengan memanjangnya halaman blog yang disebabkan banyak komentar pengunjung, pada kesempatan kali saya coba berbagi mengenai cara menambahkan scroll pada komentar yang bertujuan untuk menghemat ruang pada suatu halaman blog. Membuat scroll pada kotak komentar tentu sudah banyak blogger yang menulisnya, tetapi tidak ada salahnya jika pada kesempatan kali ini saya juga berbagi hal yang sama dengan menulis langkah-langkah dalam pembuatannya, yang saya harapkan bisa bermanfaat terutama buat sobat yang mau mengaplikasikannya pada blog sobat.

Langkah-langkah yang dilakukan dalam pembuatan scroll kotak komentar sebagai berikut:

1. Login ke blogger dengan menulis email dan password sobat
2. Pada dashboard klik rancangan, dilanjutkan dengan edit HTML
3. Centang tanda expand template widget
4. Tekan Ctrl-F dan cari kode <dl id='comments-block'>
5. Jika kode tersebut sudah sobat temukan, silahkan copas kode di bawah ini dan letakkan di atas  kode tadi.
<div style='overflow:auto; width:ancho; height:250px;'>
6. Karena kita menggunakan perintah <div> jangan lupa untuk menutup dengan kode </div>. Silahkan sobat letakkan kode </div> setelah kode </dl>, atau untuk lebih jelasnya bisa sobat lihat pada contoh di bawah ini.

<div style='overflow:auto; width:ancho; height:250px;'>
   <dl 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'>
            <a expr:name='data:comment.anchorName'/>
            <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>
</div>

7. Simpan template dan coba lihat hasilnya.

Sekian pertemuan kita kali ini, semoga apa yang saya utarakan di atas bermanfaat dan bisa sobat aplikasi kan di blog sobat, salam.

Artikel Terkait Lainnya



8 komentar:

Faril mengatakan...

makasih banyak ya ...
akhirnya kotak komentarku ada scroll-nya.. kalo pas ada banyak yang ninggal komentar,,blog nggak terlalu panjang

Blogger Banua Menuju Blogger Nusantara 2011 mengatakan...

MAmpir sob, thank's buat tutornya.. xixix

Abdurrahman Fikri,S.T mengatakan...

Mas,saya sudah memasang banner link anda di blog saya. silahkan cek di http://fikri4share.blogspot.com/
tolong pasang balik ya link saya. kodenya ada di blog saya. di tunggu.

Robin PayTren mengatakan...

walah, gak ada kode yang ditemukan.

Muhammad Arif Ahsan mengatakan...

koq ane gagal sob??

dokunimus mengatakan...

Thanks gan. Trik yang cukup simpel

arief ahsan mengatakan...

koq sy gagal ya sob.. apa ada yang salah? sy ingin buat kolom komentar seperti punya agan

Uem Cuters mengatakan...

Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

Posting Komentar

PrevPage NextPage home