Cara Membuat Kotak Scroll Pada Blog

Untuk menghemat ruang pada blog anda, terutama pada sidebar atau pun halaman postingan sekalipun, anda dapat menempatkan suatu script atau tulisan yang panjang kedalam kotak scroll agar terlihat ringkas dan simple. Di bawah ini saya menawarkan kotak scroll 4 versi, yaitu kotak scroll dengan latar belakang transparans, kotak scroll dengan latar belakang berwarna, Kotak Scroll dengan latar belakang Gambar dan kotak scrol Horizontal. Silahkan anda pilih sesuai dengan keinginan anda.

Berikut adalah kode script kotak scroll:

Kotak Scroll Dengan Latar Belakang Transparans.

Isi Kotak scroll anda di sini sesuai dengan keinginan anda dan anda dapat merubah lebar dan tinggi kotak scroll sesuai dengan keinginan anda serta besar font juga bisa anda rubah, pkoknya sesuaikan dengan tempat anda memasang kotak scroll.

Kodenya:

<div style="height:120px;width:250px;font:16px/26px Georgia, Garamond, Serif;overflow:scroll;">
Isi Kotak scroll anda di sini sesuai dengan keinginan anda.
</div>

Kotak Scroll Dengan Latar Belakang Berwarna:

Isi Kotak scroll anda di sini sesuai dengan keinginan anda dan anda dapat merubah lebar dan tinggi kotak scroll sesuai dengan keinginan anda serta besar font juga bisa anda rubah, pkoknya sesuaikan dengan tempat anda memasang kotak scroll.

Kodenya:

<div style="height:90px;width:160px;overflow:scroll;background-color:#67F152;">Isi Kotak scroll anda di sini sesuai dengan keinginan anda 'background-color' property.</div>

Kotak Scroll Dengan Latar Belakang Gambar:

Anda bisa menggantikan kode gambar latar belakang dan besar font sesuai keinginan anda serta warna tulisan silahkan anda atur supaya tulisan tampak jelas terlihat di atas gambar.

Kodenya:

<div style="height:220px;width:325px;overflow:scroll;font:35px/45px cursive;color:#A6120D;background:url('http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg');">Anda bisa menggantikan kode gambar latar belakang dan besar font sesuai keinginan anda serta warna tulisan silahkan anda atur supaya tulisan tampak jelas terlihat di atas gambar.
</div>

Kotak Scroll Horizontal:

Isi Kotak scroll anda di sini sesuai dengan keinginan anda dan anda dapat merubah lebar dan tinggi kotak scroll sesuai dengan keinginan anda serta besar font juga bisa anda rubah, pkoknya sesuaikan dengan tempat anda memasang kotak scroll.

Kodenya:

<div style="border:1px solid black;width:200px;height:100px;overflow-y:hidden;overflow-x:scroll;">
<p style="width:250%;">
Isi Kotak scroll anda di sini sesuai dengan keinginan anda.
</p>
</div>

Keterangan: Teks Dan Gambar serta lebar dan tinggi pada kotak scroll bisa anda rubah sesuai dengan keinginan anda.