Cara Membuat Beautiful Slide Out Navigation di Blog
Cara Membuat Beautiful Slide Out Navigation di Blog
Kali ini saya akan posting sebuah tutorial blog yaitu membuat Beautiful Slide Out Navigation di blog anda.Ini dia cara – cara yang harus dilakukan agar bisa tampil di blog anda.
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/AVvXsEjKF13gI513a19MSRrUAdiA1nd2aP0KLzlshMEwk15j0A35YBQ8KMBYAvtQ9x1GOOpBTSdV_i77AU0mgIMTrjLG4R2c4L0KmaiGKmfTomfBf2jXpBZtlOoNu_RXudD8yId99tQJkSlPEE4/s1600/home.png); } ul#navixed .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPWZUrzL7qIWwRqvUCRklDtLFzOlWY_xBmrj50i6PVxTRbgjjHZdV7TXWBzZU1xncbT6mfNHKmfGChGTQCOcLkdfPQBD_3xNQkEqZfa8px1UvGgTCpg1erI6IMcRszhlxgMc6zRc6wPjA/s1600/id_card.png); } ul#navixed .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9mPu8zFwFcvZ0Gop_3rVnHsE-0DN_JVkpOZ0rdS94TWKvyu2El44s9vWLOAGpVSyictwM3mcpmm_DX3nbuaU0lCanngHX5t23xPbp2vcrns4IubgJ5mQ6LhD04JaALiQwOnwT3DFLjYA/s1600/search.png); } ul#navixed .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5lbRq6i2SKYEvwsZxHNHjAOTzr9sjG3_Nowerm2l-9ypa1uEuYBsYyK4tKoYy7ozeJkEIuyrFhhPbyLcz-ohpR-spZKCVh-EW09VrOWObjopS2J5QtKt5lClemSNxwddmRvaXwhTiU2E/s1600/ipod.png); } ul#navixed .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtbU6lMcbE9IYkMvu_574dd0qrt-CgZpnMnwuNVvwKkUYM13xOKmfXugVteYuiwbo21PnQbOrXBmItx-JnqumRT9YnbmfWWP6PB6fmdCqbddLK8IEa6WECw_e3Obs8A9jFZU77wlr_i8o/s1600/rss.png); } ul#navixed .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMCb9_NFHqVvzXG6a1w7rmugkM9MlY8VijooGi_cHlbJeO8hbpy5CYF7Xbskhaxfj1xyntLdzXun-EHsb-QOOFVtWgyvwTaoNKXYK-faNX3pW04QHfnrBSqcuKL8u6yu0YftdXR7dBxzM/s1600/camera.png); } ul#navixed .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxtH94UH8hp4ePNqE0dGdATwj6AWqM6ijkD3adNVH4DmGV88Q5BDQhoMa7ZSNPh4imZHygVhBfDh8hbrPh6nbdPCO2haTR9AhTYKNBgMnH6MfFzA7QZgaJZomQym2CszdMuomwSnkKexA/s1600/mail.png);
5. Lalu cari kode </head>
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
Komentar