Kotak menu MARQUEE

Teman-teman masih ingat apa itu Menu Drop-down, apa kegunaannya, dan bagaimana cara membuatnya? Itu hanya 1 (satu) dari sekian banyak cara dalam membuat sebuah menu (Kotak Menu). Sebenarnya ada banyak cara lain lagi untuk membuat sebuah Menu yang berisi sejumlah Link pada sebuah Blog. Selain Menu Drop-down, berikut akan saya paparkan satu tehnik lagi dalam membuat sebuah menu entah itu untuk keperluan penempatan Link dari hasil bertukar link (Blogroll) atau bisa juga berisi Arsip suatu blog sebagaimana menu drop-down yang sudah pernah saya jelaskan.

Namanya adalah Kotak Menu Marquee. Seperti ini neh contohnya :


Aksesoris Jam

Avatar

Aksesoris Kalender

Aksesoris Web-Counter

Icon Address Bar



Kalau pada kotak menu drop-down menu dikemas seringkas mungkin sehingga yang tampil hanya bagian judulnya saja, untuk melihat menu selanjutnya harus di-klik tombol drop-downnya. Sedangkan keistimewaan menu Marquee, meskipun visualnya lebih besar dari menu drop-down (tergantung setting masing-masing), namun kemampuannya menampung link yang banyak pada kondisi area yang sempit dan semua menu bisa tampil bahkan secara otomatis akan lebih mempercantik tampilan blog teman-teman.

Untuk membuatnya ikuti langkah-langkahnya berikut ini :

1. Copy kode yang ada di bawah ini :

<MARQUEE bgcolor="a9a9a9" align="center" direction="up" height="100" scrollamount= "2" onmouseover='this.stop()' onmouseout='this.start()' width="50%" Title="Klik yang Anda cari disini"> <a href="Link Tujuan">Teks yang ditampilkan</a> <br /> <a href="Link Tujuan">Teks yang ditampilkan</a> <br /> <a href="Link Tujuan">Teks yang ditampilkan</a> <br /> <a href="Link Tujuan">Teks yang ditampilkan</a> <br /> <a href="Link Tujuan">Teks yang ditampilkan</a> <br /> dan seterusnya ... <br /> </MARQUEE>

2. Untuk memasangnya seperti biasa, teman-teman harus Login dulu ke blogger.com dengan user-id teman-teman

3. Klik LAYOUT

4. Klik PAGE ELEMENTS, Pilih Add a Page Element untuk menambah elemen baru

5. Pilih kelompok HTML/ Java script, kemudian tekan tombol Add to Blog

6. Selanjutnya akan muncul jendela baru “ Configure HTML/ Java script “, Paste kode HTML yang di copy tadi pada kotak isian “Content”. Jika tidak diperlukan kotak isian “Title” dapat dikosongkan agar subjudul tersebut tidak ditampilkan ke halaman blog.

7. Jangan lupa menekan tombol Save untuk menyimpan kode tersebut ke dalam blog

8. Selesai dech…

Dan berikut adalah contoh kode kotak Marquee milik saya sebagaimana hasilnya yang sudah ditampilkan di atas :

<MARQUEE bgcolor="a9a9a9" align="center" direction="up" height="100" scrollamount= "2" onmouseover='this.stop()' onmouseout='this.start()' width="50%" Title="Klik yang Anda cari disini"> <a href="http://misnozone.blogspot.com/2009/10/aksesoris-jam-untuk-blog.html">Aksesoris Jam</a> <br /> <a href="http://misnozone.blogspot.com/2009/10/avatar-di-comments-blog-new.html">Avatar</a> <br /> <a href="http://misnozone.blogspot.com/2009/10/aksesoris-kalender.html">Aksesoris Kalender</a> <br /> <a href="http://misnozone.blogspot.com/2009/10/aksesoris-web-counter.html">Aksesoris Web-Counter</a> <br /> <a href="http://misnozone.blogspot.com/2009/10/ganti-icon-address-bar-gaulz.html">Icon Address Bar</a> <br /> </MARQUEE>

B O N U S

Disamping untuk penggunaan di atas, Marquee juga banyak digunakan untuk pembuatan teks berjalan/ bergerak untuk sekedar informasi dan “pemanis” tampilan blog. Dan berikut Atribut Marque dan penjelasannya :

BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks

DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks

BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan

Scroll --> teks bergerak berputar

Slide--> teks bergerak sekali lalu berhenti

Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)

TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks

SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semajin cepat gerakannya.

SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik

LOOP="angka|-1|infinite" --> Mengatur jumlah loop

WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen


Contoh kode marquee dari gerakan :

<MARQUEE align="center" direction="right" height="200" scrollamount="2" width="50%">
marquee dari kanan ke kiri
</MARQUEE>

Dan hasilnya:


marquee dari kanan ke kiri



Contoh kode marquee dari perilaku gerakan :

<MARQUEE align="center" direction="left" height="200" scrollamount="3" width="75%" behavior="alternate">
marquee menurut perilaku gerakan
</MARQUEE>

Dan hasilnya:


marquee menurut perilaku gerakan



Contoh kode marquee dengan variasi huruf & warna latar belakang (background) :

<div align="left"><FONT FACE="georgia" color="grass"><B><MARQUEE BGCOLOR="Pink" width="75%" scrollamount="3" behavior="alternate">
marquee dengan variasi huruf dan background
</MARQUEE></b></FONT></div>

Dan hasilnya:

marquee dengan variasi huruf dan background

Dari contoh diatas silahkan teman-teman kembangkan lagi dengan kreativitas masing-masing, silahkan teman-teman otak-atik sendiri kode-kode diatas sehingga tercipta kreasi baru yang lebih enak dipandang.

Selamat mencoba!