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
Share on Google Plus

About Kurnia Rahman

Kurnia Rahman Agus - Programmer lepas yang mengisi hari-harinya dengan memberikan ilmu kepada siswa-siswi di salah satu SMK di Pekanbaru. Beliau aktif di beberapa komunitas seperti Blogger Bertuah dan Baleno Club Riau.

6 comments :

  1. halu kurt, pakabar nih?
    lama nggak main di mari, semoga masi ada sisa camilan buat saya #halah

    blognya makin keren ajah!
    tutornya nggak kalah keren+informatip! yihaaa

    ReplyDelete
  2. koq post a comment ini ikut masuk ke scroll.a... gimana cara.a biar gak ikutan masuk bro

    ReplyDelete
  3. hoho,,, welcome back @kaoskakiungu :)
    btw, aku sekarang udah bukan mahasiswa tingkat akhir lagi *busung dada*

    @arief: pake cara ketiga aja bro..

    ReplyDelete
  4. aq gak nem kode itu di html.a bro.. gmana dong?

    ReplyDelete
  5. Cara Membuat kotak fungsi scrolling pada blog ternyata gampang ya gan!!! Thank you for sharing.. I love scrolling.

    ReplyDelete

Terima kasih telah berkunjung, Semoga Bermanfaat..