Membuat Scroll Box HTML Dengan Background Gambar

Topic [Show]

Secroll box by Respontrik
Membuat Scroll Box - Tahukah anda dengan Scroll box, Yuk kita pelajari arti dan Praktek cara Membuat Scroll box html. Didalam dunia Blogger, ada kalanya ruang atau page pada Blog penuh. Ya mungkin terisi dengan Iklan banner atau bahkan terisi dengan berbagai macam Link. Nah agar kita bisa memasukkan puluhan witget di satu halaman, maka kita memerlukan sebuah Scroll box .. jadi Secroll box adalah... Suatu tempat atau Space / ruangan yang terprogram dengan bahasa HTML guna untuk memperluas ruangan witged atau obyek tertentu dalam suatu Page yang cara kerjanya seperti Browser dengan cara Scroll ke bawah atau bahkan kesamping. Saya sering menggunakan witged ini untuk keperluan menghemat space page pada halaman blog. Nah jika anda ingin membuatnya.. maka anda bisa Copy seleuruh kode HTML scroll box dibawah ini.


HTML Scroll Box

Contoh: - Silahkan anda Scroll ke Bawah dan lihat kode HTML Scroll box Seperti contoh ini


<div style="border: 2px solid black; height: 300px; overflow-x: hidden; overflow-y: scroll; yellow: 100%;background-color:#DCDCDC"> <div style="height: 25px;"> </div> </div>

Keterangan :
1. Border adalah Garis Tepi "Anda bisa merubahnya sesuai keinginan. Semakin besar Nilai Pixel maka akan semakin Besar pula Garis Tepi Scroll box
2. Solid Merupakan Warna pada Garis Tepi yang mana anda bisa merubahnya dengan Color in English language .. seperti White, Black, Red dll
3. Height adalah ukuran Tinggi ... Dalam HTML diatas tertulis 300px anda bisa merubahnya ke 300% agar sesuai dengan Layar
4. Background-color untuk memberi warna Pada Background box


HTML scroll box diatas adalah dasar utama dalam Pembuatan Scroll box sederhana... Anda bisa membuat scroll box yang lebih kece lagi seperti di bawah ini yaitu beberapa Contoh Scroll box HTML Dnegan Background Gambar sesuai keinginan


HTML Scroll Box Background Gambar 1

Contoh: - Silahkan anda Scroll ke Bawah dan lihat kode HTML Scroll box Seperti contoh ini

<div style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuEMRdYFDgZEGVEXtk6yryHHoaPm9k-eaOBzBPSVIKHMikRZytQSPeIICspCQnHWcmVHHARn1umwhojc9cGxLh00ujsz_bKZXQnJCQEnoIei0wilVvvMvQ0MWqPY5yRCP0t4Gd4SNbhE/s1600/background-texture-1014963__480.jpg); border: 2px solid black; height: 100px; overflow-x: hidden; overflow-y: scroll;"> <div style="height: 25px;"> <b>Contoh:</b> - Silahkan anda Scroll ke Bawah dan lihat kode HTML Scroll box Seperti contoh ini </div> </div>

HTML Scroll Box Background Gambar 2

Contoh: - Silahkan anda Scroll ke Bawah dan lihat kode HTML Scroll box Seperti contoh ini




<div style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Background-clouds.jpg/120px-Background-clouds.jpg); border: 2px solid black; height: 100px; overflow-x: hidden; overflow-y: scroll;"> <div style="height: 25px;"> <b>Contoh:</b> - Silahkan anda Scroll ke Bawah dan lihat kode HTML Scroll box Seperti contoh ini <br /></div></div>

HTML Scroll Box Background Gambar 3

Contoh: - Silahkan anda Scroll ke Bawah dan lihat kode HTML Scroll box Seperti contoh ini


<div style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn2tkJ7hegyL8KgRSUVVf_RLsd3PIx4If45IvKJnZZ6Um4nNOehbs8s2iXZrCX0aIhvxDrhdKOpu1PjJXpE3Xsla0KwRQNqwMkYGZpMDa_vS7fUKo321IIipzLrpVGNHtY72T2EvM8c8U/s1600/flowers-19830__480.jpg); border: 2px solid black; height: 100px; overflow-x: hidden; overflow-y: scroll;"> <div style="height: 25px;"> <b>Contoh:</b> - Silahkan anda Scroll ke Bawah dan lihat kode HTML Scroll box Seperti contoh ini </div> </div>

Tertarik ingin Memiliki Scroll box diatas... silahkan Download Source Codenya dibawah ini

DOWNLOAD

Fungsi Scroll Box HTML
Seperti di terangkan pada paragraf diatas bahwa Scroll box berfungsi untuk menghemat halam atau Page suatu Website atau Blog ... Entah itu dibagian Sidebar, header, Footer atau bahkan di bagian Landing Post. Scroll box ini sering di gunakan oleh para Blogger Lirik lagu atau blogger yang membahas tentang HTML, CSS, JS, PHP script. Nah bagi anda yang ingin Membuat HTML background Scroll box seperti di atas... bisa mengikuti Panduan Tersebut. Apabila ada yang ingin anda tanyakan, Silahkan ajukan langsung di kolom Komentar.