Cara Membuat menu Beautiful Slide Out Navigation

>>>halaman DEMO

Cara Membuat menu Beautiful Slide Out Navigation - Cara mudah menjadikan / membuat / mengubah / blogspot / web menjadi / mempercantik tampilan menu / dengan mudah / untuk pemula / dengan menu yang melayang di atas dan samping blog / dengan efek slide out. 

baiklah jika sebelumnya saya memberikan tips mengenai Tutorial Keren Cara Membuat Widget Tab View menu jQuery, kali ini saya memberikan tampilan menu yang sedikit berbeda. mungkin kalian bisa melihat DEMO nya blog saya yang dibuat khusus contoh. berbeda kan....???

Baik untuk kalian yang ingin memasang menu Beautiful Slide Out Navigation ini kalian dapat mengikuti langkah-langkah sebagai berikut:

1. Masuk ke dashboard blogger
2. Pilih Rancangan --> Edit HTML

3. Jangan lupa centang Expand Widget Templates dan backup dulu templete anda (untuk menghindari apabila terjadi kesalahan)
4. Lalu kalian dapat mencari Cari kode ]]></b:skin> dan letakkan kode CSS berikut diatasnya.

/*----------------
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/AVvXsEjwVAQNwNcSKw2JeFN-4hsFNL36nV5B5Cp7uLA79AwzTonS0vQfYStU_HTEeDG7mpnWd42lVwCpURsM5oG-WGRXWQAq60xct2-VTN9_jzz5IEMMJ6JtM5YltNV8LOVbl7SIK-TSe9IBcLQ/s1600/home.png);
}
ul#navixed .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb77ERt1ry3LAxgCBR_Wvg9P0TRTyuZ7HFsZOh_dHt9IBneK4yZBrpm0tROMQhMYWPJEKnDogG3eqjDLaFbwB8VqZktvWMMLH0gBo-n1DJpVhSKpG8ctXqgd95J0eGwxNfq2zpw2hKXIA/s1600/id_card.png);
}
ul#navixed .search a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6zxLlOP74I6ISPbu1rlcuBCD3tNZ3_zQfzHvyy0Ra8wYBOdrqFtnEw6BPHIbIOCDPnO3bgzU9XSaed_GEuY68inDsosh3KOP3-ywflxc-QYPH_9loUqJf3z45MfI9h97Y7FLPi7fC-h4/s1600/search.png);
}
ul#navixed .podcasts a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiOM4Z-H9OiGEX9Cb-K-9yRNn_OH__P6Z2zazBultnuCL0xcJW1EZt2aZJQz8_PQYHZVPzyTHbSXgSRn9F8P0j_MpKIxuPw89U45esfj761bevo2j5iPUDQ0t-5vi59JnOXlAJGAXI3iA/s1600/ipod.png);
}
ul#navixed .rssfeed a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNL7z6Htvs2hiC5iHAxAgrr15sNElbp01LzhKPk5aYarfvVFjtCLKLeS2to1foLd8EhFfnpmSevZqz6RWUZ7ANAdaDZxzE3UF7S4C6ahW_8WzkcishO7A7MZE7huvVvNfibCCKkgO66M0/s1600/rss.png);
}
ul#navixed .photos a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7TsUVpI3Bc6VJh-5qJYcVSrUV0FWnbZm6Q1ec_ytGps0hye2bSW4dbe2DcA9lIRk1iXx1_YaqAj6_7Xtzd4zZLy3Fk7avPgP2hnDu2f5Nc57y7VoV0DXHVOK2VRkgfh1bBPfxwXHTFVg/s1600/camera.png);
}
ul#navixed .contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJpVL8yIB1odGRkPYocdGPZrdA__mMmUtimn4IW9B4byDG2HJD7RC2LG3bwU47PoaVl27FaL3RxDntDKGHDbGqbrp-joCRlxoupiZryDK9MkaxN_pbUti3obqnDk3ir9jRAxeTx4xGpD4/s1600/mail.png);
}

5. Jika sudah, cari lagi kode </head>, kemudian script berikut ini diatasnya 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script src='http://faencool.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>

6. Baiklah yang terakhir Untuk menampilkan menu navigasi horizontalnya, simpan kode CSS berikut sebelum <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>

7. Akhirnya Selesai juga, Lalu jangan lupa simpan / save ya teman-teman.


sekian dulu tutorial membuat menu Beautiful Slide Out Navigation, Semoga tips n tutorial langkah-langkahnya mudah dimengerti dan mudah untuk diterapin.

yang pastinya selamat mencoba dan jangan menyerah....

>>SEMOGA BERMANFAAT<<

>>Selesai baca jangan lupa jempol dan komentarnya y....