Menu Bar Simpel Dan Keren Untuk Blogger

Hai sobat blogger, seperti pada tutorial menu yang laiinya seperti versi 1, versi 2, versi 3, versi 4 yang bisa Anda nikmati namun kali ini saya akan memberikan tutorial menu yang sangat sederhana namun terlihat keren dengan efek hover seperti neon.

Langkah :

1. Buka akun blogger Anda.
2. Masuk ke menu edit HTML, jangan lupa cantang expand template widget
3. Cari kode dibawah ini :

]]></b:skin>

     4.  Pastekan kode dibawah ini, diatas pada kode diatas :

#container1 {
width: 960px;
margin: 0 auto;}
.menu33{height:40px;border-right:1px solid rgba(255,255,255,0.3);float:left;}a{text-decoration:none;color:#FFFFFF;text-transform:uppercase;font-size:15px;font-weight:bold;}ul{margin:0;padding:10px 10px ;}
a:link {color:#ffffff;}
a:hover {color:#ffffff;text-decoration: none;}
a:visited {color: #FFFDFD;text-decoration: none;}
ul.menu33 li{list-style:none;float:left;height:40px;text-align:center;background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}
ul li a{display:block;padding:0 20px;border-left:1px solid rgba(255,255,255,0.1);border-right:1px solid rgba(0,0,0,0.1);text-align:center;line-height:40px;background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));background:-moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));-webkit-transition-property:background;-webkit-transition-duration:700ms;-moz-transition-property:background;-moz-transition-duration:700ms;}
ul li a:hover{background:transparent none;}
ul[rel=sam1] li a{background:#606060;}
ul[rel=sam1] li a:hover{background:transparent none;}
ul li.active a{background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}

Keterangan :
Dalam mode penempatan menu bar ini Anda harus sedikit berkreasi dalam mode penempatan HTML.

   5. Pastekan kode dibawah ini, dimana yang Anda ingin letakkan :

<div id="container1">
<ul class="menu33" rel="sam1">
<li class="active"><a href="http://d-copy.blogspot.com">Home</a></li>
<li><a href="http://d-copy.blogspot.com">About</a></li>
<li><a href="http://d-copy.blogspot.com">Blog</a></li>
<li><a href="http://d-copy.blogspot.com">Services</a></li>
<li><a href="http://d-copy.blogspot.com">Support</a></li>
<li><a href="http://d-copy.blogspot.com">Sales</a></li>
<li><a href="http://d-copy.blogspot.com">Contacts</a></li>
</ul>
</div>

     6.  Edit kode yang diwarnai diatas, terakhir preview dan save template Anda.

Dalam hal ini, Anda ditutut untuk mengatur tata letak untuk penyesuain ke template Anda.

Sumber  kode : http://www.bloggertrix.com/2013/01/attractive-css3-sleek-menu-bar-for.html