Cara Membuat Beautiful Slide Out Navigation di Blog-Cara Membuat Beautiful Slide Out Navigation di Blog !!!
baik lah ketemu lagi dengan saya !!!
sekarang sya akan membahas seputar Tips-Trik Blog
postingan kali ini yaitu Cara Membuat Beautiful Slide Out Navigation di Blog,
baik lah mari kita ke TKp !!!
- login blog
- rancangan -> edit HTML
- cari kode ]]></b:skin>
- 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/AVvXsEiK_eoJRnaw2uniR1ojsgTwE29BpFsZ_P4WRz5iQ2Jla6Top9z7kfj0UehlCFL2JYLjrH3s4rP8vk_gGbPzKKFkH6ENtnJ7ROzy4tTihr2uSGO_55EBMQhQEG6btMF0IJ68XRW9Zj9WBL4/s1600/home.png); } ul#navixed .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZkOhIS1uhzCyhHOI_ov4slK98KxOElkydrEAnkQRZ-IrCgwi3-JX5UzoJ7sTNf75qZBaZAqcAjDidZvrDPTe0uVptusA_VTexB5ucUA0Hfw_ePv6tuxcknuDoYxgbOL86jprtVSfsVws/s1600/id_card.png); } ul#navixed .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyVCF_e3Pnj1u-_bqda1ERabiBhlFGl9WxyYT95Ub9uot6EvKzXhmhOybju7MbQ0qOpfCD7mxvsRSouSxLkjnQhYKiiQNoV_NNua5c5DxodmYauUbicV6_gx4ouxze8roQ5Fg8KLvO9LY/s1600/search.png); } ul#navixed .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcd_ZGjkQWAxWojDhrpaKecBJ-OnwhS8lPD8VPd1UItW0c8g74qfxTlvWafvJsroUzfxqlM0DQttU9A8G7hjOMQHhVgnZGBwN31UD76CF6b3ZQ8mNLOE5alabYtNLN3EimvnVLh9xHtvs/s1600/ipod.png); } ul#navixed .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh04Uru36XelpATXziSI9pCP35N7IjK1ep9J7En2FZWYHc53qHh3_KHVpJBeLR4WtCsaCAL0LJtyk_EVcQ0hHlDpieYQI32LOSOf0XsgCwKXJSrqDLd9G2fdAXC_OnhrpiRdTEy6n7wzGM/s1600/rss.png); } ul#navixed .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhOrOQU1rW_BuLmp2h2dL2ePikwzPbMKIAGXPKpnTKqw4oJk3DD7O-1QUKFC97lOynA0zFrDyARnfWkPsQuy_H1E3zqhUBheOzo_FxVL_c2E5D2yF-2WewbZtJ-vGOR78yvN3pd_ZC4Sg/s1600/camera.png); } ul#navixed .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJHQmatz_87COchl7iVv-ltwLrQX4yJnNypHTiSqARfZhZsJvTF4mS8z9YlgQ9AHVHOYOB2CCDT9ZmlhFfxwSL3MpV62GIohPlp0fePFv2XnwDux03JqtLBQtpP0c6mLiJQmHW9m4WmYk/s1600/mail.png);
- lalu cari kode </head>
- 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>
- cari lagi kode yang seperti ini <body>
- 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>
simpan deh template nya
Nb: sobat ganti tanta # yg bewarna merah ya !!!
baik lah itu lah artikel tentang Cara Membuat Beautiful Slide Out Navigation di Blog, semoga artikel tentang Cara Membuat Beautiful Slide Out Navigation di Blog bermanfaat untuk sobat smua !!!
{ 0 komentar... read them below if any or add comment }
Posting Komentar