Beautiful Slide Out Navigation

Demonya bisa dilihat Disini

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html
3. Cari kode ]]></b:skin>

Dan Simpan kode berikut diatasnya :

.headerfixed<br /> {<br /> width:600px;<br /> height:56px;<br /> position:absolute;<br /> top:50%;<br /> left:10px;<br /> background:#fff url(title.png) no-repeat top left;<br /> }<br /> ul#navixed {<br /> position: fixed;<br /> margin: 0px;<br /> padding: 0px;<br /> top: 0px;<br /> right: 10px;<br /> list-style: none;<br /> z-index:999999;<br /> width:721px;<br /> }<br /> ul#navixed li {<br /> width: 103px;<br /> display:inline;<br /> float:left; <br /> }<br /> ul#navixed li a {<br /> display: block;<br /> float:left;<br /> margin-top: -2px;<br /> width: 100px;<br /> height: 25px;<br /> background-color:#000;<br /> background-repeat:no-repeat;<br /> background-position:50% 10px;<br /> border:1px solid #BDDCEF;<br /> -moz-border-radius:0px 0px 10px 10px;<br /> -webkit-border-bottom-right-radius: 10px;<br /> -webkit-border-bottom-left-radius: 10px;<br /> -khtml-border-bottom-right-radius: 10px;<br /> -khtml-border-bottom-left-radius: 10px;<br /> text-decoration:none;<br /> text-align:center;<br /> padding-top:80px;<br /> opacity: 0.7;<br /> filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); <br /> }<br /> ul#navixed li a:hover{<br /> background-color:#000;<br /> }<br /> ul#navixed li a span{<br /> letter-spacing:2px;<br /> font-size:11px;<br /> color:#FFF;<br /> <br /> }<br /> ul#navixed .home a{<br /> background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgob0ObE_NxX1JrUlqvRTkf_AD-sqxpaAVGlq2ylIPIneG_c9DDnzMYM9KFvhQCF92ZUyj1JS4qYHOXH4ehyphenhyphen2nngXFIpb21aUKEJ5fU3PYDVM2pwJDlc4hJDGrU1tGN9r9olqo9gC9RSpM/s1600/home.png);<br /> }<br /> ul#navixed .about a {<br /> background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXeWMQPCQqUVYoppQnIpszEVndNqFaKE6Mxv0EhZpFNLXNn1yZvQd2sub7YKF0HsZ14BDV5NsUMKM6M6nkUa9AR1f740dfhrsOcvv97DWLdjDTRImSDlVkRYIgtytGICYOTWOwelj8XbI/s1600/id_card.png);<br /> }<br /> ul#navixed .search a {<br /> background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPu1-vgH6jDR9Ad70Iwlr7rkspj5ZjD0jOlLODgUl-pEId5ybIJKMr6BtMjUjWW2-WnQXNE0Eh2AfUQdqLIQVMOYz720FdXMOvoo0Q245_NH9dTp1QblfPDcgzueEuUS8afxWFqPDLynI/s1600/search.png);<br /> }<br /> ul#navixed .podcasts a {<br /> background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHIKBO3ZenkPk8HvoLFu6XUE7FMUYbTrRvk1f4LcayTIEXQv4_xzkWS3be0oFdxceYM0stgbdWgdoDAhGKL8MPTsy0EV64YpPUJv8wsiMUnhEcxDAl7-uZqx8cSr7bs6TysrD5Mb063SI/s1600/ipod.png);<br /> }<br /> ul#navixed .rssfeed a {<br /> background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIcvysvWxAm554zpH5zwDGTfFAjIsG7esfqmiLIDfQff45q0fqsFz0n5MaPVGrzaDXsGz9F8tLUQ8lksTt9AHK7M79LC2FO6-ECx16JXjj-LCzR81UJ0rZfa1RHwpBXcsbyhWG8MwTdUk/s1600/rss.png);<br /> }<br /> ul#navixed .photos a {<br /> background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrSknsExmJMjEtNtimj0RaOMT9_MuJdMGc7FIV9hHOJTF9J-Mw5ZG7eCs-Os-xPrI6wmZ0T2PIxN-qNqzsEe-xu77spCe69URcVoFCz4VbbegVFwe8bs3-ZVpapU8dlO5eYqJnazKvPCI/s1600/camera.png);<br /> }<br /> ul#navixed .contact a {<br /> background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXtpgZmM8XyA0mlQKwNj5WJ7-nmI839uqLOeJgYRYziUv12d09OUDB11LtTObwY9O24iSuHV5w4lS_L0cok44azDZ_FtMQoQaC00Rn0eINqvaz2fqzwxpEb531TxC2-5l5JKN-y7zBbpU/s1600/mail.png);<br /> }<br />

dan simpan script ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/><br /> <script src='http://kangdadang.googlecode.com/files/jcolor.js'/><br /> <script type='text/javascript'><br /> $(function() {<br /> var d=300;<br /> $(&#39;#navixed a&#39;).each(function(){<br /> $(this).stop().animate({<br /> &#39;marginTop&#39;:&#39;-80px&#39;<br /> },d+=150);<br /> });<br /> <br /> $(&#39;#navixed &gt; li&#39;).hover(<br /> function () {<br /> $(&#39;a&#39;,$(this)).stop().animate({<br /> &#39;marginTop&#39;:&#39;-2px&#39;<br /> },200);<br /> },<br /> function () {<br /> $(&#39;a&#39;,$(this)).stop().animate({<br /> &#39;marginTop&#39;:&#39;-80px&#39;<br /> },200);<br /> }<br /> );<br /> });<br /> </script>

terakhir simpan cara pemanggilannya di atas kode <body>

<ul id='navixed'><br /> <li class='home'><a href='#'><span>Home</span></a></li><br /> <li class='about'><a href='#'><span>About</span></a></li><br /> <li class='search'><a href='#'><span>Search</span></a></li><br /> <li class='photos'><a href='#'><span>Photos</span></a></li><br /> <li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li><br /> <li class='podcasts'><a href='#'><span>Podcasts</span></a></li><br /> <li class='contact'><a href='#'><span>Contact</span></a></li><br /> </ul>

Selesai lalu simpan.. semoga bermanfaat :)