Cara Membuat Beautiful Slide Out Navigation di Blog

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>
  5.     /*----------------     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/AVvXsEixhFe5-syYgQgUXA5-gDs7peC7CDZfj5rZvpxbH7ad6Yj428Yu5M4Ggs-C1hFuJM1_Ln73BqPgKLtW_ek22_AQEiR7tJoXeO3aTevyzWejGmeVc9mpQYaknUpxByg8XsvgdVxTEqZ2rr4/s1600/home.png);     }     ul#navixed .about a      {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Q9q_OumoEYcQ9skzhx_hWLgh7L3dHcZF8TMbvMPP_qumj2PuZSRBsEu087ShwZNIiFWLYPNgknqq2bBJda6OpjHq3Kk59qRSVAlxLVi6CkpvC3CHpySMnH1IKIuKXZWUWfRvUDFviNk/s1600/id_card.png);     }     ul#navixed .search a      {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifmpPIM0URI14iZrF6eXjin6zONkMii33O-dvVRluk1k5cWG5exmCZJgaPJekQzDmjzpBRj2Ui-X4uCgxFQ7KNdH9CxbAza3scs6yo7aamk194fOxn4gZGdhTRjkYRKDaeczlnyOKF0eI/s1600/search.png);     }     ul#navixed .podcasts a      {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4rRD_-z_d-m-OacrrLsP7qBCNqoWFoQmwNsFxOlpgpcZlKHP_I1js7W4wSEa6foeIOKWC1UyzaO1WuM82oC1COCyDd_8YSw4ByBp88Fb0VDr5SioecHATy19-HbCHwxnlJhuPQLqIWM/s1600/ipod.png);     }     ul#navixed .rssfeed a   {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlBIlg2cUXbaPHScml2YMfyQ3tvSLii1_ViJIkr6dV4ss69EsuFSZ1MVO7qexUAPifqn1_AQVJDFHonkgcr_cX-TwyJ92wJDgx4mAzV67fdr34W7hxdG5TAs5ha7MvdbeL0UPkGWo26js/s1600/rss.png);     }     ul#navixed .photos a     {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGo1D4hkJ2k6NcIRe6nO8sdrK33lkI2w1axo-HjWhkHD3qctvJntW8BpyqJV3q9VWIxGWT4u6QtCSk5I1Xs5NlIKkscklOfbHuL6xi_EkNiuaSj3RqRkvs_Q9ZGhBYvG0_ki_aqmsllj0/s1600/camera.png);     }     ul#navixed .contact a    {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi15QiCXmJON_BQ3ScRX_oq_-XIMj6G8Db-0-sqSqLNyK98TJf9UjlLMyUT3HqYMQv1DOu6yDqpQ1I20QzAElU_GNQ2t09QXaEHQz5CEkg-iNftGRebStBeuL5Y7lvWDXwz9gwrqH-cSME/s1600/mail.png); 
  6. lalu cari kode </head>
  7. taruh kode dibawah ini diatas kode </head>
  8.     <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;                     $(&#39;#navixed a&#39;).each(function(){                         $(this).stop().animate({                             &#39;marginTop&#39;:&#39;-80px&#39;                         },d+=150);                     });                     $(&#39;#navixed &gt; li&#39;).hover(                     function () {                         $(&#39;a&#39;,$(this)).stop().animate({                             &#39;marginTop&#39;:&#39;-2px&#39;                         },200);                     },                     function () {                         $(&#39;a&#39;,$(this)).stop().animate({                             &#39;marginTop&#39;:&#39;-80px&#39;                         },200);                     }                 );                 });             </script>
  9. cari lagi kode yang seperti ini <body>
  10. lalu taruh kode dibawah ini tepat diatas kode <body>
  11. <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>
  12. simpan

NB :
ganti # dengan link yang sobat inginkan

Penulis : mbok ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Cara Membuat Beautiful Slide Out Navigation di Blog ini dipublish oleh mbok pada hari Rabu, 18 Januari 2012. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan Cara Membuat Beautiful Slide Out Navigation di Blog
 

0 komentar:

Posting Komentar