Cara Membuat Beautiful Slide Out Navigation di Blog. Setelah sebelumnya dulu saya share mengenai Cara Membuat Navigasi Efek Slide Out dengan jQuery
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
1. Login blog
2. Rancangan -> edit HTML
3. cari kode ]]></b:skin>
4. 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/AVvXsEgQuEGmR4yhLGrZv0WjfTlWGeYq7-XW-WLJ-iqBkWPtC0BN1eT8EdZn3K9VWUx_qZCkxNbFbtScX-t7DjxLh-gFh9Lovh8tT9HE-b5y7JhrMuXx3rbNHgGAk4eOmrKIygyJyWQPNVACWhs/s1600/home.png); } ul#navixed .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm_8-3R6vNLz8Y0Msk8VoRupHl7_6Mbfr6xif8xBILSoSVZO-DlOoQ248LlEd2xi1eJaqgdWTRjzR82WQVFpaswAqW1jIVywQzHZQP5HoydLx3-9D8rT3n9edpRrFRIGoQFD05oJslcPc/s1600/id_card.png); } ul#navixed .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik7vFhyphenhyphenXYsUCennY4pGmR9Q6VBrIwN8nas65FDDGWR3-O37UkOY8u71tFLdSuBnq6fRPjbwyzsvapQxCPawEQkf91VeO3ozZGRFX3ag11TeoOxneiqDESJA7iZ86kAUiPj-G1R5YXyW88/s1600/search.png); } ul#navixed .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1vj-L0n55IfGqdihaw67DONoFBzX6frJkOmX-25Dac7J6KJPdvbMXuKecqc_6u1GQc4IAsJU9A-C2GFXv5ZtmqBrFICf2vAxbaVktZPUrQJ2d74lQVr2XyiGRdF9TljJy_rezAni4SGY/s1600/ipod.png); } ul#navixed .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZF9w10g1u2EEoqqFWBrRDqfU-Mo5MbxqR80teFs_K6PH8ixZyWdYgIsDvZBFEd6aVe6Fj3yKHu85u0jlfexehEusthlmhv4T0x-drA8IMNOeNVJlIhHo9NZ-9GSHzzRKpg3VgCjTofZ0/s1600/rss.png); } ul#navixed .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG_r9Ze0ZErT1hl2tcKP-SEnaRKl0CEFG7gT-YKQ8gF0DbOv9HTX6mJeYPs6rl0S3o2UU7uBx8fGDUwKXbSBvhDY3UY6cJkilqEjm-0j-KSX16TxXUFtvz3YnPX-5xmA2jokxOI5bv7Q8/s1600/camera.png); } ul#navixed .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ6_mJrku_fLDFel8B_j2qA_sgaOivJRctdfiov1wpIEPq3mOx0rdPky9gKfvGdUX7tcbP0t9zdrWArNKmmtXSn7qEVa7ldtfadUG_2hpMam1Qj_Gctt0NnaWFHmdOu58cKekE49eK_Ls/s1600/mail.png);
5. lalu cari kode
6. 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>
7. cari lagi kode yang seperti ini <body>
8. 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>
9. simpan
NB :
ganti # dengan link yang sobat inginkan
Good Luck ^_^
0 komentar:
Posting Komentar