Home
Cara Membuat Slide Out Navigation di Blog.ok tanpa banyak basa basi langsung aja ke poko pembahasan
Cara Membuat Slide Out Navigation di Blog
login blog
rancangan -> edit HTML
cari kode ]]></b:skin>
taruh kode dibawah ini diatas kode ]]></b:skin>
Klik show untuk melihat
/*---------------- 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/AVvXsEgCfcAvfqhNhtz9lQfBvXoA2qQdq2IcuVPf2zf5AwEnG3Yvu16kIrcy1atvShFQC16r8Wo7w8EYH3rslQXCIg2TfpfQ989D9-UGFot4sp8kxWNBgpKOgnnGxrE_hegQfUo8jBqhxfKsDtA/s1600/home.png); } ul#navixed .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZdfkKUJf0A5q9hlK_R7taNK0huy2tW0zxtcaLlgy0nun6j64myo5nMzDlJVrmpVr9ecAa7zgZXaE5v_-vwRGAEol1aWIhWLkbtw88UJ9sUDvRtJiNz3C4PK1uk1GgEC-X_ywpIHHLps0/s1600/id_card.png); } ul#navixed .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNqXMH_3eE3u6RF9awjjmpNXdZof3iE10GlvGZKvbzrhhHxZzPXXGKMi4cH_ypxx3OtctWFSxSShJ_dTRsIk0JhwNWd1cZfXNsURGVEl3rMIqtyp-SvfJXSU8PeyZoPR0Hb4VZ0T4JrPI/s1600/search.png); } ul#navixed .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXbEatSxIs9M94xgTPtYtuvVloKSFm-eHDodd2BkSGx9UdNLharN2Xpp6JIo1szc_he26T73JjhCRqeeEcP97-ucG9X26aDjwvR7nEdOJGEnN1CtVRWXdb-gTR8nhSvmCHNsyXpzOoRdE/s1600/ipod.png); } ul#navixed .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga_cqiQPqI-6cK7olnc-clfigpeLTgQ3EEf9kXhv5_QXmZCJsbMRZcZB9ZHfLZQr3j5xMyNsmpBPREXO2dIwJ1kenZmFgiX-yuBtj8vyF4MOaGpB_WHzZwUouqN0wLpjddIRWr5Hppgls/s1600/rss.png); } ul#navixed .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDAgBUOa5W9_gzuBVOxB7RGlW2msFApSV91srYPaoWIgr304Qz5W4C7J8g6FadjzYFLbe6TQHFwEQJthLF08PZxuVp3IYbep3eZCS9F_7B_oebaK6O8XwL1neMbFzAQJ8bHTuXYDr2g78/s1600/camera.png); } ul#navixed .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjByTwf9sfeV2MZeS4QNQH1CaqNwYQ1zM0B65iQSh581u7u7dJ6GbjqyFOZkoU0CPSR1qSa0VV4zU2yjIFF8Z3uOR-D1EtNpCyo6q-AD6IowxfGtuEaIkRARLEKZwNwdG1Ac7Q_IrEH12Q/s1600/mail.png);
lalu cari kode </head>
taruh kode dibawah ini diatas kode </head>
Klik show untuk melihat
<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>
Klik show untuk melihat
<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>
Save:
NB :
ganti # dengan link yang sobat inginkan
Semoga artikel ini bermanpaat buat temen....
0 komentar:
Posting Komentar