kali ini saya akan me
mbahas cara
membuat menu Slide Out di Navigator
caranya agak sedikit rumit sih tapi
kalau sudah jadi pasyi bagus kok kaya
punya saya... langsung aja yu Lets Goo.....!!!
1.Masuk ke blogger
2. lalu klik rancangan lalu klik Edit HTML lalu cari code ]]></b:skin> Cari dengan F3 atau CTRL+F
3.Copy Script Di bawah ini lalu Paste di atas code ]]></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/AVvXsEia5LPgiQjWszmbftTa0OLTXyacCTZ2xpw0L_LLNWDZYxG7fsTthAnOOLgcIN1CKhQ7YKb2p7l5lK6RSosmfcbTJ1zq6SxCGiokDzB-jcg2y_AnUKDkN34Mt46k2IJcNn4G1P_RROZMuXw/s1600/home.png);
}
ul#navixed .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySR-j8geTOlVWMT8kX8GzpbogsvpltlpYtAbCHXa3o4vHcaPWMqGfrSIVhyI9ni65SjukKkxy7iyGAJncYPH2oMNc_ILgskS6rjmrOelh6l6VE2MeD8U800zX-CdkCUI5wK1Q2GuISMY/s1600/id_card.png);
}
ul#navixed .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG0TnJBkeWSNL7eWku9I0avKiQuQB55Ll5s9aqy_QDWphY7GlJ08TMldQj75jQaYTP1Du1qJFF9Qb2MkWuw8gQUZ7RIlZNut2U6Z_jrgaJCf4NkqbOh5J6XZ0JUnCURA3tg_2UtyELdPc/s1600/search.png);
}
ul#navixed .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwsrfwTT7FIRz5-E9KCkUw4-8lPR6vIz5vZGKE7uvl_pE2tC4f5jYp-2RqgOjQX5w66agTM7tBd3TT52Nf-L6JWQ03Xa9xstPr1i5VrtDpPBU8280hA7P6bntss-dNAWYt5kT3Ao_9SWs/s1600/facebook.png);
}
ul#navixed .login a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIgoyQrsd9yYfTmGqJ9NYr5ASPoMehT8ZVe9Fo1bWwhA-JbYK76sapTvmDLZRtWngkIi3dQdy4HWQhyMzpmXQtkOpQzwTjq1Qf_xWSVkxYZ-X9hPBI99hJ90utADIKzne90Mpz-ToRcmw/s1600/Login.png);
}
4 .kemudian cari Code </head> lalu letakan script dibawah ini di atas code </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;
$('#navixed a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navixed > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
5.dan langkah terakhir cari code </body> copy script di bawah ini lalu paste di atas </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>
ganti tanda # dengan url anda
mana? kok gaada?
:o