6.12.2009

Elemen Halaman Mempunyai Fungsi Scroll

Untuk membuat elemen halaman dengan scroll seperti gambar dibawah (yang saya highlight!! Lihat tanda panahnya!!), bukan pekerjaan yang sulit, anda hanya perlu membuat kode seperti ini :

<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">
isi halaman
</div>

Untuk penempatannya caranya adalah: anda tinggal masuk ke halaman kustomisasi» Tata letak » Elemen Halaman » Tambah Gadget » Pilih untuk JavaScript/HTML » Masukan kodenya » Simpan » selesai.

Contoh :

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

001.<a href="http://neokoderblog.blogspot.com/2009/06/panduan-membuat-blog-di-blogspot.html"><span style="color: rgb(255, 255, 255);"></span> Panduan membuat blog di blogspot </a><br/>

002.<a href="http://neokoderblog.blogspot.com/2009/06/cara-setting-blog.html"><span style="color: rgb(255, 255, 255);"></span> Cara Setting Blog</a><br/>

003.<a href="http://neokoderblog.blogspot.com/2009/06/span.html"><span style="color: rgb(255, 255, 255);"></span> Cara membuat <span style="font-weight: bold;">Read More</span> di Template klasik</a><br/>

004.<a href="http://neokoderblog.blogspot.com/2009/06/cara-membuat-read-more-di-template-baru.html"><span style="color: rgb(255, 255, 255);"></span> Cara membuat <span style="font-weight: bold;">Read More</span> di template baru</a><br/>

005.<a href="http://neokoderblog.blogspot.com/2009/06/cara-memposting-script-code-html-pada.html"><span style="color: rgb(255, 255, 255);"></span> Cara memposting script code di HTML</a><br/>

006.<a href="http://neokoderblog.blogspot.com/2009/05/kadang-kita-ingin-memodifikasi-template.html"><span style="color: rgb(255, 255, 255);"></span> Cara membuat sidebar dengan kotak terpisah </a><br/>

007.<a href="http://neokoderblog.blogspot.com/2009/05/google-translate-bahasa-indonesia.html"><span style="color: rgb(255, 255, 255);"></span> Google Translate</a><br/>

008.<a href="http://neokoderblog.blogspot.com/2009/06/cara-modifikasi-kotak-komentar.html"><span style="color: rgb(255, 255, 255);"></span>Cara Modifikasi Kotak Komentar </a><br/>
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.
Isi dari halaman tersebut tentu saja bukan hanya berisi link , anda bisa mengisinya dengan yang anda inginkan. Misalkan tulisan biasa, gambar, iklan atau apa saja.Lengkapnya anda bisa baca disini.
Hasil akhirnya akan seperti ini :

Komentar :

ada 1
rey said...
pada hari 

biar scrollnya berada di sebelah kiri caranya gimana bro

Post a Comment

About This Blog

Blog ini saya persembahkan bagi mereka:
yang sedang terpuruk dan berusaha bangkit lagi;
yang normal dan akhirnya menjadi cacat;
yang putus asa dan kehilangan harapan....

tidak pernah ada kata terlambat....
untuk belajar
untuk berbuat
untuk menjadikan kehidupan ini menjadi lebih baik

Jangan pernah menyerah... Berbuat dan berbuatlah...
Karena pada saat anda melakukannya, "guru kehidupan" akan hadir dan menerangi hidup anda..

L i v e ~T r a f f i c ~F E E D J I T

P E N G I K U T

  © Blogger templates ProBlogger Template by Ourblogtemplates.com 2008 for NeokoderBlog

Back to TOP