Cara Membuat menu Beautiful Slide Out Navigation part 3 [ di sisi kiri BLOG kita ]

randomposts

menjadikan / membuat / mengubah / blogspot / web menjadi / mempercantik tampilan menu / dengan mudah / untuk pemula / dengan menu yang ...

Buku Tamu Versi New ( Shoutbox / CBOX ) Pada BLOG kita

How To Make The ChatboX / Shoutmix Cool To Our BLOG

Css3 Reflect : Efek Cermin (mirror) Pada Gambar Dan Teks

Membuat Kotak Komentar Blogger Bergambar

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/AVvXsEj0k3gOhbyNMVnv-onf0hV7Z067mXTFyTXDVgaUVbPz89eOiA-G1Y782DtfuRBbPoLlzYUI25JbHnpy2RgFi5NjrSjKdMLlBmEokEP5hOloDtQKLB_ZUbtHHuYrPNnybrv2sK6oG3bdtrY/s1600/home.png);
}
ul#navixed .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbGFlzP15nSXsAeztlaqP06wwTm1xGN09DxoI3DH4Virbc25p_nrSi9dyTarOsFfNJSisbYDpF68JZFutNxW6DWBiuN7w3d-xiA5nrz1jM9nRWE4-w1v67L59ocjp2dTfBC2jCGJw7Wx4/s1600/id_card.png);
}
ul#navixed .search a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT_ebtPxANph5jTPwjrtNIVlpP7J9fxqKzo_KVRKbAp2ZeCCqMTb57K_hwsacrKKG9VngTbN0ooAEZEjIzeGMcOSp4liY31YIU_J8OjfoMg1NOlOeq5UGPTMah0HxjDz2T8Q82eeORhbg/s1600/search.png);
}
ul#navixed .podcasts a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-aMlY398a1nR5J8hmV-k_TbLK05kOcmO4cWuVuZJdJ8mTIGQuRupY8RA4MT4aDZaIp1IO031yqs3mJfkD9yQ8we5oLBAkA5_BxuyN30z0GhuWbT36VlCy_F4bwFAxStN5b9m58MVDBVc/s1600/ipod.png);
}
ul#navixed .rssfeed a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrHOCDuL-GX778vXvGQYRDLU9s7G91CLdRM51tEEZnt2_Ej7pdYi1QEPKDxHluB7wGjmP7uoYx0DEmrbENKt3Hy-OMUjlK_lxxv1tNwKH-oC5EqaxYFy7Hm3TQZ18kIdPUu_wgfqGIBiI/s1600/rss.png);
}
ul#navixed .photos a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkljy9hYVssNpYnDzWnkqgf-Cvr1HM16XY45s0GB9t-YYSr5wEsMDBFPXY-Kcv0wGEmYydc81T5VQLpNaC0U8APjtcbHae4y8tVful2UV8-QtqCfKZiH5WfOuvtUsJ-F4dRGvlEgHkm5k/s1600/camera.png);
}
ul#navixed .contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhBqYFnduV68rxgyezzJdgdkcFyBjychRZW-x7-jzaj3lkwQ4cpXEAsRsi5shOXGx7koD-NIHAZIkXAJU_oYiGNQMutmu7qbx0CnepEvUVoW-YCstoxI2aWvtY5gwXbzQ5x8rQoN1Q-IY/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.

yang ada Tanda # harap diganti dengan Alamat link yang anda Ingin kan

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....