- login blog
- rancangan -> edit HTML
- cari kode ]]></b:skin>
- taruh kode dibawah ini diatas kode ]]></b:skin>
- lalu cari kode </head>
- taruh kode dibawah ini diatas kode </head>
- cari lagi kode yang seperti ini <body>
- lalu taruh kode dibawah ini tepat diatas kode <body>
- simpan
/*---------------- 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/AVvXsEixhFe5-syYgQgUXA5-gDs7peC7CDZfj5rZvpxbH7ad6Yj428Yu5M4Ggs-C1hFuJM1_Ln73BqPgKLtW_ek22_AQEiR7tJoXeO3aTevyzWejGmeVc9mpQYaknUpxByg8XsvgdVxTEqZ2rr4/s1600/home.png); } ul#navixed .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Q9q_OumoEYcQ9skzhx_hWLgh7L3dHcZF8TMbvMPP_qumj2PuZSRBsEu087ShwZNIiFWLYPNgknqq2bBJda6OpjHq3Kk59qRSVAlxLVi6CkpvC3CHpySMnH1IKIuKXZWUWfRvUDFviNk/s1600/id_card.png); } ul#navixed .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifmpPIM0URI14iZrF6eXjin6zONkMii33O-dvVRluk1k5cWG5exmCZJgaPJekQzDmjzpBRj2Ui-X4uCgxFQ7KNdH9CxbAza3scs6yo7aamk194fOxn4gZGdhTRjkYRKDaeczlnyOKF0eI/s1600/search.png); } ul#navixed .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4rRD_-z_d-m-OacrrLsP7qBCNqoWFoQmwNsFxOlpgpcZlKHP_I1js7W4wSEa6foeIOKWC1UyzaO1WuM82oC1COCyDd_8YSw4ByBp88Fb0VDr5SioecHATy19-HbCHwxnlJhuPQLqIWM/s1600/ipod.png); } ul#navixed .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlBIlg2cUXbaPHScml2YMfyQ3tvSLii1_ViJIkr6dV4ss69EsuFSZ1MVO7qexUAPifqn1_AQVJDFHonkgcr_cX-TwyJ92wJDgx4mAzV67fdr34W7hxdG5TAs5ha7MvdbeL0UPkGWo26js/s1600/rss.png); } ul#navixed .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGo1D4hkJ2k6NcIRe6nO8sdrK33lkI2w1axo-HjWhkHD3qctvJntW8BpyqJV3q9VWIxGWT4u6QtCSk5I1Xs5NlIKkscklOfbHuL6xi_EkNiuaSj3RqRkvs_Q9ZGhBYvG0_ki_aqmsllj0/s1600/camera.png); } ul#navixed .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi15QiCXmJON_BQ3ScRX_oq_-XIMj6G8Db-0-sqSqLNyK98TJf9UjlLMyUT3HqYMQv1DOu6yDqpQ1I20QzAElU_GNQ2t09QXaEHQz5CEkg-iNftGRebStBeuL5Y7lvWDXwz9gwrqH-cSME/s1600/mail.png);
<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>
<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>
NB :
ganti # dengan link yang sobat inginkan
0 komentar:
Posting Komentar