Rabu, 22 Februari 2012

Cara Membuat Menu Drop Down Blod Merah

Sebenarnya dulu Nurulcall pernah juga posting tentang Membuat Menu Drop Down Horizontal tapi yang dulu lain warnanya sama yang sekarang jika ada sobat yang mau memilih warnaya silahkan anda pilih tapi sebenarnya kalau anda bisa cukup mengganti code warna nanti warnanya juga akan ganti tapi...!yang mau nurulcall post ini untuk anda yang gak mau susah dan belum tau cara mengganti warna codenya cukup tinggal copy paste jadi deh sebelum kita melangkah lebih jauh ada baiknya anda baca dulu ini Widget Mata Mengikuti Cursor ada lagi Cara Membuat Efek Hantu di Blog.

Untuk Membuat Menu drop Down Blod Merah silahkan ikuti langkah-langkah dibawah ini


  • Login keblog anda pada Dashboard anda klik edit template cari code ]]></b:skin> copy code dibawah ini paste tepat diatas code tersebut.
/*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/AVvXsEhB0UytPfG8LckudwbJQH-pjVCG-TXrJnNan3pMXhoGDqm_kBQAxIOf3gnjENGFLjSDqF-GK66jVnsZqcDHiQ8_HCcqQQ56U68BFLDvp4fJ610D1Zh34irgR8nUgcvYHcjM6swyJeG0_i8p/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/AVvXsEh5DbA9cVTF4L9nF4KYJfBEOgH9bgET6e31ywHxmyKmsRF5_zyRd5c23ft6cVSABPd-fOkD_89VUDZKn4BZtKcwOdv21YlXUg1lhYYnUrWNBxDwMB3-a5d1-goqJtkN4ipeJQukgvO40d_v/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}

/*End Css Menu*/

  • Simpan template.
  • Scrol mouse klik tata letak tambah gadget HTML/javascript dan copy code dibawah paste didalamnya.
<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>


  • Bla....Bla.....Bla jadi deh silahkan dicoba....
di

Tidak ada komentar:

Posting Komentar