10 Cara Membuat Kolom Scroll di Blog

Cara Membuat Kolom Scroll di Blog - Sering kali kita jumpai postingan sebuah blog baik itu code html,gambar,atau artikel pilihan yang begitu panjang,sehingga hal ini dapat memakan tempat dan membuat tampilan tidak rapih. Dengan keadaan demikian kita kita tidak merasakan kenyamanan saat melihatnya.

Untuk mengatasi mengatasi masalah tersebut ada baiknya kita membuat  suatu kolom atau kotak dengan fungsi scroll dengan demikian tampilan akan terlihat menjadi rapih, dengan menggunakan kolom scroll kita dapat memasukan didalamnya baik berupa code html,gambar,semua artikel ataupun yang lainnya. Kolom scroll juga dapat kita atur ukurannya baik besar  maupun kecilnya, dan anda pun dapat mengatur dan menyesuaikan warna pada kolom scroll.

Pada dasarnya untuk membuat kolom scroll kita perlukan ukuran panjang dan lebar :

height: 100px;
overflow: scroll;
width: 500px;

 mari kita coba lihat beberapa bentuk kolom scroll dibawah ini:

1. kotak scroll tanpa background biasa

Masukkan teks anda disini

kode :

<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 anda disini</span></span></div>

2. kotak scroll dengan border tanpa background biasa v.1 

Masukkan teks anda disini

kode :

<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 anda disini
</div>

3. kotak scroll dengan border tanpa background biasa v.2

Masukkan teks anda disini

kode :

<div style="border: 1px solid #eee; height: 100px; overflow: auto; padding: 10px; width:400px;">
Masukkan teks anda disini
</div>

4. kotak scroll dengan warna background

Masukkan teks anda disini

kode :

<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 anda disini</div>

5. kotak scroll dengan border dan background warna v.1

Masukkan teks anda disini

kode :

<div style="text-align: left;"><div style="background: #000000; border: 3px solid #4169E1; height: 100px; overflow: auto; padding: 20px; width: 500px;">Masukkan teks anda disini</div>

6. kotak scroll dengan border dan background warna v.2

Masukkan teks anda disini

kode :

<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: 500px;">Masukkan teks anda disini</div></td></tr></tbody></table>

7. kotak scroll dengan textarea v.1

Masukkan Tulisan atau teks disini

kode :

<textarea cols="70" rows="4">Masukkan teks anda disini</textarea>

8. kotak scroll dengan textarea v.2

Masukkan teks anda disini

kode :

<textarea cols="70" onclick="this.select();" rows="6">Masukkan teks anda disini</textarea>

9. kotak scroll dengan garis putus-putus

Masukkan teks anda disini

kode :

<div style="border: 3px dotted #000; padding: 5px;">
Masukkan teks anda disini
</div>

10. kotak scroll dengan double garis

Masukkan teks anda disini

kode :

<div style="border: 3px #000 double; padding: 10px;">
Masukkan teks anda disini
</div>

Keterangan :

background : Royalblue atau #4169E1
warna border dan ukurannya : border: 2px solid #008000
tinggi Scroll : height: 100px
lebar Scroll : width: 500px

Demikianlah Cara Membuat Kolom Scroll Pada Blog, semoge bermanfaat!

Share this post