Minggu, 03 Juli 2011

Membuat Scroll Box

Untuk menanggapi pertanyaan teman blogger mengenai cara membuat scroll box, mengenai scroll box ini yaitu kotak yang bisa di masukkan teks berlink atau isi halaman. Cara membuatnya tidaklah sulit dan tidak membutuhkan banyak kode HTML, sangat mudah, dan hanya mengunakan kode HTML yang sedikit, penasaran bukan?, berikut caranya:

  1. Buatlah gadget baru atau tambah gadget, pilih HTML/Java script.
          Inilah kode script yang sangat sederhana itu.
<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">


isi halaman


</div>
     2.Copy paste kode tersebut, dan gantilah tulisan isi halaman dengan isi halaman yang anda inginkan,
  
        contoh :

<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">
<a href="http://blogmeinside.blogspot.com/2011/07/memasang-cbox-pada-blog.html">Cara mudah memasang Cbox pada blog</a>
<br />
<a href="http://blogmeinside.blogspot.com/2011/07/memasang-shoutmix.html">Cara memasang shoutmix pada blog</a>
<br />
<a href="http://blogmeinside.blogspot.com/2011/07/memasang-kotak-pencarian.html">Memasang kotak pencarian pada blog</a>
<br />


</div>

      3. Jika sudah selesai klik simpan, lihat hasilnya.
      4. Sedikit penjelasan didalam kode tersebut, yang berperan besar adalah kode yang ada dalam style. Dengan style itulah kita bisa membuat apa yang kita inginkan. Berikut adalah perintah-perintah yang di pakai :

overflow:auto; » kode ini agar tercipta scrolling atau penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.
width:300px; » adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 300 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).
height:200px; » adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 250px atau nilai yang lainnya.
padding:10px; » adalah kode pembuat jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px;
border:1px solid #eee » agar bidang tersebut terlihat ada kotaknya, jika anda tidak menginginkan ada terlihat kotaknya, maka tinggal di hapus saja.

Selamat mencoba.....

cara menambah scroll box di blog, cara pasang scroll box di blogger, tutorial scroll box di blogspot, tips memasang scroll box di blog, scroll box tutorial, membuat scroll box di artikel blog.

1 komentar:

Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

Posting Komentar

Adsense Indonesia Paid Review Indonesia