Ingin membuat menu horizontal seperti gambar diatas? Bagaimana Cara Membuat Menu Dropdown dengan CSS ? Artikel kali ini akan membahas mengenai tutorial pembuatan daftar isi dengan dropdown menu style yang elegant dan bagus. Design dari menu dropdown ini lebih simple dibandingkan dengan script jQuery yang berakibat akan memperlambat loading blog Anda.
Menu dropdown horizontal ini dapat Anda taruh sesuai dengan keinginan Anda. Dan Anda juga dapat merubah tampilan warna, style, border, margin dan lainnya dengan mudah. Lalu, bagaimana cara membuat menu horizontal ini langsung yuk ikuti tutorialnya.
1. Login ke dalam akun blogger anda. Klik Nama Blog yang ingin dipasang Menu Horizontal ini.
2. Pilih Menu Template
3. Klik Tombol EDIT HTML. Setelah itu akan muncul jendela konfirmasi, silahkan klik LANJUTKAN dan centang Expand Widget Template
4. Carilah kode ]]></b:skin> dengan menggunakan CTRL+F
Copy kode di bawah ini dan paste tepat di atas kode ]]></b:skin> :
#Mediablogger {Ganti kode warna1 dan warna2 dengan kode warna sesuai keinginan Anda. Atau dapat memakai kode HTML warna berikut :
background: warna1;
width: 880px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: warna2;
font-weight: bold;
margin-bottom: 30px;
padding: 2px;
}
#mediabloggerbox {
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;
}
Menu Kuning
warna1 = #ffd966
warna2 = #d4812a
Menu Hitam
warna1 = #555555
warna2 = #FFFFFF
Menu Biru
warna1 = #66bbdd
warna2 = #004661
Menu Abu-abu
warna1 = #d4d4d4
warna2 = #555555
Menu Hijau
warna1 = #38761d
warna2 = #FFFFFF
Jika telah selesai memberikan kode warna contoh #FFFFFF , Klik Simpan Template / SAVE.
Lalu klik Layout, Pilih Add Gadget, sesuaikan lokasi penempatan menu horizontall ini. Lalu pilih HTML/Javascript. Kemudian,masukkan kode seperti berikut :
<div id="Mediablogger">Kemudian Klik Save dan lihat hasilnya. Apabila di dalam Layout Anda tidak ada opsi untuk menambahkan gadget pada bagian Header Blog. Anda dapat menaruh dibagian atas header tersebut dengan masuk kembali ke Template , Lalu Edit HTML, Cari kode <body>. Lihat bagian bawah dari kode <body> tersebut. Cari kode yang mirip kata berikut ini <div id='header'> , <div id='header-wrapper'> taruhlah kode script yang diatas dibawah kode <div id='header'> lalu klik Preview untuk melihat hasilnya. Apabila posisinya terlalu keatas, Anda tinggal menaruh script tadi lebih kebawah.
<div id="mediabloggerbox">
<ul id="punch">
<li><a href="http://impoint.blogspot.com">Home</a></li>
<li>
<a href="#">Sample Page</a>
<ul>
<li>
<a href="#">Sub Page #1</a>
<ul>
<li><a href="#">Dropdown Menu #1</a></li>
<li><a href="#">Dropdown Menu #2</a></li>
<li><a href="#">Dropdown Menu #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>
Jika Anda melakukan lankah-langkah diatas dengan benar maka tampilan menu dropdown horizontal cantik pun akan segera terlihat. Terimakasih telah membaca artikel mengenai Bagaimana Cara Membuat Dropdown CSS Menu di Blogspot. Semoga dapat mempercantik bagian style menu Anda.
