25 Februari 2011

Scroll Box dengan Border

Scroll box pada umumnya digunakan untuk menghemat ruang pada halaman blog. Dengan menggunakan scroll box pula menjadikan halaman blog menjadi lebih rapi, dan penggunaannya bisa disesuaikan dengan kebutuhan. Sebagai contoh, scroll box bisa dipakai untuk label, link banner, posting artikel, posting kode HTML dan lain-lain.

Pada kesempatan ini saya coba berbagi sedikit mengenai cara menggunakan scroll box yang dipadukan dengan border untuk mempercantik tampilannya.

  • Scroll box dengan border solid

Contoh penggunaan scroll box dengan menggunakan border solid. Warna untuk border bisa anda ganti sesuai selera masing-masing. Anda juga bisa menambahkan efek marque.

  • Scroll box dengan border groove

Contoh penggunaan scroll box dengan menggunakan border groove. Anda juga bisa menambahkan efek marque.

  • Scroll box dengan border dotted

Contoh penggunaan scroll box menggunakan border dotted. Anda juga bisa menambahkan efek marque.

  • Scroll box dengan background

Contoh penggunaan scroll box menggunakan border groove disertai background. Anda juga bisa menambahkan efek marque.

Untuk contoh scriptnya bisa dilihat seperti di bawah ini:


<!-- HTML codes by infokita1978.com -->
<div style="background-color:blue;height:80px;width:180px;overflow:scroll;border:8px groove #0ADA0A;">Contoh penggunaan scroll box menggunakan border groove disertai background</div>
Keterangan :
height = untuk mengatur tinggi
width = untuk mengatur lebar
border = bisa diganti ukurannya sesuai kebutuhan, semakin besar nilainya maka semakin lebar contoh: coba anda ganti dengan 10px untuk melihat bedanya.
Scroll box juga bisa dipadukan dengan efek marque.
groove = jenis border, anda bisa menggantinya dengan solid, dotted, dashed dan lainnya.
#0ADA0A = warna border
Anda juga bisa menggunakan kode banner dengan mengganti tulisan berwarna merah diatas dengan kode banner anda.

Sekian dulu bos... dan semoga bermanfaat, salam.

Artikel Terkait Lainnya



5 komentar:

siapadia mengatakan...

Bisakah item ini di gunakan untuk blog berbasis wordpress ? kalau bisa apakah sama cara peletakan kode HTMLnya ?

Postingannya mantab-mantab, di tunggu artikel lainnya.

blog.virusmoney.com mengatakan...

Simpan dulu informasi ini siapa tahu akan di gunakan di masa yang akan datang...

cafebisnis.com mengatakan...

Bisakah request artikel, "cara membuat teks berjalan ?"

kampungwirausaha.com mengatakan...

jalan-jalan sambil baca-baca buat nambah-nambah pengetahuan tentang blog, boleh saya bertanya ? mas makan apa sih, kok artikelnya bagus-bagus semua ?

Info Kita1978 mengatakan...

@siapadia: Terima kasih sudah berkunjung ke blog sederhana ini. Saya minta maaf sebelumnya karena untuk sekarang ini saya hanya mencoba di blogspot saja, kalau wordpress saya belum pernah coba.

@blog.virusmoney.com: Thanks sudah berkunjung, salam.

@cafebisnis.com: Oke gan... jika ada waktu luang saya coba mengulas sedikit tentang teks berjalan. Terima kasih sudah berkunjung.

@kampungwirausaha.com: hehehe... ada-ada aja agan ini. Thanks atas kunjungannya, salam.

Posting Komentar

PrevPage NextPage home