Bagaimana Cara Membuat Menu Dropdown Horizontal di Blog?
Tutorial Terbaru Cara Membuat Menu Dropdown Horizontal di Blog
 |
| Cara Membuat Menu Dropdown Horizontal di Blog |
Sekilas tentang menu dropdown horizontal ini yaitu menu navigasi yang apabila di sorot oleh mouse akan secara otomatis mengeluarakan sub menu yang terkandung di dalamnya, tentunya nanti akan keluar berupa sub-sub menu.
Ada beberapa tahapan yang harus di persiapkan yaitu yang pertama adalah menentukan menu utama apakah yang akan di tampilkan? misalnya adalah Home, Belajar Bisnis Online, BELAJAR SEO GOOGLE, CARA MEMBUAT WEBSITE, serta TENTANG SAYA. Yang kedua adalah mempersiapkan sub menu dari menu utama yang akan di tampilkan.
Nah sudah barang tentu dari judul-judul yang saya sebutkan tadi itu mempunyai alamat URL masing-masing, langkah selanjutnya adalah mencatat alamat URL setiap judul yang di pasang dalam menu dropdown horizontal.
Setiap template tentunya akan berbeda kodenya, untuk memberi gambaran saja maka yang saya terangkan adalah template minima dengan pemasangan menu dropdown di bagian header.
Untuk Lebih memahaminya apa yang akan di buat dalam pembahasan artikel ini, silahkan kunjungi Demo dari Cara Membuat Menu Dropdown Horizontal di Blog
Ingin tahu Cara Membuat Menu Dropdown Horizontal di Blog? silahkan baca tutorialnya sampai selesai....
Memasang Kode CSS Menu Drop Down di Blog
- Silahkan login ke blogger dengan ID anda.
- Pilih Blog yang akan di pasang Menu Dropdown Horizontal.
- Kemudian Klik Menu Template.
- Lalu lanjutkan dengan mengklik Edit HTML.
- Copy seluruh kode template yang ada lalu paste pada notepad kemudian save. ini untuk backup data bila terjadi kesalahan editting.
- Kemudian cari kode ]]></b:skin>
 |
| Cara Membuat Menu Dropdown Horizontal di Blog |
 |
| Cara Membuat Menu Dropdown Horizontal di Blog |
- Copy paste kode berikut, dan simpan tepat di atas kode ]]></b:skin>
#CmwpMenu {
background: warna1;
width: 880px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: warna2;
font-weight: bold;
margin-bottom: 30px;
padding: 2px;
}
#Cmwpbox {
width: 875px;
float: left;
margin: 0;
padding: 0;
}
#punch {
margin: 0;
padding: 0;
}
#punch ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#punch li {
list-style: none;
margin: 0;
padding: 0;
}
#punch li a, #punch li a:link, #punch li a:visited {
color: warna2;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 9px 15px 8px;
}
#punch li a:hover, #punch li a:active {
background: warna2;
color: warna1;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#punch li li a, #punch li li a:link, #punch li li a:visited {
background: warna1;
width: 150px;
color: warna2;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#punch li li a:hover, #punch li li a:active {
background: warna2;
color: warna1;
padding: 7px 10px;
}
#punch li {
float: left;
padding: 0;
}
#punch li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#punch li ul a {
width: 140px;
}
#punch li ul ul {
margin: -32px 0 0 171px;
}
#punch li:hover ul ul, #punch li:hover ul ul ul, #punch li.sfhover ul ul, #punch li.sfhover ul ul ul {
left: -999em;
}
#punch li:hover ul, #punch li li:hover ul, #punch li li li:hover ul, #punch li.sfhover ul, #punch li li.sfhover ul, #punch li li li.sfhover ul {
left: auto;
}
#punch li:hover, #punch li.sfhover {
position: static;
}
- Sebelumnya silahkan di ganti dulu kode warna1 dan warna2 dengan kode warna yang anda inginkan,mengikuti warna blog anda, sebagai contoh bisa mengikuti kode di bawah ini:
Menu Hitam
warna1 = #555555
warna2 = #FFFFFF
Menu Biru
warna1 = #66bbdd
warna2 = #004661
Menu Hijau
warna1 = #38761d
warna2 = #FFFFFF
Menu Abu-abu
warna1 = #d4d4d4
warna2 = #555555
Menu Kuning
warna1 = #ffd966
warna2 = #d4812a
warna1 = #555555
warna2 = #FFFFFF
Menu Biru
warna1 = #66bbdd
warna2 = #004661
Menu Hijau
warna1 = #38761d
warna2 = #FFFFFF
Menu Abu-abu
warna1 = #d4d4d4
warna2 = #555555
Menu Kuning
warna1 = #ffd966
warna2 = #d4812a
- Jika sudah mengganti semua kode warna di atas silahkan klik "SIMPAN TEMPLATE" (Ikuti Cara-caranya Seperti yang terlihat pada gambar di atas).
Memasang Kode HTML Menu Drop Down di Tata Letak Blog
- Di Dashboard Blog Anda, Silahkan pilih menu "Tata Letak" atau "Layout",
- Kemudian klik "Tambahkan Gadget" atau "Add a Gadget".
 |
