Cara Membuat Kolom Scroll

 created by Adhe N.tawakkal


Cara Membuat Kolom Scroll - 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

teks pertama
teks kedua
teks ketiga
teks keempat

Kodenya di bawah ini
<textarea cols="60" rows="4">Masukkan Tulisan atau teks disini

.........<../..textarea..>.......
  2. kotak scroll dengan border dan background contoh 1

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;"> <div style="background: #FFFFFF; border: 3px solid #FF0000; height: 50px; overflow: auto; padding: 10px; width: 500px;"> Masukkan teks disini</div>

 Keterangan :
Untuk merubah background : #FFFFFF
Untuk merubah warna border dan ukurannya : border: 2px solid #FF0000
Untuk merubah tinggi Scroll : height: 50px
Untuk merubah lebar Scroll : width: 500px


3. Kotak Buka Tutup Super SEO Di Blog.
Seperti ini ni sob contoh dari kotak buka tutup yang akan di buat.

>Masukkan Tulisan atau teks disini

Gimana soob, SEO dan Cantik banget kan... hehehehehee... Langsung saja sob, ini nih kodenya.
Klik buka untuk mendapat codenya ; <!---Start code show hide by;"afa aprilion-amigos.net"---> <div style="margin-bottom: 2px;"> <div style="margin-top: 5px; text-align: left;"> <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin-top: 5px; width: 60px;" type="button" value="Buka" /> </div> <div style="background-color: black; border-bottom: 2px solid #ff0000; border-left: 20px solid #ff6600; border-right: 2px solid #ff0000; border-top: 2px solid #ff0000; margin: 0px; padding: 6px;"> <div style="display: none;"> <span style="color: white; font-style: italic;"> ... Isi Teks Sobat... </span></div> </div> </div> <!---End code show hide by;"afa aprilion-amigos.net"--->

Keterangan ;
Code;

left

;">

; merupakan code untuk penempatan tombol Buka Tutupnya.. Mau sobat taruh di sisi kiri dengan code left. Untuk ditengah dengan code center. Untuk di sisi kanan dengan code right. ingat, hanya ubah yang berwarna merah aja ya soob.
Code; Tulisan  Tutup  Buka  Buka  yang berwarna merah, silakan sobat ganti debgan sesuka sobat.
Code; width: 60px ; Yang berwarna merah tersebut Merupakan nilai ukuran lebar dari tombol Buka Tutup tersebut.. Silakan juga sobat rubah sesuai keinginan sobat.Tapi hanya sobat rubah nilainya saja yaa.
Code; ... Isi Teks ... ; Ganti dengan Isi artikel sobat sendiri, atau terserah sobat

Artikel Terkait :