Rabu, 07 Desember 2011
Membuat Menu Dengan Fungsi Scroll
02.17 | 
Diposting oleh
DIMAS GENESIS |
Menu scroll ini berguna untuk menghemat tempat jika menu kita terlalu panjang. Selain membuat menu dengan scroll, kita juga bisa membuat menu dengan marquee ataupun text berjalan. Selain artikel kita sendiri, menu scroll bisa di isi juga dengan artikel di situs lain.
Jika tertarik, berikut langkah - langkah pembuatannya.
Klik Rancangan > Elemen Laman > Tambah Gadget.
Pilih HTML/JavaScript.
Berikan judul pada kolom Judul sesuai keinginan Anda.
Copy kode di bawah ini dan paste di kolom yang ada.
<div style="border: 1px solid #eee; height: 100px; overflow: auto; padding: 10px; width: 250px;">
1.<a href="http://72bidadari.blogspot.com/2011/09/membuat-slider-artikel-dengan-jquery.html">Membuat Slider Artikel Dengan JQuery</a>
2.<a href="http://72bidadari.blogspot.com/2011/09/membuat-search-engine-sendiri-di-blog.html">Membuat Search Engine Sendiri Di Blog</a>
3.<a href="http://72bidadari.blogspot.com/2011/07/mengamankan-data-di-flashdisk.html">Mengamankan Data Di Flashdisk</a>
4.<a href="http://72bidadari.blogspot.com/2011/08/menyengsarakan-anggota-dpr.html">Menyengsarakan Anggota DPR</a>
5.<a href="http://72bidadari.blogspot.com/2011/08/10-member-pertama-di-facebook.html">10 Member Pertama Di Facebook</a>
</div>
Keterangan:
Contoh menu scroll
Jika tertarik, berikut langkah - langkah pembuatannya.
Klik Rancangan > Elemen Laman > Tambah Gadget.
Pilih HTML/JavaScript.
Berikan judul pada kolom Judul sesuai keinginan Anda.
Copy kode di bawah ini dan paste di kolom yang ada.
<div style="border: 1px solid #eee; height: 100px; overflow: auto; padding: 10px; width: 250px;">
1.<a href="http://72bidadari.blogspot.com/2011/09/membuat-slider-artikel-dengan-jquery.html">Membuat Slider Artikel Dengan JQuery</a>
2.<a href="http://72bidadari.blogspot.com/2011/09/membuat-search-engine-sendiri-di-blog.html">Membuat Search Engine Sendiri Di Blog</a>
3.<a href="http://72bidadari.blogspot.com/2011/07/mengamankan-data-di-flashdisk.html">Mengamankan Data Di Flashdisk</a>
4.<a href="http://72bidadari.blogspot.com/2011/08/menyengsarakan-anggota-dpr.html">Menyengsarakan Anggota DPR</a>
5.<a href="http://72bidadari.blogspot.com/2011/08/10-member-pertama-di-facebook.html">10 Member Pertama Di Facebook</a>
</div>
Keterangan:
- Tulisan berwarna merah adalah URL yang ingin di taruh di menu, silahkan diganti dengan URL yang lain.
- Tulisan berwarna biru adalah judul menu yang muncul, silahkan diganti juga.
- width --> lebar menu
- height --> tinggi menu
- padding --> jarak antar tulisan dengan garis pinggir
- border --> ketebalan garis pinggir
- overflow : auto adalah kode untuk penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.
- width : 250px adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 310 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 : 100px adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 300px.
- padding : 10px adalah 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 adalah garis pada pembatas setiap sisinya, #eee untuk kode warna abu-abu, silahkan diganti dengan kode warna yang lain.
Label:
Tutorial
Langganan:
Posting Komentar (Atom)
0 komentar:
Posting Komentar