Menu dalam media online internet memiliki peranan penting akan keberadaan media bersangkutan. Menu yang berada pas dibawah nama media online internet setidaknya dapat memberikan gambaran akan eksitensi media bersangkutan kepada pengunjungnya. Menu yang umumnya banyak dipergunakan media online internet blog/website adalah Menu Horizontal dan Dropdown Menu.
Walaupun kedua bentuk menu ini berbeda namun memiliki fungsi yang sama sebagai tempat untuk menulis/membuat sejumlah teks link baik teks link artikel judul posting,teks link Label serta dapat dipergunakan link umpan pada media online internet lainnya.
Perbedaan kedua Menu yang umumnya ditempatkan pada bagian header blog/website yaitu kalau menu Horizontaltidak memiliki sub menu sedangkan Dropdown Menu terdiri menu dan sub menu. Sub Menu akan terlihat akan terlihat menjorok kebawah bila teks link yang ada pada menu dropdown disorot pointer mouse.
Dan perlu diketahui untuk mendapatkan hasil maksimal membuat menu dropdown menggunakan kode berikut ini gagdet HTML/JavaScriptnya harus ditempatkan pas dibawah header blog atau berada di atas tampilnya judul posting blog.
Cara Membuat dropdown menu blog dapat dilakukan dengan langkah-langkah sebagai berikut:
Sign in di Blog
Klick Template
Klick Lanjutkan
Cari kode ]]></b:skin> dalam template blog. Untuk mudah menemukannya gunakan CTRL F lalu masuk masukan kode tersebut dalam teks box yang muncul
Tempatkan kode dibawah ini pada di atas kode ]]></b:skin>
Klick Simpan Template untuk menyimpan perubahan
Klick Tutup untuk keluar dari halaman template blog
Ini kode yang ditempatkan di ata kode ]]></b:skin>
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:orange;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:orange;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: orange;
text-decoration:none;
}
.menu li ul{
background:orange;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:1;
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:orange;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:orange;
border:0px;
color:orange;
text-decoration:none;
}
Keterangan:
Background:orange adalah warna latar. Silahkan mengganti warna tersebut sesuai warna diinginkan
Setelah melakukan step yang dijelaskan diatas selanjutnya mendapatkan gadget HTML/JavaScript untuk membuat teks link menu dropdown blog. Langkah-langkahnya sebagai berikut:
Klick Tata Letak
Klick Add Gadget/Tambah gadget
Klick HTML/JavaScript
Copy teks link dibawah ini yang akan dijadikan sebagai menu dan Sub Menu
Paste dalam gadget HTML/JavaScript yang ditambahkan tadi
Klick Simpan untuk menyimpan perubahan
Penulisan teks link sebagai teks link dropdown menu media online internet blog
<div style="text/css">
<ul class="menu">
<li><a href="nama-judul-posting.html">HOME</a></li>
<li><a href="">Menu I</a>
<ul>
<li><a href="nama-judul-posting.html">SUb Menu I - 1</a></li>
<li><a href="nama-judul-posting.html">Sub Menu I - 2</a></li>
</ul>
</li>
<li><a href="">Menu II</a>
<ul>
<li><a href="nama-judul-posting.html">Menu II - 1</a></li>
<li><a href="nama-judul-posting.html">Menu II - 2</a></li>
</ul>
</li>
<li><a href="">Menu III</a>
<ul>
<li><a href="nama-judul-posting.html">Menu II - 1</a></li>
<li><a herf="nama-judul-posting.html">Menu II - 2</a></li>
</ul>
</li>
<li><a href="nama-judul-posting.html">Menu IV</a>
<li>
</li>
</ul>
</div>
Keterangan:
Ganti teks-teks dibawah ini sesuai kebutuhan media online internet blog/website anda:
Teks nama-judul-posting-.html adalah judul posting atau nama label blog
Home, Menu I, Menu II, Menu III dan Menu IV adalah teks yang tampil pada menu dropdwon
Sub Menu I-1 dan Sub Menu I-2 merupakan sub dari menu I (teks link yang menjorok ke bawah)
Untuk lebih jelasnya penulisan Url dan Teks Link sebagai berikut:
<li><a href="http://www.ronamasa.com/2013/01/cara-membuat-menu-dropdown-dibawah.html">Dropdwon Menu</a></li>
Di antara kedua step untuk membuat dropdown menu diatas mana yang mau didahulukan baik langkah pertama atau ke dua tidak menjadi masalah. Akan tetapi jika ingin memudahkan merubah warna background lakukan terlebih dahulu langkah ke dua.
