Cara Membuat Menu Dropdown Dibawah Header Blog - Menu Blog/Website Menjorok Kebawah

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.

Gambar: Menu Dropdown Blog dan
teks yang menjorok ke bawah Sub 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 Horizontal tidak 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

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.

Artikel Lainnya

Cara Membuat Menu Horizontal Blog Pada Header Blog
Cara Mendapatkan Google Site Verifikasi Meta Tag Blog
Cara Membuat Meta Tag Preferensi Penelusuran Blog-SiteLinks
Cara Membuat Posting Blog Terjadwal Sesuai Waktu Yang Ditentukan
Cara Mengatur Tata Letak Menu Horizontal Di Bawah Header Blog