Artikel Terkini

Friday, August 31, 2012

belajar membuat menu drop down

0 comments
  sudah lama ngan berbagi tips belajar html, nah pada kesempatan ini saya akan coba membagikan tips yang sudah sangat umum digunakan namun sangat bermanfaat banyak yaitu Belajar membuat menu drop down
Adapun keuntungan dari menggunakan menu drop down sendiri adalah kita dapat mengatur posisi yang kita inginkan selain itu kita juga dapat mengatur ukuran panjang dan lebar kotak drop downnya.
Pada menu drop down sendiri kita bisa memasukkan apa saja yang kita inginkan, bisa berupa link, gambar, index, dll jadi ini akan sangat membantu tata letak dari blog atau web kita.
Teknik pembuatannya sangat sederhana saja:

<div style="border: 1px solid rgb(153, 153, 153); overflow: auto; width: auto; height: 400px; text-align: left;">
(isi dengan kode, data, gambar atau file apa saja disini)
div>

Sebagai contoh saya ingin membuat menu partner link di halaman utama maka penulisannya menjadi:
<div style="border: 1px solid rgb(153, 153, 153); overflow: auto; width: auto; height: 400px; text-align: left;">
<ul>
<li ><a  href="http://www.youtube.com">youtube</a></li>
<li><a href="http://www.cerdaskom.com" target="_blank" alt="Free download tips blog.">Free download Tips Blog</a></li>
<li class="vcard"><a class="fn url" href="http://septia-mujizat.blogspot.com" rel="friend target="_blank">Septia's Blog</a></li>
</ul>
div>
Catatan:
Border: 1px merupakan garis tepi, bisa diganti 0 tanpa garis tepi atau 2 jadi lebih tebal
Overflow: auto (otomatis menyesuaikan drop downnya)
Width: Auto merupakan lebar, anda bisa mengaturnya berupa angka atau auto artinya otomatis menyesuaikan dengan lebar blog atau web
Heigh: 400px merupakan tinggi dari menu drop down yang kita buat
text-align: left : penulisannya apakah rata kiri (left), rata kanan (right) atau center tergantung anda.
Diatas sengaja saya berikan 3 jenis link yang berbeda supaya rekan rekan paham bahwa penulis link pun memiliki tekni tersendiri:
1. link pertama yaitu youtube pemulisannya menggunakan model biasa
2. Link kedua yaitu cerdaskom punya saya sendiri ketika di klik akan membuka di halaman baru, selain itu alt merupakan penjelasan tentang web sehingga akan lebih mudah di index oleh google
3. Menggunakan vcard, mengenai vcard saya pikir rekan-rekan pasti sudah tahu kan.

Oke semoga artikel diatas membantu!

Leave a Reply