Anda pengunjung yang ke:

Traffic Counter

BANNER SAHABAT

Sabtu, 07 April 2012

Cara Membuat Navigasi Menu DropDown CSS 3D ||Tips/Trick Blogger Sarip

Filled under:


1. Login Blogger > Rancangan > Edit HTML
Copy kode dibawah ini dan taruh di atas kode mirip ]]></b:skin>

   /* Menu Horizontal Dropdown */
   #menuwrapperpic {background:#000 ;width:980px;margin:0 auto;padding:0 auto;}
   #menuwrapper {width:970px;margin:0 auto;height:34px;}
   .clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
   #menubar {width:100%;}
   #menubar, #menubar ul {padding: 0;margin: 0;list-style: none;font-family:'Arial', serif;}
   #menubar a {display: block;text-decoration: none;padding: 9px 10px 8px 10px;font:bold 13px/15px Arial,serif; text-decoration:none;color: #fff;border-right:1px solid #444}
   #menubar a.trigger {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqhHGP-KjfVALReFzmN7hZ-163DXtif5oJt7ojR2VoXsOc4CRABeV8NQsVn89r8vjj43wASngfaGhhODfzrP5wl5jeZycM0G2A-WKfEWA7J-V6h-wRhiTp8Z8U8rA4yG69zcYs4iLeYAnn/s1600/arrow_black_bottom.gif);background-repeat: no-repeat;background-position: right center; padding: 9px 20px 8px 10px;}
   #menubar li {float: left;position: relative;}
   /* hide from IE mac \*/
   #menubar li {position: static; width: auto;}
   /* end hiding from IE5 mac */
   #menubar li ul, #menubar ul li {width:170px;}
   #menubar ul li a  {text-align:left;color: #fff;padding: 8px 13px;font-size: 13px;font-weight:normal;text-transform:none;font-family:Arial;border:1px solid #444;}
   #menubar li ul {z-index:100;position: absolute;display: none;background:#000;}
   #menubar li ul {-moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.6); -webkit-box-shadow:0  rgba(0, 0, 0, 0.6);}
   #menubar li:hover a, #menubar a:active, #menubar a:focus, #menubar li.hvr a{background-color:#fff;color: #004276;text-decoration:underline;}
   #menubar li:hover ul, #menubar li.hvr ul {display: block;}
   #menubar li:hover ul a, #menubar li.hvr ul a {color: #edfdfd;background-color:transparent;text-decoration:none;}
   #menubar li ul li.hr { display:block; font-size: 1px; height: 0px; line-height: 0px; margin:0px 0; }
   #menubar ul a:hover {background-color: #fff!important;color: #004276 !important;text-decoration:none;}
   #menubar li.selected a, #menubar li.selected a:visited {border-right:1px solid #444}
   #menubar li.selected a:hover {background:none;color:#F7D528;}


Berikutnya silakan cari kode </head>, lalu taruh kode di bwah ini tepat di atas </head>

   <!-- Menu Horizontal -->
   <script type='text/javascript'>
   //<![CDATA[
   function Menubar(){ //v1.1.0.2 by PVII-www.projectseven.com
    if(navigator.appVersion.indexOf("MSIE")==-1){return;}
    var i,k,g,lg,r=/\s*hvr/,nn='',c,cs='hvr',bv='menubar';
    for(i=0;i<10;i++){g=document.getElementById(bv+nn);if(g){
    lg=g.getElementsByTagName("LI");if(lg){for(k=0;k<lg.length;k++){
    lg[k].onmouseover=function(){c=this.className;cl=(c)?c+' '+cs:cs;
    this.className=cl;};lg[k].onmouseout=function(){c=this.className;
    this.className=(c)?c.replace(r,''):'';};}}}nn=i+1;}}
   //]]>
   </script>
   <!--[if lte IE 7]> <style> #menuwrapper, #menubar ul a {height: 1%;} a:active {width: auto;} </style> <![endif]-->

Setelah selesai kita akan menambahkan dan memunculkan navigasinya. Caranya dengan menaruh kode ini di bawah <body>

   <div id='menuwrapperpic'>
   <div id='menuwrapper'>
   <ul id='menubar'>
   <li class='selected'><a href='/'>Home</a></li>
   <li><a href='#'>Peristiwa</a></li>
   <li'><a href='#'>Hiburan</a></li>
   <li><a href='#'>Sport</a>
   <ul>
   <li><a href='#'>Bola</a></li>
   <li><a href='#'>Moto GP</a></li>
   <li><a href='#'>F1</a></li>
   </ul>
   </li>
   <li><a href='#'>Politik</a></li>
   <li><a href='#'>Hukum</a></li>
   <li><a href='#'>Kesehatan</a></li>
   <li><a href='#'>Tekno</a></li>
   <li><a href='#'>Tutorial</a>
   <ul>
   <li><a href='#'>Menu1</a></li>
   <li><a href='#'>Menu2</a></li>
   <li><a href='#'>Menu3</a></li>
   <li><a href='#'>Menu4</a></li>
   </ul>
   </li>
   <li><a href='#'>Lowongan Kerja</a></li>
   <li><a href='#'>Pendidikan</a></li>
   <li><a href='#'>More</a>
   <ul>
   <li><a href='#'>Editorial</a></li>
   <li class='hr'></li>
   <li><a href='#'>Off Topic</a></li>
   </ul>
   </li>
   </ul>
   <br class='clearit'/>
   </div>
   <div style='clear:both;'></div>
   </div>


Catatan:
# Silakan ganti link-link di atas dengan link artikel milik kamu dan nama menu di blog.

Ditulis Oleh : SyariĆ’™ ~ Tips dan Trik Blogspot

Syarip Hidayat Sobat sedang membaca artikel tentang Cara Membuat Navigasi Menu DropDown CSS 3D ||Tips/Trick Blogger Sarip. TuTorial Ku UnTuK Mu™ Memperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya



Baca Artikel Lainnya.!:

2 komentar: