Menu Bar Simpel Dan Keren Untuk Blogger

Tweet

Menu Bar Simpel Dan Keren Untuk Blogger - D-Copy Blog | 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 Menu Bar Simpel Dan Keren Untuk Blogger :

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