» » Memberi Gaya pada Kotak Scroll
Kamis, 24 Oktober 2013

Memberi Gaya pada Kotak Scroll

blogger templates


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 http://t-index.blogspot.com/


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 :




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.

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







<div style="overflow:auto; width:150px; height:100px; padding:10px; border:1px solid #000000;">http://t-index.blogspot.com/</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 ).

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 :






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;">http://t-index.blogspot.com/</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 :







    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 kodecellpadding="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....

    Sumber
    Diposting oleh di

    0 Response to "Memberi Gaya pada Kotak Scroll"

    Posting Komentar