Cara Membuat dan Memberi Gaya pada Kotak Scroll

Cara Membuat dan memberi Gaya pada Kotak Scroll - Sebuah kotak dengan fungsi scroll sangat banyak digunakan oleh blogger blogspot. Ada yang menggunakannya untuk menyimpan daftar isi blog, membuat widget blog lebih dari 1 pada satu kotak, membuat blogroll, menyimpan statistik, dan lain lain. Dengan adanya fungsi scroll, kotak akan lebih terlihat praktis dan menarik. Selain itu, Sebuah kotak dengan fungsi scroll bisa menyimpan isi yang sangat besar atau banyak dengan ukuran kotak yang kecil.

Scroll Kotak Otomatis

Jika isi kotak lebih lebar dari kotaknya, maka kotak akan secara otomatis membuat scroll ke samping dan membuat scroll ke bawah apabila isi kotak lebih panjang dari ukuran kotaknya. Dengan demikian, jika ingin menyimpan widget yang lebar atau panjang atau keduanya pada sidebar blog, kita tinggal membuat kotak scroll lalu menyimpan widget tersebut di dalam kotak scrollnya.

Kotak dengan fungsi scroll kurang lebih akan terlihat seperti ini :





KOTAK dengan Fungsi Scroll Bloggerbugis


Mana scrollnya ????

Apabila sudah diisi dengan tulisan atau widget yang melebihi kapasitas kotaknya, maka kotak secara otomatis akan menambahkan scroll seperti contoh di bawah ini :




Artikel Cara membuat kotak dengan fungsi scroll ini di tulis dan di terbitkan oleh bloggerbugis. Jika anda ingin mengcopy artikel ini, harap sertakan LINK AKTIF menuju ke http://www.bloggerbugis.com sebagai sumber artikel. Apabila anda menemukan artikel ini di blog lain selain BLOGGERBUGIS, mohon beritahu admin BLOGGERBUGIS agar blog tersebut di laporkan ke google sebagai pencuri konten agar blognya di hapus dari indeks google. Terima kasih...


Atau seperti contoh kotak scroll di bawah ini yang di isi dengan gambar:






Dan akan terlihat seperti contoh di bawah ini jika kotak scroll di isi dengan widget :







Kode yang digunakan untuk membuat sebuah kotak dengan fungsi scroll adalah :

<div style="overflow:auto; width:150px; height:100px; padding:10px; border:1px solid #000000;">BLOGGERBUGIS</div>

Sebelum menambahkan sedikit gaya pada kotaknya, saya akan jelaskan kode untuk membuat kotak scrollnya terlebih dahulu.

  • width:100px  adalah lebar kotak yang diukur dalam pixel. (100px/100pixel)
  • height:400px adalah tinggi kotak yang diukur dalam pixel. (400px/400pixel)
  • padding:10px; adalah jarak isi kotak dengan garis pinggir kotak.
  • border:1px solid #000000 adalah kode untuk ketebalan garis pinggir kotak ( border ) dengan garis biasa ( solid ) yang berwarna hitam ( #000000 ).
  • Kata BLOGGERBUGIS adalah isi kotak yang berupa tulisan yang bisa juga di ganti dengan kode widget jika kotaknya di isi dengan widget.

Memberi Gaya pada kotak scroll

Dengan menambahkan beberapa kode, Kotak scroll di blog akan terlihat lebih menarik. Contohnya :

Tambahkan kode background:#00ff00; untuk memberikan background warna pada kotaknya. Hasilnya seperti ini :




BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS


Kode untuk membuat kotak scroll dengan background warna di atas adalah :
<div style="overflow:auto; width:150px; height:100px; padding:10px; border:1px solid #000000; background:#00ff00;">BLOGGERBUGIS</div>
Kode background:#00ff00 adalah kode untuk memberi latar belakang ( Background )  berwana hijau pada kotak scroll. Anda bisa mengubah warna background dengan mengganti kode rana hijau dengan kode warna yang anda inginkan. Untuk melihat kode HTML warna, klik "Tools Untuk melihat Kode Warna".

Tambahkan bingkai untuk membuat kotak dengan fungsi scrollnya jadi lebih menarik hinggan terlihat seperti contoh di bawah ini :




BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS


Untuk memberi bingkai pada kotak dengan fungsi scroll seperti conto di atas adalah :
<table border="3" cellpadding="1"><tbody><tr><td><div style="overflow:auto; width:150px; height:100px; padding:10px; border:1px solid #000000; background:#00ff00;">BLOGGERBUGIS</div></td></tr></tbody></table>

  • Untuk membuat bingkainya menjadi lebih tebal, ganti angka 3 pada kode <table border="3" menjadi lebih besar.
  • Untuk memberi jarak antara bingkai dengan kotak, ganti angan 1 pada kode cellpadding="1" menjadi lebih besar.

Misalnya angka table border adalah 5 dan angka cellpadding 5, maka hasilnya akan seperti contoh berikut ini :




Cara membuat kotak dengan fungsi scroll dengan menambahkan style background warna dan bingkai pada kotak scrollnya


Gaya lain yang bisa di tambahkan pada kotak scrollnya adalah efek shadow ( bayangan ). Agar efek bayangan pada kotaknya lebih menarik, ganti border ( garis pinggir ) kotaknya dengan garis pinggir ganda. Hasilnya kurang lebih seperti ini :





Cara membuat kotak dengan fungsi scroll dengan menambahkan style background warna, efek bayangan dan garis pinggir ganda pada kotak scrollnya


Kode yang di gunakan untuk membuat kotak scroll dengan efek shadow, dan garis pinggir ganda seperti di atas adalah :
<div style="overflow:auto; width:150px; height:100px; color:#b4040; padding:10px; border:4px double #000000;-moz-box-shadow:0 0 10px #000000;-webkit-box-shadow:0 0 10px #000000;-goog-ms-box-shadow:0 0 10px #000000;">Cara membuat kotak dengan fungsi scroll dengan menambahkan style background warna, efek bayangan dan garis pinggir ganda pada kotak scrollnya</div>
  • Kode yang berwarna merah adalah kode untuk memberi garis pinggir ganda. Jika ingin membuat garisnya putus - putus, ganti kode double dengan dashed
  • Kode yang berwarna biru adalah kode untuk memberi efek bayangan berwarna hitam pada kotak
Semua kode di atas bisa di edit dengan menggabungkan kodenya, menambahkan atau mengurangi kodenya atau keduanya. Silahkan edit kode dasar membuat kotak scroll di blog tersebut di atas agar kotaknya sesuai dengan keinginan anda.

Jika menambahkan terlalu banyak gaya, nanti kotaknya menjadi OVER DOSIS eh OVER STYLE . Karena itu saya akhiri artikel "Cara Membuat Kotak Scroll di Blog" sampai disini saja . Jika anda lebih suka membuat text area di bandingkan dengan kotak scroll, klik "Beberapa macam cara membuat textarea"

Oce bro... semoga artikelnya bermanfaat.
Happy Blogging dan Salam Blogger....
Label: ,