6

Menu Navigasi CSS3 + Icon

May 25, 2012

Menu Navigasi CSS3 + Icon - Pertama kalinya posting setelah dapet iklan dari IdBlogNetwork, Alhamdulillah akhirnya saya bisa juga jadi membernya padahal blog ini sangatlah sederhana dan tidak sepaadan dengan deskripsi blognya Koderator - Web Design, Tutorial dan Sumber Inspirasi kalau dilihat dari rupa blognya sendiri nama tersebut tidaklah cocok sama sekali, namun saya akan berusaha untuk mewujudkan nama tersebut jadi kenyataan, alhasil sekarang sedang memilih seketsa template untuk blog ini yang kreterianya klop dengan nama tersebut.



Demo


Bicara tampilan memang tidak ada habisnya faktanya tutorial sekarang adalah membahas tentang tampilan blog yaitu Menu Navigasi CSS3 + Icon, sedikit gambaran menu ini hampir sama dengan Mega Menu jQuery CSS namun ada bedanya yaitu pada bentuk dan ber gambar (icon), yups icon ini membuat penjelas dan perwakilan daripada nama pada sub navigasi tersebut jika ingin melihat keindahannya (DEMO) klik disini , berhubung ngetik itu capek saatnya tutorial dimulai

Membuat Menu Navigasi CSS3 + Icon
Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Back Up template Anda untuk berjaga-jaga apabila terjadi kesalahan
Kemudian Cheklist "Expand Template Widget"
Langkah 2
Gunakan ctrl F untuk mencari kode ]]></b:skin>
setelah ketemu lalu letakkan kode dibawah ini diatasnya
/* universal rules for content inside topnav */
.topnav{width:100%;float:left;margin:2em auto;}
ul#css3menu1,ul#css3menu1 ul{margin:0;list-style:none;}
ul#css3menu1,ul#css3menu1 .submenu{ background-color:#444;border-width:1px;border-style:solid;border-color:#454545;-moz-border-radius:9px;-webkit-border-radius:9px;border-radius:9px;}
ul#css3menu1 .submenu{ display:none;position:absolute;left:0;top:100%;float:left;background-color:#fff;border-width:4px;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;border-color:#cecece;padding:0 6px 6px;}
ul#css3menu1 li:hover>*{display:block;}
ul#css3menu1 li:hover{position:relative;}
ul#css3menu1 ul .submenu{position:absolute;left:100%;top:0;}
ul#css3menu1{padding:5px 5px 5px 0;display:block;font-size:0;float:left;}
ul#css3menu1 ul{padding:0 5px 5px;}
ul#css3menu1 .column{float:left;}
ul#css3menu1 li{display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1>li,ul#css3menu1 li{margin:0 0 0 5px;}
ul#css3menu1 ul>li{margin:5px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{outline-style:none;}
ul#css3menu1 a{display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 13px Trebuchet MS,sans-serif;color:#181818;text-shadow:#FFF 0 1px 1px;cursor:pointer;padding:8px 18px;background-color:;background-repeat:repeat;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 ul li{float:none;margin:6px 0 0;}
ul#css3menu1 ul a{text-align:left;padding:4px;background-color:#fff;background-image:none;border-width:0 0 1px 0;border-style:solid;border-color:#EFEFEF;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:11px Trebuchet MS,sans-serif;color:#000;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu1 li:hover>a{border-style:none;font:bold 13px Trebuchet MS,sans-serif;color:#FFF;text-decoration:none;text-shadow:#181818 0 1px 1px;}
ul#css3menu1 img{border:none;vertical-align:middle;margin-right:8px;}
ul#css3menu1 img.over{display:none;}
ul#css3menu1 li:hover > a img.def{display:none;}
ul#css3menu1 li:hover > a img.over{display:inline;}
ul#css3menu1 span{display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul span{background-image:url(http://css3menu.com/images/modern_files/css3menu1/arrowsub.png);padding-right:20px;}
ul#css3menu1 ul li:hover>a{background-color:#fff;background-image:none;border-style:solid;border-color:#EFEFEF;font:11px Trebuchet MS,sans-serif;color:#444;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu1.topmenu{background-image:url(http://css3menu.com/images/modern_files/css3menu1/mainbk.png);}
ul#css3menu1 li.topmenu>a{height:25px;line-height:25px;background-color:transpa;border-radius:11px;-moz-border-radius:11px;-webkit-border-radius:11px;}
ul#css3menu1 li.topmenu:hover>a{line-height:25px;background-color:#313638;}
 /* ======================end topnav=============================   */
