Cara Membuat Scroll Box Sederhana dan Keren

بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْم

Assalamu’alaikum Wr. Wb

 

Blog Si Taufik | Scroll box merupakan kotak yang dilengkapi dengan fungsi scroll dimana kita dapat memasukkan text, gambar, video atau script / html kedalamnnya.

 

Dengan memadukan script / html dan gambar, Scroll box dapat dibuat mulai dari bentuk yang paling sederhana hingga bentuk yang cukup kompleks yang indah, dinamis dan atraktif, sehingga membuat tampilannya lebih menarik.

 

Pada kesempatan ini kita akan membuat Scroll box  dengan tampilan yang  sangat sederhanan, seperti contoh berikut ini :

 

Silahkan

cobt

isi disini

dengan

tulisan text,

gambar,

video

atau

script / html

 

 

Scroll box sangatlah bermanfaat terutama sekali dalam membuat Linklist, Site static ataupun lain sebagainya, cara memasangnyapun sangatlah simple dan mudah sekali, karena cobt hanya perlu memasang script / html dibawah ini : 

<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #B20000">
Silahkan cobt isi disini dengan tulisan,gambar, video atau script / html
</div>

Keterangan :   Ganti tulisan yang berwarna merah dengan isi scroll box yang sobat inginkan Kode yang berwarna biru adalah tinggi (height) dan lebar (width) scroll box, silahkan cobt ganti sesuai keinginan Kode yang berwarna ungu adalah  ukuran border warna,  cobt bisa ganti sesuai keinginan Ganti kode yang berwarna hijau untuk mengganti batas/border  (box / kotak). cek kode warna Disini

 

Contoh scroll box dengan isi tulisan berupa link :

 

<div style="overflow:auto;width:400px;height:200px;padding:10px;border:1px solid #B20000">

<a href="http://blogsitaufik.blogspot.com">Link 1</a>

<br />

<a href="http://blogsitaufik.blogspot.com">Link 2</a>

<br />

<a href="http://blogsitaufik.blogspot.com">Link 3</a>

<br />

<a href="http://blogsitaufik.blogspot.com">Link 4</a>

<br />

<a href="http://blogsitaufik.blogspot.com">Link 5</a>

<br /> 

<a href="http://blogsitaufik.blogspot.com">Link 6</a>

<br />

<a href="http://blogsitaufik.blogspot.com">Link 7</a>

<br />

<a href="http://blogsitaufik.blogspot.com">Link 8</a>

<br />

<a href="http://blogsitaufik.blogspot.com">Link 9</a>

<br /> 

</div>

 

Hasilnya seperti ini:

Link 1

Link 2

Link 3

Link 4

Link 5

Link 6

Link 7

Link 8

Link 9

Baiklah cobt  sampai disini dulu tutorial Cara Membuat Scroll Box Sederhan Dan Keren ini, Insyaallah di lain waktu dan kesempatan kita akan berjumpa lagi dengan tutorial lainnya dan tentunya di ruang yang sama, semoga tutorial ini dapat memberikan manfaat untuk cobt semua. Terimakasih

 

Selamat Mencoba & Semoga Bermanfaat

“ Tinggalkan Sebuah Komentar Anda Berupa Kritik/Saran Yang Bersifat Membangun”

Wassalam