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"
- 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..
