cara membuat blog
Elemen Halaman Mempunyai Fungsi Scroll
Facebook
Twitter
RSS
gplus
Browse » Home » , , » Elemen Halaman Mempunyai Fungsi Scroll

Elemen Halaman Mempunyai Fungsi Scroll

Menanggapi salah satu pertanyaan dari pembaca blog ini tentang “bagaimana cara membuat elemen halaman yang mempunyai fungsi scroll seperti milik kang Rohman tentang Blog Tutorial untuk pemula yang ada di bagian atas blog ini?” Jawabannya boleh di bilang sederhana, sebab untuk membuat halaman seperti itu tidaklah harus membuat kode html yang sangat banyak, melainkan hanya sedikit kode untuk membuatnya. Penasaran seperti apa kodenya, ini dia yang di maksud.

Untuk membuat halaman seperti itu, anda hanya membuat kode seperti ini :

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

isi halaman

</div>

Contoh :

 

<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">
<ol>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html"> Panduan membuat blog</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/cara-setting-blog.html">Cara setting blog</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/memilih-template.html">Memilih template</a> </li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/mengatur-hurup-dan-warna.html">Mengatur huruf dan warna</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/cara-memposting-artikel.html">Cara memposting artikel</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-read-more-1.html">buat Read more pada template klasik</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-text-area.html">Cara membuat Text Area</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-menu-dropdown.html">Cara membuat menu dropDown</a><li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/upload-gambar-dan-foto-profile.html">cara Upload foto</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-link-1.html">Cara membuat Link(1)</a> </li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-link-2.html">Cara membuat Link(2)</a> </li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-marquee.html">Cara membuat marquee (text berjalan)</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-refresh.html">Cara membuat efek Refresh</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/kode-html-tampil-di-posting.html">Kode HTML tampil pada postingan</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/05/masalah-posting-artikel.html">Masalah posting artikel</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html">Simbol Yahoo! Emoticons</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html">Simbol Blogger Emoticons</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-jam-blog-di-sidebar.html">Cara Pasang jam </a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/05/membuat-banner-animasi.html">Cara membuat banner animasi</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-buku-tamu-di-sidebar.html">Cara membuat buku tamu</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/05/tutorial-html.html">HTML Tutorial</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/download-gratis.html">Free Download</a> </li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/05/membuat-foto-animasi.html">Foto animasi</a> </li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-statistik-tarcker.html">Cara pasang Statistik &amp; Tracker</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/05/ie-firefox-dalam-satu-komputer.html">Perlunya IE dan FireFox</a></li>
</ol>
</div>

 

Maka hasilnya akan seperti ini  :

 

 

Sedikit saya terangkan agar sedikit jelas.

 

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.

 

Selain kode-kode tersebut, tentu saja anda bisa menambahkan berbagai variasi sesuai dengan keinginan, misalkan backgroundnya berbentuk gambar, fontnya yang berbeda atau apa saja sesuai dengan keinginan anda.

Isi dari halaman tersebut tentu saja bukan hanya berisi link seperti yang kang Rohman contohkan, anda bisa mengisinya dengan yang anda inginkan. Misalkan tulisan biasa, gambar, iklan atau apa saja.

Saya masih bingung di mana nyimpen kode di atasss? hiksss…. seperti biasanya, anda tinggal masuk ke halaman dashbord » Rancangan » Elemen Halaman » Tambah Gadget » Pilih untuk JavaScript/HTML » Masukan kodenya » Simpan » selesai.

 

Selamat bereksperimen !

Di tulis oleh : Kang Rohman pada 6 September 2008

Description: Elemen Halaman Mempunyai Fungsi Scroll, Rating: 5

Reviewer: Unknown, ItemReviewed: Elemen Halaman Mempunyai Fungsi Scroll

1 komentar pada Elemen Halaman Mempunyai Fungsi Scroll :

  1. Anonim3 Desember 2014 pukul 00.05.00 WIB

    alhamdulillah akhirnya berhasil juga kode di atas diterapkan di wp
    terima kasih pak atas kodenya - salam hormat :)

    BalasHapus

Tolong komentarnya berhubungan dengan artikel yang ada. Komentar yang mengarah ke tindakan spam akan di hapus atau terjaring secara otomatis oleh spam filter.