| Cara Membuat Menu Dropdown Horizontal di Blog |
- Maka akan muncul laman baru, silahkan pilih "HTML/JavaScript".
 |
| Cara Membuat Menu Dropdown Horizontal di Blog |
- Maka akan muncul lagi laman baru, berupa kotak "Mengonfigurasi HTML/JavaScript", silahkan masukan kode di bawah ini :
<div id="CmwpMenu">
<div id="Cmwpbox">
<ul id="punch">
<li><a href="#">Home</a></li>
<li>
<a href="#">Sample Page</a>
<ul>
<li>
<a href="#">Sub Page #1</a>
<ul>
<li><a href="#">Sub Sub Page #1</a></li>
<li><a href="#">Sub Sub Page #2</a></li>
<li><a href="#">Sub Sub Page #3</a></li>
</ul>
</li>
<li><a href="#">Sub Page #2</a></li>
<li><a href="#">Sub Page #3</a></li>
<li><a href="#">Sub Page #4</a></li>
<li><a href="#">Sub Page #5</a></li>
</ul>
</li>
<li><a href="#">Sample Post</a></li>
<li><a href="#">Blog Page</a></li>
</ul>
</div>
</div>
- Silahkan di Edit semua nama-nama menu dan submenunya sesuai dengan keinginan anda, jangan lupa untuk tanda # di ganti dengan sebuah link atau URL yang anda inginkan.
- Kalau sudah selesai mengedit menu dan submenunya sesuai dengan keinginan anda, silahkan di copas ke kotak kosongnya, kemudian silahkan klik "Simpan" seperti yang terlihat pada gambar di bawah ini:
 |
| Cara Membuat Menu Dropdown Horizontal di Blog |
*Untuk memastikan apakah sudah benar memasang kode-kode di blognya, lebih baik di lihat dulu dengan "Pratinjau" yang terletak di atas samping kanan postingan blog.
 |
| Cara Membuat Menu Dropdown Horizontal di Blog |
Oiya... Untuk Menambah atau merubah Item di dalam Menu Dropdown Horizontal tersebut, begini caranya :
- Coba silahkan di cari pada bagian akhir ada kode seperti ini:
<li><a href="#">Blog Page</a></li>
</ul>
- Nah... di bagian tanda </ul> bisa anda tambahkan menu baru, dan menu baru ini di simpan tepat di atas tanda </ul> maka contohnya akan nampak menjadi seperti di bawah ini :
<li><a href="#">Blog Page</a></li>
<li><a href="Simpan Link URL di sini">Buat Teks Baru di sini</a></li>
</ul>
- Kalau anda mau menambahkan menu lebih dari satu, maka contohnya akan seperti di bawah ini :
<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU 1">TEKS BARU 1</a></li>
<li><a href="LINK BARU 2">TEKS BARU 2</a></li>
<li><a href="LINK BARU n">TEKS BARU n</a></li>
</ul>
- Kemudian bila anda mau menambahkan dari "menu" kepengen ada beberapa "sub menu" nya, maka perhatikan kode </li> karena kode ini yang akan membuka ruang untuk "sub menu" di bawahnya, agar lebih jelas maka contohnya akan seperti di bawah ini :
<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU 1">TEKS BARU 1</a></li><li><a href="LINK BARU 2">TEKS BARU 2</a><li><a href="LINK BARU SUB MENU 1">SUB MENU 1</a></li><li><a href="LINK BARU SUB MENU 2">SUB MENU 2</a></li></li><li><a href="LINK BARU n">TEKS BARU n</a></li>
</ul>
Gimana Sobat CMWP, mudah bukan? Selamat membuat variasi-variasi untuk "menu" dan "sub menu" nya ya...
Demikian artikel yang sangat sederhana ini tentang Cara Membuat Menu Dropdown Horizontal di Blog. Silahkan kunjungi juga Cara Membuat Menu Dropdown CSS3 Di Blog. Semoga bermanfaat bagi anda, dan jangan lupa juga kunjungi Cara Membuat Menu Dropdown di Blog.
Terima Kasih telah berkunjung, silahkan tinggalkan jejakmu wahai para blogger di komentar blognya.
0 komentar:
Posting Komentar