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/AVvXsEicEMu8-u89TI-xP12HBseBzkoo3TRrNDQMae0CFCv_pXXpCdm9CKqUfU3i01ghoAhOJVLGzhc2ZFrRBv1IxS7bbAi5SpMhiQEY5M7aRXYbfFxBoLiINc7qQd253MeIKvFBQqX1sFBIkBI/s1600/home.png);<br /> }<br /> ul#navixed .about a {<br /> background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY4YInTBgjFpVVcjWeDk7JhkhUigmvNYROMcPlQZPbkeVMroR9Zq0WxikFBAoAie6pobi1PLOhbmnf4ewh8NRW5NFPMHz9Vp3h70-qCgmcfsJ7aG_m77pK6Ik2PMzMnefPWG0LGl94jJI/s1600/id_card.png);<br /> }<br /> ul#navixed .search a {<br /> background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7hZ5zdhP5gS0Z9C3gvON0uV09t0BHvIwsgphe8qKQ4nv7dGQoe916ERnq3bx1x0tahiHCnMQK4X_jno2zWBYJSvbCjjwh99BvqZBkVPXD6rUi1r8CWkuYBtlzOgaakgdQOTw_arTe_O4/s1600/search.png);<br /> }<br /> ul#navixed .podcasts a {<br /> background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHMbujYI7wJuH1JIK2rQ0LtEW9oxTye7zHw9SeH_lNbr3QVbT9wsN6UkV5wDThB5OPaWUktxsVWEkRxRz4n-7eWkrLNSMy82MgYVeHHbJbeqEwayghn9ykoj1c5JjfMyZzFfqP1nrwFss/s1600/ipod.png);<br /> }<br /> ul#navixed .rssfeed a {<br /> background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyssn2nkHjpIte6NwP66aZ_wlIUi51w28dSWZxWVGpdDfvHZgIlQ_wyDeEL4AnYAA51qG1KnBLe3Jdvbrtgb7qHXvJ_BlRYDuRQVuH8zneKECor1HKLC4rq83Ja_MTeNeakg98pK1L1u0/s1600/rss.png);<br /> }<br /> ul#navixed .photos a {<br /> background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBAUQ0QvqBd6W-G0snJDbOWwjjq6K3ZImAbQeLamz2Rf7leWsmBxWYY661Zu_uSm6Bphi4UkKIJgSgtyQONhPmizcOdHpHNbhsC9H5mxkfPMMf26I_QyYYn1IkZ6ITgBYW1IeS-vVhXHk/s1600/camera.png);<br /> }<br /> ul#navixed .contact a {<br /> background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCsnJ-pwyXRjLZ9ObYeyseAsygJOLPUSVEdsvUcXni3PBKI0NjdGt0q8SAN7PYevS0Gr05OLrapEE8Nr5vMiJnie3QI1XysqAbqDxaZYLbHpXBNnVUsnVUb3SKMJaySzz8ihIIdR43k7A/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 :)