2 cara diatas sebenernya tidak punya banyak perbedaan, karena cara diatas sama-sama menggunakan efek slide JQuery. Tapi yang saya share sekarang ini slidenya tempatnya bagian atas, lain halnya dengan yang sebelumnya yang letaknya disamping kiri.
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>
- 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/AVvXsEhD26aSFRYI73fRwcdW1W_Hch3lJhu7y3uoQmmPCIk0W6B-jSHyuYDVGXRrSt0twIoT_Zd0NM5JeUrBJgGN0RX5AJRLCDG4lHZwccDR82SdbuBJARvKL8wq_ZCVOqRXupTAu5iBKa4z16g/s1600/home.png); } ul#navixed .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Mk7PhZgziFIVdKDfyFuea0FW2HWizUPoKTS18TqEB8HGM3BLYdFJLMR-_y6xsugC_91IkNs1kMfod7EMnsqNPNvmKFcQNc4S-cijDi_lAO1uR59SgDhf7H8rjZqpllbKoCQlzZP-jOQ/s1600/id_card.png); } ul#navixed .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ZrnwjziWub6AsxYJ9A-8XxuGdpzRxVSFoB1UBMg8sr-ylikQd_1w4468C3xUIWSlqNPp-6nrEgAfqXug3TPK9UGcljh9CaZ8PRkMtlUMShP6CZEZEStTe6_VM7jiuKTtB1jQ_-wikDY/s1600/search.png); } ul#navixed .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYnZtpTNE3Ab-PVJ0vnOhG0RnhiLrQLsVQguhSyZoF4oBsTJ8o28kg_ya_4764HxzjTimD2nIjCTnT8VX1QvUnULNfYdwDjsmt0QrytzA4UIRDBCmqxui9viVxqlXTKp4Ryrat1HAMLAA/s1600/ipod.png); } ul#navixed .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHM3EV3MTDW_V2n69hFaQ0nucA6nwQrt0BdvTmbYb-gTabosUPl-T39qXkfLGoS3i1HqviPj9StrPXcwq_tjIW95DuiqeDAwvMqZHTnmdEZ8XIDUu1bCUJqOO-y5X1nixB8Kqtfl_Glts/s1600/rss.png); } ul#navixed .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5sK9LWqAwRfMldyv5GvAtq2hOLQDIntCy90I4AbrkF4xmsrWAkFb3weV0bw7OYjb1aFHy3lHUaDrJ-NTSlG1tSrC4dzRA8kSau8XRDIKnR4FrLsmr8Er5lY9Eacy8xk7kpYpQjQNdyB4/s1600/camera.png); } ul#navixed .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU_BTHw3yaJelY_kwtkdpekFo6-9sJK6YUt-DzpvUp56GewI0a5feEYdbF7raxA0_JDbYOBtK0Hg5GJ2ZMnfNDxIx6bZ-yi5YfUyix9IK4EJg-6L4rIq3g_7p5wB-0pxxtYTdAjgs3VM8/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
Good Luck ^_^
). hehehe.
. oya mungkin mungkin masih ada yang bertanya – tanya apa itu sitelink. Tenang aja ntar saya kasi tahu.
