Hari ini saya akan mengulas sedikit
cara membuat menu horizonal dropdown lewat css, yang menurut kang salman sangat
mudah dan tidak rumit.
sumber: Disini
Berikut
Langkah-langkahnya:
1. Login Blogger > Rancangan > Edit HTML *Jangan lupa dicentang
2. Cari kode ini ]]></b:skin>
3. Taruh kode di bawah ini tepat di atasnya ]]></b:skin>
1. Login Blogger > Rancangan > Edit HTML *Jangan lupa dicentang
2. Cari kode ini ]]></b:skin>
3. Taruh kode di bawah ini tepat di atasnya ]]></b:skin>
/*Start Css Menu*/
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi89Mowqc3Ew0OoDBd35KlFhjgfOMRjl7RbGy5dMIo8DuaaeAcrRX1r67bZhba3dBXRunxtOj3NHDVw2KIPMU7Gdk6VHdW7ki8xTZe-ENJPDNiUFvfPzIu0FlbJQr6OxrOIIR61k1kCzM8A/s1600/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #a80329;
border-right:2px solid #a80329;
border-bottom:2px solid #a80329;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmBT78War8txlAJXeiOoYhvc2WXrQSnKbnfYnsHPfUfHBZBsy32kTqL7jmjtHv-2AVHzrhowtdH44yjr5TSoCKmLrvDXbtc15W4Si3X1ZTL0o3wFQ-QALpyzD_IphOmKncG9bffweiohw4/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi89Mowqc3Ew0OoDBd35KlFhjgfOMRjl7RbGy5dMIo8DuaaeAcrRX1r67bZhba3dBXRunxtOj3NHDVw2KIPMU7Gdk6VHdW7ki8xTZe-ENJPDNiUFvfPzIu0FlbJQr6OxrOIIR61k1kCzM8A/s1600/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #a80329;
border-right:2px solid #a80329;
border-bottom:2px solid #a80329;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmBT78War8txlAJXeiOoYhvc2WXrQSnKbnfYnsHPfUfHBZBsy32kTqL7jmjtHv-2AVHzrhowtdH44yjr5TSoCKmLrvDXbtc15W4Si3X1ZTL0o3wFQ-QALpyzD_IphOmKncG9bffweiohw4/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}
4. Save Template
5. Selanjutnya masuk ke
Rancangan, lalu tabah widget baru dan pilih HTML/Javascript, pastekan
kode di bawah ini.
<div class="menu">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#" >Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#" >Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
*KETERANGAN
- Tanda pagar # adalah tempat meletakan link / url dari artikel kita yang ingin di pasang di menu navigasi. ingat awali dengan tanda kutip " dan akhiri kembali dengan tanda kutip ", jika tidak maka tidak bisa di save.
- Nama Menu 1 dan selanjutnya adalah, nama menu-menu yang di tampilkan.
- Anda dapat memperbanyak menu navigasi sesuai kebutuhan.
5. Kemudian save, dan
lihatlah blog Anda
Selamat Mencoba
sumber: Disini
Bro bisa buat menu navigasi kayak di Indowebster gk??
ReplyDeleteItu yang floating dan hovernya bekerja saat di scroll ke bawah..
Kayak gambar yg ada di link ini bro..
1.Gambar Sebelum Di Scroll Ke Bawah
2.Gambar Sesudah Di Scroll Ke Bawah
kloq bisa share donk, email saya cnambiexz@yahoo.com atau twitter saya @Cah_Gembloengz thanks...
mantap gan...
ReplyDeletemakasih banyak buat tutornya gan,,
ReplyDeletehttp://goo.gl/0bvO1h