Langkah 3
Setelah itu letakkan kode dibawah ini pada Header Blog atau pada <body> dan jika di template anda ada kode <div id='outer-wrapper'> maka letakkan pada bagian itu
<div class="topnav"><!--menu navigation-->
      <div class="menu_templ" style="width: 612px;background-color:#5797BB;margin:0 auto;">    
<ul id="css3menu1" class="topmenu" style="position: relative;top: -30px">
 <li class="topmenu"><a href="#" title="HOME"><img src="http://css3menu.com/images/modern_files/css3menu1/1031.png" alt="HOME"/>HOME</a></li>
 <li class="topmenu"><a href="#" title="PRODUCT INFO"><span><img src="http://css3menu.com/images/modern_files/css3menu1/005.png" alt="PRODUCT INFO"/>PRODUCT INFO</span></a>
 <div class="submenu" style="width:420px;">
 <div class="column" style="width:50%"><ul>
  <li><a href="#" title="2.1 Features"><img src="http://css3menu.com/images/modern_files/css3menu1/138.png" alt="2.1 Features"/>2.1 Features</a></li>
  <li><a href="#" title="2.2 Installation"><span><img src="http://css3menu.com/images/modern_files/css3menu1/076.png" alt="2.2 Installation"/>2.2 Installation</span></a>
  <div class="submenu">
  <div class="column"><ul>
   <li><a href="/rq/" title="2.2.1 FAQ">2.2.1 FAQ</a></li>
   <li><a href="#" title="2.2How to Setup">2.2How to Setup</a></li>
  </ul></div></div>

  </li>
  <li><a href="#" title="2.3 Parameters Info"><img src="http://css3menu.com/images/modern_files/css3menu1/120.png" alt="2.3 Parameters Info"/>2.3 Parameters Info</a></li>
 </ul></div>
 <div class="column" style="width:50%"><ul>
  <li><a href="#" title="2.4 Dynamic Functions"><img src="http://css3menu.com/images/modern_files/css3menu1/157.png" alt="2.4 Dynamic Functions"/>2.4 Dynamic Functions</a></li>
  <li><a href="#" title="2.5 Supported Browsers"><span><img src="http://css3menu.com/images/modern_files/css3menu1/102.png" alt="2.5 Supported Browsers"/>2.5 Supported Browsers</span></a>
  <div class="submenu" style="width:332px;">
  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="Firefox"><img src="http://css3menu.com/images/modern_files/css3menu1/125.png" alt="Firefox"/>Firefox</a></li>
   <li><a href="#" title="Internet Explorer"><img src="http://css3menu.com/images/modern_files/css3menu1/122.png" alt="Internet Explorer"/>Internet Explorer</a></li>
   <li><a href="#" title="Opera"><img src="http://css3menu.com/images/modern_files/css3menu1/124.png" alt="Opera"/>Opera</a></li>
  </ul></div>
  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="Safari"><img src="http://css3menu.com/images/modern_files/css3menu1/1221.png" alt="Safari"/>Safari</a></li>
   <li><a href="#" title="Google Chrome"><img src="http://css3menu.com/images/modern_files/css3menu1/123.png" alt="Google Chrome"/>Google Chrome</a></li>
   <li><a href="#" title="Konqueror"><img src="http://css3menu.com/images/modern_files/css3menu1/1241.png" alt="Konqueror"/>Konqueror</a></li>
  </ul></div></div>
  </li>
  <li><a href="#" title="CSS3 Info"><img src="http://css3menu.com/images/modern_files/css3menu1/044.png" alt="CSS3 Info"/>CSS3 Info</a></li>
 </ul></div></div>
 </li>
 <li class="topmenu"><a href="#" title="SAMPLES"><span><img src="http://css3menu.com/images/modern_files/css3menu1/133.png" alt="SAMPLES"/>SAMPLES</span></a>
 <div class="submenu" style="width:344px;">
 <div class="column" style="width:50%"><ul>
  <li><a href="#" title="Android Template"><img src="http://css3menu.com/images/modern_files/css3menu1/047.png" alt="Android Template"/>Android Template</a></li>
  <li><a href="#" title="Blocks Template"><span><img src="http://css3menu.com/images/modern_files/css3menu1/045.png" alt="Blocks Template"/>Blocks Template</span></a>
  <div class="submenu" style="width:374px;">
  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="Blue Theme">Blue Theme</a></li>
   <li><a href="#" title="Green Fodder Theme">Green Fodder Theme</a></li>
   <li><a href="#" title="Grey Theme">Grey Theme</a></li>
  </ul></div>
  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="Light Theme">Light Theme</a></li>
   <li><a href="#" title="Orange Theme">Orange Theme</a></li>
   <li><a href="#" title="Purple Theme">Purple Theme</a></li>
  </ul></div></div>
  </li>
  <li><a href="#" title="Elegant Template"><img src="http://css3menu.com/images/modern_files/css3menu1/043.png" alt="Elegant Template"/>Elegant Template</a></li>
  <li><a href="#" title="Frame  Template"><img src="http://css3menu.com/images/modern_files/css3menu1/046.png" alt="Frame  Template"/>Frame  Template</a></li>
 </ul></div>
 <div class="column" style="width:50%"><ul>
  <li><a href="#" title="Fresh Template"><img src="http://css3menu.com/images/modern_files/css3menu1/0471.png" alt="Fresh Template"/>Fresh Template</a></li>
  <li><a href="#" title="Mac Template"><img src="http://css3menu.com/images/modern_files/css3menu1/0451.png" alt="Mac Template"/>Mac Template</a></li>
  <li><a href="#" title="Neon Template"><span><img src="http://css3menu.com/images/modern_files/css3menu1/0461.png" alt="Neon Template"/>Neon Template</span></a>
  <div class="submenu" style="width:290px;">
  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="Green Theme">Green Theme</a></li>
   <li><a href="#" title="Liliac Theme">Liliac Theme</a></li>
   <li><a href="#" title="Blue Theme">Blue Theme</a></li>
  </ul></div>
  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="Neon Theme">Neon Theme</a></li>
   <li><a href="#" title="Orange Theme">Orange Theme</a></li>
  </ul></div></div>
  </li>
  <li><a href="#" title="New Templates"><img src="http://css3menu.com/images/modern_files/css3menu1/0441.png" alt="New Templates"/>New Templates</a></li>
 </ul></div></div>
 </li>
 <li class="topmenu"><a href="#" title="DOWNLOAD"><img src="http://css3menu.com/images/modern_files/css3menu1/017.png" alt="DOWNLOAD"/>DOWNLOAD</a></li>
