Menu Navigasi CSS3 + Icon

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. semoga bermanfaat
selamat mencoba..

About the Author

Written by Admin

Previl_TM is a modern, template is very suitable for a template of your blog,and features a very cool and nice so from me, Predator Evil TM

Tidak ada komentar:

Posting Komentar

Untuk menyisipkan kode, gunakan tag KODE ANDA
Kode yang panjang bisa menggunakan tag KODE PANJANG ANDA
Untuk menyisipkan gambar, gunakan tag URL GAMBAR
Untuk menyisipkan judul, gunakan tag JUDUL ANDA DI SINI...
Untuk menciptakan efek tebal gunakan tag TEKS ANDA DI SINI...
Untuk menciptakan efek huruf miring gunakan tag TEKS ANDA DI SINI...

Predator evil TM

Kamis, 18 April 2013