Sesuai dengan judulnya,postingan saya kali ini Cara Membuat Kolom Scroll Pada Blog.Sering kali kita jumpai di blog baik berupa postingan code html,gambar,atau artikel pilihan yang begitu panjang,sehingga hal ini dapat memakan tempat.dan untuk mengatasi hal tersebut ada baik nya kita membuat kolom atau kotak scroll.dengan kolom scroll kita dapat memasukan baik berupa code HTML,gambar,semua artikel ataupun yang lain di dalam nya.dan kita juga dapat mengatur besar kecil ukuran atau pun warna pada kolom scroll.Untuk lebih jelas bagaimana caranya membuat kolom scroll tersebut mari kita coba lihat beberapa bentuk seperti yang dibawah ini:
1.kotak scroll tanpa background biasa
1.kotak scroll tanpa background biasa
teks pertama
teks kedua
teks ketiga
teks keempat
teks kedua
teks ketiga
teks keempat
Kodenya di bawah ini
<div style="font: 12px/26px Georgia,Garamond,Serif; height: 100px; overflow: scroll; width: 500px;"><span style="font-style: italic;"><span style="font-style: italic;">Masukkan teks disini</span></span></div>
2.kotak scroll dengan border tanpa background biasa
Masukkan teks disini
teks pertama
teks kedua
teks ketiga
teks keempat
teks kelima
dan seterus nya
teks pertama
teks kedua
teks ketiga
teks keempat
teks kelima
dan seterus nya
Kodenya di bawah ini
<div style="-goog-ms-box-shadow: 0 0 10px #000000; -moz-box-shadow: 0 0 10px #000000; -webkit-box-shadow: 0 0 10px #000000; border: 6px double #FF00FF; color: #b4040; height: 100px; overflow: auto; padding: 10px; width: 470px;">
Masukkan teks disini</div></div>
Masukkan teks disini</div></div>
3.kotak scroll dengan warna background
Masukkan Tulisan atau teks disini
teks pertama
teks kedua
teks ketiga
teks keempat
teks kelima
dan seterus nya
teks pertama
teks kedua
teks ketiga
teks keempat
teks kelima
dan seterus nya
Kodenya di bawah ini
<div style="background-color: Royalblue; border: 1px solid rgb(191, 189, 189); height: 100px; overflow: auto; padding: 5px; text-align: justify; width: 500px;">Masukkan teks disini</div>
4.kotak scroll dengan textarea
Kodenya di bawah ini
<textarea cols="60" rows="4">Masukkan Tulisan atau teks disini</textarea>
5.kotak scroll dengan border dan background contoh 1
Masukkan teks disini
teks pertama
teks kedua
teks ketiga
teks keempat
teks kelima
dan seterus nya
teks pertama
teks kedua
teks ketiga
teks keempat
teks kelima
dan seterus nya
Kodenya di bawah ini
<div style="text-align: left;"><div style="background: #4169E1; border: 3px solid #008000; height: 100px; overflow: auto; padding: 10px; width: 200px;">Masukkan teks disini</div>
6.kotak scroll dengan border dan background contoh 2
Masukkan teks disini
teks pertama teks kedua teks ketiga teks keempat teks kelima dan seterus nya |
Kodenya di bawah ini
<div style="text-align: left;"><table border="5" cellpadding="1"><tbody><tr><td><div style="background: #4169E1; border: 2px solid #008000; height: 100px; overflow: auto; padding: 10px; width: 200px;">Masukkan teks disini</div></td></tr></tbody></table>
Keterangan :
Untuk merubah background : Royalblue atau #4169E1
Untuk merubah warna border dan ukurannya : border: 2px solid #008000
Untuk merubah tinggi Scroll : height: 100px
Untuk merubah lebar Scroll : width: 150px
Demikianlah Cara Membuat Kolom Scroll Pada Blog,selamat berkreasi semoga berhasil.salam blogger.
Untuk merubah background : Royalblue atau #4169E1
Untuk merubah warna border dan ukurannya : border: 2px solid #008000
Untuk merubah tinggi Scroll : height: 100px
Untuk merubah lebar Scroll : width: 150px
Demikianlah Cara Membuat Kolom Scroll Pada Blog,selamat berkreasi semoga berhasil.salam blogger.
Makasih Bang Kunjungan baliknya ya www.sembilanlapan.net
BalasHapusmakasih bro,ditunggu kunjungan baliknya : http://bacainfomu.blogspot.com
BalasHapusthank gan infonya :)
BalasHapusterimakasih banyak juragan, sudah saya praktekkan di blog saya. jadi ga ke panjangan view nya nih, keren,,,,
BalasHapusini hasilnya http://asbabunnuzulquran.blogspot.com/p/daftar-isi.html
wah keren tuh, makasih banyak gan, sangat membantu saya yang masih belajar
BalasHapusmakasih bnyk gan infonya..
BalasHapuskunjungi http://www.lapakmitsubishi.com
Mantaaab
BalasHapusinfo sangat bermanfaat
BalasHapuskrim pembesar pantat
info yang sangat amat bermanfaat nih bang
BalasHapusterimakasih infonya mas ijin share ya mas...
BalasHapusartikel yang sangat berguna
BalasHapusterima kasih semoga sukses
makasih mas. da tak coba
BalasHapussuper sekali gan kunjungi My blog ok
BalasHapusterimakasih kak kunjungi web saya
BalasHapushttp://www.syahruni.com/