Cara membuat menu slide out pada menu navigasi menu

Untuk cara menambahkan menu navigasi slide out adalah sebagai berikut:
1. Login ke akun blog
2. Menuju menu edit HTML (klik menu rancangan untuk blog tampilan lama)
bila anda menggunakan tampilan blog terbaru caranya adalah

 Silahkan klik sesuai dengan tampilan gambar diatas

Kemudian pilih edit HTML setelah anda klik akan muncul tampilan menu lagi silahkan klik LANJUTKAN

3. Beri tanda centang pada menu Expand widget template
4. Kemudian cari kode berikut ini ]]></b:skin> dengan cara menekan F3 atau CTRL+F agar mudah mencarinya dan letakan 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/AVvXsEhNEJ6mBYxKRiTvkOwjwoMRlMfmK95V6e-BMV4khiNbTz3HZT3jxXst7djqZe1QdLQMoZQRG7G-7z-5B6-Uz1naUVWxNLJDuOxm-KQN2IDq5NUeTSUD5sAfZsq84r032frFM-L9Ut8Ty_g/s1600/home.png);
}
ul#navixed .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl64qCVRMfYm1mj_T3JHuVfBs5A3Ay0aUFCIA-VTuL4qGNLge0sye3x1JhlcqPpkGgAScEvcSM-MKaBWRZqvqKSATAkpSTw7lGt8cBnqfYB1aah8Z8nO0iVNdiLB5dWs0mROs2JKhyphenhyphenTJE/s1600/id_card.png);
}
ul#navixed .search a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQdfAmBu6TL7EWK0MQfvrWQFxJKYdyEpnYjEu0zb0mb9nbSkQNAcKyIPCdoe7rlKHewjx6jV1H2oGKvZ34TRCOqQQZRDiKrNHqCjOIb7GAZgv3myMp9rS95xC7R2Sc1vEuB6kxvhYPVGw/s1600/search.png);
}
ul#navixed .podcasts a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNMZxGyh4Nj54Tm9SDa1y7uH91iAC6Ksh2tkBmSDFdqhHNm01pMleQyAHDG1-aqJoIlGSqIvBnWi5wArAQg2umNCz41VvzA9Cu74TP5Ks0VWZUQB0gspbHnFsql0jGS24Jsppa2xSpdvA/s1600/ipod.png);
}
ul#navixed .rssfeed a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuECiNB9mxEOh2pGAIWazFct6yJLyFquSqss9pJYWo1qVmCSP7RJ6bkrD8sM-sdded2yKmfRenh8SfdeukhUW-5g0eHuZ82RFmv4NmlnELdp6f0HoPDhMV2I2NQ35bycfjlHHojlprhwg/s1600/rss.png);
}
ul#navixed .photos a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6XIrsBwAjpAyPAd0LYyKlH2er5gVt02cOu5jkyKriR997RUrl3fIQuI8gu2rwwu1XUY0pdHySEgVEBh8rmfkvbx_zfxfWsIS5-HP7e02_FAG7uYUPMuKWP_iSHdvkSWIRJG5bsfAR1rg/s1600/camera.png);
}
ul#navixed .contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-PYHxc3-hOG7sIInuMu7SbQSVTP_vp2f_zbi-kRgT9c4iMhaJweXZsQR7zu1P0rU62bRtBUzGJIqEefAod8Z0jbNGxwWchM-3clehiYL9LE796e4fkEII_cydf-6Tb727id9MeU_ASUU/s1600/mail.png);
}

5. Kemudian cari kode berikut </head> bila sudah ditemukan letakan kode dibawah ini diatasnya

&lt;script src=&#039;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&#039;/&gt;
&lt;script src=&#039;http://madiuncool.googlecode.com/files/jquery.js&#039;/&gt;
&lt;script type=&#039;text/javascript&#039;&gt;
$(function() {
var d=300;
$(&amp;#39;#navixed a&amp;#39;).each(function(){
$(this).stop().animate({
&amp;#39;marginTop&amp;#39;:&amp;#39;-80px&amp;#39;
},d+=150);
});

$(&amp;#39;#navixed &amp;gt; li&amp;#39;).hover(
function () {
$(&amp;#39;a&amp;#39;,$(this)).stop().animate({
&amp;#39;marginTop&amp;#39;:&amp;#39;-2px&amp;#39;
},200);
},
function () {
$(&amp;#39;a&amp;#39;,$(this)).stop().animate({
&amp;#39;marginTop&amp;#39;:&amp;#39;-80px&amp;#39;
},200);
}
);
});
&lt;/script&gt;

6. Langkah selanjutnya cari kode </body> dan letakan kode dibawah ini tepat diatasnya

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

Silahkan ubah tanda # dengan link alamat yang anda inginkan.

Bila sudah simpan template anda dan silahkan di cek mudah-mudahan tips blog hari ini bermanfaat bagi anda yang sedang mengedit tampilan blog,