</ul>
       </div>
     </div>
 <!--end of menu navigation-->
Jangan lupa untuk edit pada bagian <a href="#"
karakter # gantilah dengan link yang akan anda ditujukan
Langkah Terakhir
Klik Simpan Template


Mungkin segitu saja apabila ada yang ingin ditanyakan tanyakanlah, semoga bermanfaat selamat mencoba.


Labels: ,

6 Komentar:

Anonymous aryaz said on May 27, 2012 at 4:38 PM 

Gan saya mau tanya :
cara bikin related post kayak punya agan gimana ya .. Terus
sama cara modifikasi header kayak punya agan ..??
Mohon pencerahannya ..
Terima kasih

Blogger Muhammad Irham said on May 28, 2012 at 5:31 AM 

@aryaz kalo header udah tak share, coba dicari dipencarian "Header 2 Kolom"
Untuk related post ntar tak buatin tutornya.

Anonymous Ady Blink said on May 29, 2012 at 5:24 PM 

hem, dah dapet iklan tuh bro, mantap neh,, he,,he,, btw ditunggu kunjungan ke blog saya!

Blogger Muhammad Irham said on May 30, 2012 at 10:18 PM 

ok sob, sblumnya makasih n saya biasa mampir kok tnang aja

Anonymous Begindang said on September 29, 2013 at 12:56 PM 

thanks atas ilmunya, kebetulan saya lagi ngulik blogspot..
salam : www.begindang.com

Blogger Unknown said on May 9, 2014 at 3:53 PM 

nice posting gan, follback: http://kiosazza.blogspot.com/

Post a Comment

© 2012 - Koderator | Desain Oleh kimzigr| Classic Themplate Html5 & Css3 | Mesin Blogger