CARA MEMBUAT MENU HORIZONTAL, DROP DOWN DENGAN CSS3

19:07
      Buat agan dan Sista yang ingin bloggernya ada "Menu Horisontal Drop Down" silakan ikuti langkah-langkah yang ada di bawah ini. Insyaallah ini mudah buat para pemula .. .. .. ..

Cara Membuat 
1. Login ke blog kamu.
2. Pilih Rancangan > Add Gadget > HTML JavaScript.
3. Dan copas kode di bawah ini, Taruh di HTML JavaScript yang telah agan or sista siapkan .
<style>
#css3pic{background: rgb(176,174,38); /* Fallback Background color */
background: url(images/pattern.png), -moz-linear-gradient(top, rgba(176,174,38,1) 0%, #6e6c00 100%);
background:url(images/pattern.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(176,174,38,1)), color-stop(100%,rgba(110,108,0,1)));width:980px;border-top:1px solid #ccc;margin:0 auto;padding:0 auto;border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: solid 1px #251400;}
#css3wrapper{width:980px;height:27px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#css3bar{width:100%}
#css3bar,#css3bar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#css3bar a{display:block;text-decoration:none;font-size:12px;font-weight:bold;text-transform:uppercase;color:#333;padding:8px 8px 8px}
#css3bar a.trigger{padding:8px 13px 8px 9px}
#css3bar li{float:left;position:static;width:auto}
#css3bar li ul,#css3bar ul li{width:140px}
#css3bar ul li a{text-align:left;color:#fff;font-size:11px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px;}
#css3bar li ul{z-index:100;position:absolute;display:none;background:#333;padding-bottom:5px;border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: solid 1px #251400;}
#css3bar li:hover a,#css3bar a:active,#css3bar a:focus,#css3bar li.hvr a{;color:#fff;-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out; }
#css3bar li:hover ul,#css3bar li.hvr ul{background: rgb(176,174,38); /* Fallback Background color */
background: url(images/pattern.png), -moz-linear-gradient(top, rgba(176,174,38,1) 0%, #6e6c00 100%);
background:url(images/pattern.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(176,174,38,1)), color-stop(100%,rgba(110,108,0,1)));display:block}
#css3bar li:hover ul a,#css3bar li.hvr ul a{color:#fff;background-color:transparent;text-decoration:none}
#css3bar li ul li.hr{border-top:1px solid #444;display:block;font-size:1px;height:0;line-height:0;margin:2px 0}
#css3bar ul a:hover{background-image: -webkit-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -moz-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -ms-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -o-linear-gradient(top, #990066, #cc0099, #990066);!important;color:#fff!important;text-decoration:none}

</style>

<div id='css3pic'>
<div id='css3wrapper'>
<ul id='css3bar'>
<li><a href='#'>Home</a></li>
<li><a class='trigger' href='#'>Blogger</a>
<ul>
<li><a href='#'>Tutorial Blogger</a></li>
<li class='hr'/>
<li><a href='#'>Tips Blogger</a></li>
<li class='hr'/>
<li><a href='#'>Widget</a></li>
<li class='hr'/>
<li><a href='#'>CSS</a></li>
<li class='hr'/>
<li><a href='#'>jQuery</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Lifestyle</a>
<ul>
<li><a href='#'>Health</a></li>
<li class='hr'/>
<li><a href='#'>Travel</a></li>
<li class='hr'/>
<li><a href='#'>Food</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Design</a>
<ul>
<li><a href='#'>Art</a></li>
<li class='hr'/>
<li><a href='#'>Web</a></li>
<li class='hr'/>
<li><a href='#'>Blog</a></li>
</ul>
<li><a class='trigger' href='#'>Technology</a>
<ul>
<li><a href='#'>Handphone</a></li>
<li class='hr'/>
<li><a href='#'>Gadget</a></li>
<li class='hr'/>
<li><a href='#'>Computer</a></li>
</ul>
<li><a class='trigger' href='#'>Sports</a>
<ul>
<li><a href='#'>Tennis</a></li>
<li class='hr'/>
<li><a href='#'>Moto GP</a></li>
<li class='hr'/>
<li><a href='#'>Bulu Tangkis</a></li>
</ul>
<li><div id='coom'><a class='trigger' href='#'>Community</a></div></li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
Catatan :
  • Ganti kode yang berwarna Merah (width atau lebar) sesuaikan dengan blog agan or sista.
  • Ganti tanda # dengan URL yang dituju saat di klik. 
  • Ganti yang warna Hijau dengan kata yang Lain
Semoga Bermanfaat .. .. .. ..

Kopi Campur adalah media informasi di era digital

Previous
Next Post »

Featured post

Cara Mengatasi Epson, L300 Eror di Tinta

Kopi campurr - Cara mengatasi epson l300 eror tinta tidak mau keluar - setelah lama tidak pernah posting lagi blog ini, akhirnya malam ini ...