Cara menbuat menu navigasi pada blog

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

// Saat elemen <a> diklik...<br /> $('#sidenav li a[href="#"]').click(function(e) {<br /> // Hilangkan semua anak <ul>dan tooltip yang tampil $('#sidenav li ul:visible, span.ttp:visible').hide(); // Tampilkan elemen setelahnya (dalam hal ini adalah elemen <ul>) // dengan efek .show('fast') dan set nilai margin-left menjadi 10 piksel untuk menciptakan jarak $(this).next().css('margin-left', '10px').show('fast'); // Jangan biarkan event .click() pada elemen ini mempengaruhi elemen lain di dalam dokumen // Selengkapnya: http://api.jquery.com/event.stopPropagation/ e.stopPropagation(); return false; });

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

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

Monday, February 25, 2013