Friday, March 23, 2012

MENU NAVIGASI MINI NETTUTS+

Posted by Indra-paten on 11:34 AM. - No comments





       pada artikel ini saya akan membahas tentang cara membuat menu navigasi bergaya Nettuts+. Menu navigasi ini nanti akan melayang di bagian pojok blog dan ketika menu di sorot pointer mouse menu navigasi ini akan mengeluarkan tooltip dengan bergaya balon / bubble dibalut dengan efek jQuery yang menawan. Menu navigasi ini dibuat oleh salah satu blogger professional asal indonesia, jika ingin melihat artikel aslinya silakan klik disini

1. Login ke Blogger -> Masuk ke Rancangan -> Edit HTML

2. Cari kode berikut
     </head>
3. Copy dan paste kode di bawah ini tepat di atas kode no 2
     <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script src='http://purnamalabs.googlecode.com/files/menu.js' type='text/javascript'/>
4. Cari kode berikut
     ]]></b:skin>
5. Copy dan paste kode di bawah ini tepat di atas kode no 4
     /**
 * Mini floating Navigation by Taufik Nurrohman
 * Visit:  http://cardymen.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsqlfKuerZCUBZbvbIoScSDZpnFrkii_RtkAb5lK7UV65-8kaiSrGNHIl8KB_5AwXjBTZaCvuT6Ry4lmn9_kExBNHrC8mKIKO5UM135GodUHVjoFlW1D13EGqe8oxvtI7iuufcGaaDSXZW/s1600/main-sprites.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp5b8gmCY0SCeYAxySTGJK1QLhKyqbVpf9bROfzODiYTIqu2260WvUQXoSHcX0IgD77PRL7q7snSY0mntICnC9T7WmMzRZffHGx6pm4PR0mWD8jc8Oupr7hT8b1uZddbFQqF2rEw6tXsM1/s1600/social-sprites.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 ini
    </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 kamu
9. Selesai

Semoga Bermanfaat

0 komentar:

Post a Comment