Tricky & Tipsy Friend

Menu Navigasi merupakan bagian terpenting dalam blog, agar memudahkan pengujung dalam mencari kategori yang tertera, walaupun begitu Menu navigasi kalau tidak ada indahnya membuat pengujung merasa bosan dan jenuh, maka saya akan memberi tahu Cara Membuat Menu Navigasi Horizontal dengan Efek CSS3

Berikut cara pemasanganya :

Pertama silahkan login ke akun blogger
Kedua Silahkan ke Bagian Template Lalu Pilih Edit HTML !
Setelah itu silahkan Cari kode ]]></b:skin> Masukan Kode CSS3 Dibawah ini Tepat diatasnya !

/*Menu Dropdown*/
.navhezron{
font:bold 16px Calibri,Arial,Sans-Serif;
max-width:100%;margin-bottom:5px;
}
.navhezron *{margin:0 0 0 0;padding:0 0 0 0;list-style:none;}
.navhezron ul{
background:#DE9000;
background:-webkit-linear-gradient(top, #808080, #808080);
background:-moz-linear-gradient(top, #808080, #808080);
background:-ms-linear-gradient(top, #808080, #808080);
background:-o-linear-gradient(top, #808080, #808080);
background:linear-gradient(top, #808080, #808080);
height:40px;
-webkit-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.1), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.1), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 3px rgba(0,0,0,0.4);
box-shadow:inset 0px 1px 0px rgba(0,0,0,0.1), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 3px rgba(0,0,0,0.4);
}
.navhezron li{float:left;display:inline;}
.navhezron li a{
padding:0px 15px;
line-height:40px;
color:#00ff00;
text-shadow:0px 1px 0px rgba(255,255,255,0.3);
display:block;
text-decoration:none;
-webkit-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1), inset -1px 0px 0px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1), inset -1px 0px 0px rgba(0,0,0,0.1);
box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1), inset -1px 0px 0px rgba(0,0,0,0.1);
}
.navhezron li a:hover{
-webkit-box-shadow:inset 0px 0px 30px rgba(0,0,0,0.2);
-moz-box-shadow:inset 0px 0px 30px rgba(0,0,0,0.2);
box-shadnw:inset 0px 0px 30px rgba(0,0,0,0.2);
color:#eee;text-shadow:0px -1px 1px #000;
}
.navhezron li a:active{
background:#808080;
background:-webkit-linear-gradidnt(bottom, #808080, #808080);
background:-moz-linear-gradient(bottom, #808080, #808080);
background:-ms-linear-gradient(bottom, #808080, #808080);
background:-o-linear-gradient(bottom, #808080, #808080);
background:linear-gradient(bottom, #808080, #808080);
}
.navhezron li ul{
display:block;
width:170px;
position:absolute;
left:auto;
z-index:10;
visibility:hidden;
opacity:0;
height:auto;
-webkit-transition:all 0.26s ease-out 0.2s;
-moz-transition:all 0.26s ease-out 0.2s;
-ms-transition:all 0.26s ease-out 0.2s;
-o-transition:all 0.26s ease-out 0.2s;
transition:all 0.26s ease-out 0.2s;
}
.navhezron li li{
display:block;
float:none;
width:100%;
}
.navhezron li:hover > ul{
visibility:visible;
width:200px;opacity:1;
}
.navhezron li li ul{
left:200px;
margin-top:-40px;
}
.navhezron li.sub > a{
position:relative;
padding-right:30px;
}
.navhezron li.sub > a:after{
content:"";
width:0px;
height:0px;
border-width:4px;
border-style:solid;
border-color:#fff transparent transparent transparent;
position:absolute;
top:20px;
right:10px;
}
.navhezron li.sub li.sub > a:after{
content:"";
width:0px;
height:0px;
border-width:4px;
border-style:solid;
border-color:transparent transparent transparent #fff;
position:absolute;
top:16px;
right:10px;
}
.clear{clear:both;}

Isi Kode dibawah ini Ke HTML/JavaScript !

 <!-- Menu Dropdown START -->
<div class='navhezron'>
<ul>
<li><a href='/'>Home</a></li>
<li class='sub'><a href=''>Category</a>
<ul>
<li class='sub'><a href=''>Dunia Maya</a>
<ul>
<li><a href='URL-HERE'>Informasi Berita</a></li>
<li><a href='URL-HERE'>Advertisements</a></li>
</ul>
</li>
<li><a href='URL-HERE'>Tutorial Komputer</a></li>
</ul>
</li>
<li class='sub'><a href=''>Blogger</a>
<ul>
<li><a href='URL-HERE'>CSS</a></li>
<li><a href='URL-HERE'>jQuery</a></li>
<li><a href='URL-HERE'>Javascript</a></li>
<li><a href='URL-HERE'>Widget</a></li>
</ul></li>
<li class='sub'><a href=''>Live Streaming</a>
<ul>
<li><a href='URL-HERE'>TV Online</a></li>
<li><a href='URL-HERE'>Radio Online</a></li>
</ul>
</li>
<li class='sub'><a href=''>Contact Me</a>
<ul>
<li><a href='http://www.facebook.com/hezron.mangatur'>on Facebook</a></li>
<li><a href='http://twitter.com/manroehezron'>on Twitter</a></li>
</ul></li>
<li class='sub'><a href=''>Other Links</a>
<ul>
<li><a href='URL-HERE'>Kritik Dan Saran</a></li>
</ul>
</li>
<li class='sub'><a href=''>LifeStyle</a>
<ul>
<li><a href='URL-HERE'>Informasi Unik</a></li>
<li><a href='URL-HERE'>Kesehatan</a></li>
</ul>
</li>
<li class='sub'><a href=''>Tips SEO</a>
<ul>
<li><a href='URL-HERE'>SEO On Page</a></li>
<li><a href='URL-HERE'>SEO Off Page</a></li>
</ul>
</li>
<li class='sub'><a href=''>Link Exchanges</a>
<ul>
<li><a href='URL-HERE'>Blog Link/Banner</a></li>
<li><a href='URL-HERE'>Friend Link/Banner</a></li>
</ul></li>
<li><a href='URL-HERE'>Daftar Isi</a></li>
</ul>
</div>
<!-- Menu Dropdown END -->

Sekian Tutorial saya  !