Cara Membuat Menu Naviasi Bergaya Nettuts

Golden Anonymous On Sunday, 28 April 2013

1. Login ke Blogger -> Masuk ke Rancangan -> Edit HTML
2. Cari kode //<![CDATA[
3. Copy dan paste kode di bawah ini tepat di bawah kode no 2

4. Cari kode ]]></b:skin>
5. Copy dan paste kode di bawah ini tepat di atas kode no 4

/** * Mini floating Navigation by Taufik Nurrohman * 
Visit: http://hompimpaalaihumgambreng.blogspot.com */ #sidenav { position:fixed 
!important; position:absolute; /* IE6 Fallback */ top:60px; left:0px; 
z-index:999; background-color:#eee; 
border:1px solid #ccc; width:auto; 
height:auto; text-indent:-99999px; 
font:normal 12px Arial,Sans-Serif !important; 
-webkit-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4); 
-moz-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4); 
box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4); } 
 #sidenav ul { margin:0px 0px; 
padding:0px 0px; } #sidenav li 
{ margin:0px 0px; padding:0px 0px; list-style:none; display:block; 
position:relative; } #sidenav a 
{ display:block; width:20px; 
border-bottom:1px solid #ccc; color:#666; 
text-decoration:none; -webkit-box-shadow:inset 0px 0px 0px
 1px white; -moz-box-shadow:inset 0px 0px 0px 1px 
white; box-shadow:inset 0px 0px 0px 1px white; 
 } #sidenav li:last-child a { 
border-bottom:none; } #sidenav 
span.ttp { display:block; 
position:absolute; top:0px; font:normal 94% 
Arial,Sans-Serif; background-color:#39f; 
color:white; padding:0px 10px; 
line-height:22px; height:22px; 
width:auto; left:100%; z-index:77; margin-left:17px; text-indent:0px; 
-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; display:none; 
} #sidenav span.ttp em { 
display:block; width:0px; height:0px; border:4px solid transparent; 
border-right-color:#39f; position:absolute; 
top:7px; right:100%; } #sidenav li ul { width:150px; 
height:auto; background:transparent; 
border:none; position:absolute; 
top:-1px; left:100%; -webkit-box-shadow:0px 
1px 7px -3px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 7px 
-3px rgba(0,0,0,0.4); box-shadow:0px 1px 7px -3px 
rgba(0,0,0,0.4); display:none; } 
 #sidenav li ul a { border:1px solid 
#ccc; border-bottom:none; 
background-color:#eee; display:block; 
width:auto; padding:0px 10px; 
line-height:25px; text-indent:0px; 
-webkit-box-shadow:inset 0px 0px 0px 1px white; 
-moz-box-shadow:inset 0px 0px 0px 1px white; 
box-shadow:inset 0px 0px 0px 1px white; } 
 #sidenav li a:hover {background-color:#ddd;} 
 #sidenav li ul li:last-child a { 
border-bottom:1px solid #ccc; } /*
 CSS Sprites */ #sidenav a.main { 
background-image:url('http://i1125.photobucket.com/albums/l581/Anthzo/Blogger/th_miniA.png'); background-repeat:no-repeat; width:26px; height:25px; } #sidenav 
a.home {background-position:5px 4px; } #sidenav a.about
 {background-position:5px -22px; } #sidenav a.archive 
{background-position:5px -48px; } #sidenav a.share 
{background-position:5px -73px; } #sidenav a.photos 
{background-position:5px -100px;} #sidenav a.contact 
{background-position:5px -126px;} #sidenav li 
ul a.social { 
background-image:url('http://i1125.photobucket.com/albums/l581/Anthzo/Blogger/th_miniB.png'); background-repeat:no-repeat; padding-left:30px 
!important; } #sidenav li ul 
a.blogger {background-position:5px 4px; } #sidenav li 
ul a.facebook {background-position:5px -21px; } #sidenav 
li ul a.twitter {background-position:5px -47px; } 
#sidenav li ul a.googleplus {background-position:5px -73px; } #sidenav li ul a.flickr {background-position:5px -99px; 
} #sidenav li ul a.rss {background-position:5px 
-125px;} #sidenav li ul a.mail 
{background-position:5px -151px;} /* CSS 
Fallback */ #sidenav li:hover .fallback {display:block;}

6. Cari lagi kode </body>
7. Paste kode di bawah ini tepat di atas kode no 6

<nav
 id='sidenav'> <ul>
<li><a 
class='main home' href='/'>Home</a></li>
<li><a class='main about' href='#'>About</a> <ul class='fallback'>
<li><a class='social blogger' href='#'>Me on 
Blogger</a></li>
<li><a 
class='social facebook' href='#'>Me on Facebook</a></li>
<li><a class='social twitter' href='#'>Me on
 Twitter</a></li>
<li><a 
class='social googleplus' href='#'>Me on Google+</a></li>
</ul>
</li>
<li><a 
class='main archive' href='#'>Archives</a> 
 <ul class='fallback'>
<li><a 
href='#'>Table of Contents</a></li>
<li><a href='#'>Recent Articles</a></li>
<li><a href='#'>Recent 
Comments</a></li>
</ul>
</li>
<li><a class='main share' 
href='#'>Share</a> <ul 
class='fallback'>
<li><a class='social 
blogger' href='#'>Blogger</a></li>
<li><a class='social facebook' 
href='#'>Facebook</a></li>
<li><a class='social twitter' 
href='#'>Twitter</a></li>
<li><a
 class='social googleplus' href='#'>Google+</a></li>
<li><a class='social flickr' 
href='#'>Flickr</a></li>
<li><a 
class='social rss' href='#'>RSS</a></li>
<li><a class='social mail' 
href='#'>Mail</a></li>
</ul>
</li>
<li><a class='main photos' 
href='#'>Screencast</a></li>
<li><a 
class='main contact' href='#'>Contact</a> 
 <ul class='fallback' style='font-weight:bold;'>
<li><a class='social facebook' 
href='#'>Facebook</a></li>
<li><a class='social twitter' 
href='#'>Twitter</a></li>
<li><a
 class='social mail' href='#'>Mail</a></li>
</ul>
</li>
</ul>
</nav>

8. Ganti tanda "#" dengan url tujuan sobat
9. Selesai... dan semoga berhasil

Credit : kaze-anonymous.blogspot.com

Subscribe to Posts | Subscribe to Comments

DARKNESS FATE

Info , Tips and Trick , Anime , Everything is here

Popular posts

Categories

About Me

Cara Membuat Menu Naviasi Bergaya Nettuts

Leave a Reply

Blogroll

Blog Archive

Label