Jika Ada Link Dalam Blog Ini Yang Tidak Berfungsi Atau Broken, Dengan Segala Kerendahan Hati Kami Berharap Pengunjung Sekalian Meng-Infokan Kepada Kami Agar Se-segera Mungkin Kami Memperbaikinya,TERIMA KASIH..!!BLOG ANAK BIMA mengucapkan "SELAMAT HARI RAYA IDUL ADHA 1437H MOHON MAAF LAHIR DAN BATIN" @Admin [by:dyenps]

Sunday, August 5, 2012

Cara Membuat Menu Drop Bar Dengan CSS

Cara membuat menu Drop Down  dengan CSS:
Ikuti cara berikut ini:





1. Sign in di akun blogger.com Sobat

2. Pilih blog yang mau di terapkan menu ini

3. Pilih menu >> Template (tampilan blogger diperbaharui) lalu >>Edit HTML;

4. Beri tanda centang pada tulisan >>Expand Template Widget;

5. Carilah kode yang kurang lebih seperti berikut ini ( gunakan ctrl+F untuk mempermudah pencarian):

]]></b:skin>

Lalu pastekan Code berikut ini di atas code tersebut:
.nav {
height:35px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglntiVgvjXYVdHojBNA9xpRsctl0Z8CI3EKME2cRxlb1PhtiN0tkQRys346C48LfxPzosIWvZNGTmZMGkDFRu55odwTAgqZ_vLXwtap4773vSGnOsQivlazvSEBH-GkrNQC9YKs7Dszq2Q/s1600/bg.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:100%;
z-index:100;
margin:0;
padding:0;
}
.nav .table {
display:table;
margin:0 auto;
}
.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}
.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}
.nav .select a {
display:block;
height:35px;
float:left;
font-weight:bold;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglntiVgvjXYVdHojBNA9xpRsctl0Z8CI3EKME2cRxlb1PhtiN0tkQRys346C48LfxPzosIWvZNGTmZMGkDFRu55odwTAgqZ_vLXwtap4773vSGnOsQivlazvSEBH-GkrNQC9YKs7Dszq2Q/s1600/bg.gif);
padding:0 30px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#2b3238;
}
.nav .select a:hover,
.nav .select li:hover a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEllGRhPL2ETO_2-buWS0r9xJ_-SMRbPO32wH14j5Y2zOMfqOiKhbTecq3oVLdThFlqwyyBy8j2TQHZ8en-Tu2FikSjmcoXhRKD-PI1mtitoAjzgZf0LJuds8YnM35-82QdkGl5XNRqa8t/s1600/hover.gif);
padding:0 0 0 15px;
cursor:pointer;
color:#2b3238;
}
.nav .select a b{
font-weight:bold;
}
.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 30px 0 15px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEllGRhPL2ETO_2-buWS0r9xJ_-SMRbPO32wH14j5Y2zOMfqOiKhbTecq3oVLdThFlqwyyBy8j2TQHZ8en-Tu2FikSjmcoXhRKD-PI1mtitoAjzgZf0LJuds8YnM35-82QdkGl5XNRqa8t/s1600/hover.gif) right top;
cursor:pointer;
}
.nav .select_sub {
display:none;
}
/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}
.nav .sub {
display:table;
margin:0 auto;
padding:0;
list-style:none;
}
.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#2b3238;
}
.nav .select :hover .select_sub,
.nav .current .show {
display:block;
position:absolute;
width:100%;
top:35px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG12i7OoM67Eul_PztdTEVmo5CQ6UTTU-vjwc8Ysvvqyn9ufco7gJZU2xBsiPO7QBrdhvXFFKesKjQ2GbJnBKCxH2OsaMzNZ7xNlQGvVqdKGAnvt0SxtsJBqciEljKfxwhABr8-jXRk9nc/s1600/back.gif);
padding:0;
z-index:100;
left:0;
text-align:center;
}
.nav .current .show {
z-index:10;
}
.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 10px 0 10px;
margin:0;
white-space:nowrap;
border:0;
color:#2b3238;
}
.nav .current .sub li.sub_show a {
color:#2b3238;
cursor:default;
}
.nav .select .sub li a {
font-weight:normal;
}
.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
color:#73a0d2;
}

Setelah itu >> Simpan Template, dan tutup Edit Template.
Kemudian klik : Tata Letak >> Tambah Gadget/Add Gadget >> HTML/JavaScript, lalu pastekan code berikut:

<div class="nav">
<div class="table">
<ul class="select"><li><a href="#"><b>Home</b></a></li></ul>
<ul class="select"><li><a href="#"><b>Menu 1</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sub Menu 1 a</a></li>
<li><a href="#">Sub Menu 1 b</a></li>
<li><a href="#">Sub Menu 1 c</a></li>
<li><a href="#">Sub Menu 1 d</a></li>
<li><a href="#">Sub Menu 1 e</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Menu 2</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sub Menu 2 a</a></li>
<li><a href="#">Sub Menu 2 b</a></li>
<li><a href="#">Sub Menu 2 c</a></li>
<li><a href="#">Sub Menu 2 d</a></li>
<li><a href="#">Sub Menu 2 e</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Menu 3</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sub Menu 3 a</a></li>
<li><a href="#">Sub Menu 3 b</a></li>
<li><a href="#">Sub Menu 3 c</a></li>
<li><a href="#">Sub Menu 3 d</a></li>
<li><a href="#">Sub Menu 3 e</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Menu 4</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sub Menu 4 a</a></li>
<li><a href="#">Sub Menu 4 b</a></li>
<li><a href="#">Sub Menu 4 c</a></li>
<li><a href="#">Sub Menu 4 d</a></li>
<li><a href="#">Sub Menu 4 e</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<br />
Ket: ganti tulisan Menu 1-Menu 4 dan Sub Menu dengan Nama Menu yg sobat kehendaki
"#" ganti dengan URL blog sobat.
Letakan gadget nya di atas atau di bawah Header Blog....dan SELESAI.






Artikel Terkait:

0 comments:

Post a Comment

Syarat Berkomentar:
Tanpa Sara
Tanpa Spam
Jangan Membuat Link Hidup Di Tengah Komentar
Berkomentarlah Yang Sopan Dan Bijak Agar Diharagai Oleh Orang Lain.
Komentar Yang Mengabaikan Syarat Diatas Akan Di Hapus,Terima Kasih...!

Followers

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More