Pasang ScrollBar pada Comment Box

Ditengah-tengah kegaduhan hati dari pada terlarut, coba-coba cek komentar di Buku Tamu ada yang bertanya tentang tips yang satu ini yaitu Cara memasang ScrollBar pada comment blog, walau tidak sesuai judul pertanyaan yang diberikan kepada Saya tapi Saya pikir maksudnya adalah cara buat fungsi scroll. Mudah-mudahan gak salah ambil kesimpulan :D akhirnya Saya putuskan untuk memposting artikel seputar Rancangan Web Log ini.

Banyak diantara teman-teman sekalian yang Saya lihat design komentarnya ok punya dan untuk tutorial blog yang satu ini pastinya tidaklah asing bagi mereka cacatan yang memang sudah tau.. tapi kalo yang belum pasti ini sangat membantu. Tujuan dari tutorial ini dibuat selain mempercantik tampilan blog Anda dari segi kotak komentar, ini juga dapat membantu menghemat ruang halaman blog Anda, 10, 100, 1000 dan seterusnya bayangkan jika komentar blog Anda mencapai tahap maksimal pastinya memerlukan banyak tempat bukan begitu? Tutorial ini tepat untuk Anda yang memang tujuan utamanya adalah untuk design dan menghemat ruangan blog Anda dari komentar pengunjung Anda.

OK langsung saja ya? sedang kurang enak untuk panjang lebar lagi ini. Soal design yang satu ini memiliki beberapa cara, Saya akan coba Tiga Cara saja.., langsung saja lihat langkah-langkahnya dibawah ini.

Cara Pertama.

1. Login blogger.com atau draft.blogger.com
2. Pilih icong "Go to post list"
3. Template ->> Backup template ->> Edit HTML ->> Processed
4. Centang "Expand Template Widget" sebelum melakukan pengeditan
5. Tekan Ctrl+F untuk mencari kode berikut, kode Dofollow milik Saya

#comments h4 { margin:1em 0; font-weight: bold; line-height: 1.4em; letter-spacing:.1em; color: $sidebarcolor;}
#comments-block { margin:1em 0 1.5em; line-height:1.6em;}
#comments-block .comment-author { margin:.5em 0; }

6. Ingat.. Fokus! Tambahkan kode berikut tepat diatas kode #comments h4

#comments {
height:200px;
overflow:auto;
}

Hasilnya akan seperti pada kode dibawah ini.

#comments {
height:200px;
overflow:auto;
}
#comments h4 { margin:1em 0; font-weight: bold; line-height: 1.4em; letter-spacing:.1em; color: $sidebarcolor;}
#comments-block { margin:1em 0 1.5em; line-height:1.6em;}
#comments-block .comment-author { margin:.5em 0; }

Perhatikan: Kode yang berwarna biru bisa Anda rubah itu untuk mengatur tinggi scroll kotak komentar yang Anda diingikan sesuai kebutuhan, dan yang berwarna merah itu adalah kunci kode agar fungsi scroll berfungsi.

8. Simpan template.

Karena fungsi kode diatas itu tidak selalu sama dengan template blog Anda, jika masih gagal atau bingung dengan kode Saya diatas ada cara kedua yang cukup mudah kok untuk diikuti lihat sebagai berikut.

Cara Kedua.
1. Tekan Ctrl+F untuk mencari kode Kedua sebagi berikut

<dl id='comments-block'>
    <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
          <b:loop values='data:post.backlinks' var='backlink'>
            <div class='collapsed-backlink backlink-control'>
              <dt class='comment-title'>
                <span class='backlink-toggle-zippy'>&#160;</span>
                <a expr:href='data:backlink.url'><data:backlink.title/></a>

2. Fokuskan pandangan Anda pada kode yang berwarna biru karena itu kuncinya, lalu letakkan kode berikut tepat diatas kode warna biru diatas
<div style='overflow:auto; width:ancho; height:300px;'>
3. Tambahkan kode penutup tag DIV yaitu </div>

sebelum atau sesudah kode penutup tag DL yaitu </dl> , dicari ya kode DL-Nya.. harus ketemu, biasanya didapat 1-15 baris kode.

4. Jika sudah alangkah baiknya pratinjau terlebih dahulu sebelum disimpan jika tidak ada error berarti berhasil lalu simpan.

Cara Ketiga

Hampir mirip seperti cara Kedua, tapi tips Ketiga ini berlaku jika kode template kita sama ya..?? :) intinya pilihlah yang membuat Sahabat sekalian merasa mudah untuk diimplementasikan.

Cari kode <dl expr:class='data:post.avatarIndentClass' id='comments-block'>  tambahkan kode ini 

<div style='border: 1px solid rgb(230, 230, 230); padding: 10px; overflow: auto; width: auto; height: 400px;'> tepat diatas kode berwarna biru. Jangan lupa tambahkan kode penutup tag untuk DIV yaitu </div>  letakkan sesudah kode </dl>

Selesai sudah tinggal pilih dan selamat mencoba jika berhasil selamat jika belum jangan ragu untuk bertanya, malu bertanya ya gagal terus.. :D Salam. 

source