Cara Membuat Beautiful Slide Out Navigation di Blog

Ok gan,,,, ane mau share nih...
Langsung aja gak usah basa-basi....
Kali ini ane buat post tentang Cara Membuat Beautiful Slide Out Navigation di Blog
(lihat screenshoot). Langsung ke TKP....

Ini step-by-stepnya

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/AVvXsEg0qnCbsEr0MIxA28AJod1SRfAt_fb6lRiE7TQMVSGHRQs3QOb-J9WcTvFMkwc09HBR450jDj3Yy9hJioGHzlgIhxKz-ZCa3P4Z96SIV-gmQhGtEG0sg2qtAUFK2dI6a9MZ365wYU4nuzs/s1600/home.png);     }     ul#navixed .about a      {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfcox6CHvqG_kSaYJjxw5CW8_yD_tgKcfUO_LIXcHV6WLHNbM5bo7i_fIPs96bE4qITp88yuU3sY8TSOKYXrKs_7xuwSg1LA3GglORxUJoQQqW-WC7G_1Zzu-cDL3p1cwPiqbsXtP300w/s1600/id_card.png);     }     ul#navixed .search a      {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4nlvCZQkg_Trn_SJqnRKG8V5czF_mrjGAi4wwuswxiCJUYbartXuZqVh4BMB8qG3sqZHpXJLrStOaREfauqrqgumWNf2jCdfOkr_xJyal6MJrQaM6q0EYhIPfaQqCXE4tVgkZO-YEbPI/s1600/search.png);     }     ul#navixed .podcasts a      {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLbU12HUqeu8KV8hqrGju2_OQZllUvxhcswAhHW5ELsoJbihIP5sjCtxXYyu2coxvpKq3cu1JYGbp_expl9b9jcjRJeYkh8fNa0OOnFKzjE1uDf6IZ8xGfTaRPqnlsNziLIakPWQf7U9M/s1600/ipod.png);     }     ul#navixed .rssfeed a   {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7b1jEaevanxmRae1b3OczJJbtz2IA62NvVUvPy_cNqJgJVODfZ_DH6OfzcU7z4pYfbKmmDQS1IAa1dhOYVNK65W8t89ecyssrjTWQZ_T9sG7R6La-GXbfxbbWoq3i1DK_C-ARVfnQZ4g/s1600/rss.png);     }     ul#navixed .photos a     {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU1K6L0QrTO2hYMwbihonc6othdVDnsD51U9-uRB3R0zC2Z5TQnns7JzxkDlsgHKi0ANNNidqaX8ukVJYi-4OavpaLwZXqIHbZFK93KMpf1x2BF_Usub-KQkZrCLBzWew13Z5rdvr_Utw/s1600/camera.png);     }     ul#navixed .contact a    {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLzEklN-I2TKSHY_VjtfLBebaoo_MOJEn-ihtGu2i0qMgvzvfnauMmCh501HiHyk2cjZpgCtfz0gnsu_Z7sEqxhyVbXFwvwRPpLH8YlwgsJnymvLO_9U28-jlZits8KqkRxfLwj_hV5iQ/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;                     $(&#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>

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.

Selamat mencoba gan.....

Related Posts:

Tweet