Cara Membuat Beautiful Slide Out Navigation di Blog.
ok langsung aja ya ...
Cara Membuat Beautiful Slide Out Navigation di Blog
- login blog
- rancangan -> edit HTML
- cari kode ]]></b:skin>
- taruh kode dibawah ini diatas kode ]]></b:skin>
/*---------------- Beautiful Slide Out Navigation -------------------------------*/ .headerfixed { width:600px; height:56px; position:absolute; top:50%; left:10px; background:#fff url(title.png) no-repeat top left; } ul#navixed { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 10px; list-style: none; z-index:999999; width:721px; } ul#navixed li { width: 103px; display:inline; float:left; } ul#navixed li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#000; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; text-decoration:none; text-align:center; padding-top:80px; opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } ul#navixed li a:hover{ background-color:#000; } ul#navixed li a span{ letter-spacing:2px; font-size:11px; color:#FFF; } ul#navixed .home a{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcQvl7quPJdP5wynvQj6i23vKInRWN-58VDYMCH6g0UQpkIOZyf0VGM6xoa-Bejip6KPORkhln3VlCS4G0QacTxyQrS3R9KCz2IMhF8xFZSa297YX9p6GUOK8cYN1Eo30sSGDfUHhP5wA/s1600/home.png); } ul#navixed .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Up5ZQHuPUQ6c0GFy9xyNUkCgauDWCZWkMJ0IpwYK-Od_X0APsUsGW6EDa76MJuceGODHtWEpYFFJLJHGPE-JI_tqMmTYCk_c5oWVuBcQ35yWHg_bJHxFRah_vFN1ef0DRDW0wd9MFPw/s1600/id_card.png); } ul#navixed .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiawfn0QyYAE4cNKZTfwhCZKp3x4u6npV5lQNj4BUiWKwAatSXaBF4zs2FUKxSsupikM3u7AFVa2FCvuJym5QG_Su9pDhlEnbgeAzjCepXQ_73VOFC5u8Cg9nnj9wrWfuvaJtXPxy7F8Hk/s1600/search.png); } ul#navixed .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBN-Xf_mrxMHdA5j-VvF17Ev1CmMb7yeucheirYcHLgeUojuOGJK6qS6rIxGhBv5i3iEPiF7H_wd0gbAuDOfAG3zFIi-HDn1XU9uRXclrklxFux4p-tmLUMVtvCV9Ar54TM8eG1KaXlZY/s1600/ipod.png); } ul#navixed .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf3z5S1gb3-3i8QU-hG-raNTjes_I89NQXzLSVdcWup9Jd6lLYmSeiorrYvimPKjUmNoOLidukDSNEGV5yaibUG8uCnqlo39KFR8Z-z16tJwUykqFS6kjlc_Kq-XtKD1OfSwIEiQx_ols/s1600/rss.png); } ul#navixed .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8kDLenPkt0EaDReenqRILeZvPtxAl_X15q_dcllRpedWhylhU9kWaHzpVpn-S6sTC90TlvIijGjTeUu6AfdyXI9UeP0CqqpTHUaGv6XcvtAKazE1OH0utDXuWI50TLRL6VVJsKX8a8fM/s1600/camera.png); } ul#navixed .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIHPxIjVofR5oKG29o5DKqE1ge-ycCdnN04PnUovCzrTfq1HHmt91aDG5oFvKAk80aC9FbBjoz-wwSTvw5NAP6GiumenFO20W7jLLPmWYCuQUFfRRT6mE2Fo3x4VYcMpuJKTWdWE2pPeA/s1600/mail.png);
- lalu cari kode </head>
- taruh kode dibawah ini diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/> <script src='http://kangdadang.googlecode.com/files/jcolor.js'/> <script type='text/javascript'> $(function() { var d=300; $('#navixed a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); }); $('#navixed > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-80px' },200); } ); }); </script>
- cari lagi kode yang seperti ini <body>
- lalu taruh kode dibawah ini tepat diatas kode <body>
<ul id='navixed'> <li class='home'><a href='#'><span>Home</span></a></li> <li class='about'><a href='#'><span>About</span></a></li> <li class='search'><a href='#'><span>Search</span></a></li> <li class='photos'><a href='#'><span>Photos</span></a></li> <li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li> <li class='podcasts'><a href='#'><span>Podcasts</span></a></li> <li class='contact'><a href='#'><span>Contact</span></a></li> </ul>
- simpan
NB :
ganti
# dengan link yang sobat inginkan
Good Luck ^_^