- Cara membuatnya :
- Login blogger
- Rancangan, Edit Html, Cari kode ]]></b:skin>
- Dan Simpan kode 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/AVvXsEhZc6COeg4zbiaLTH960or5pdc0_cywk0qpVHiYCp0xciSBNI4E_7Op11nh9jmxKdSgjVrMHSmki6ORLUIzMJPkPe5LD3v0umtmQKXMwRoygTiIqjoMKrTiPuMOASW9uHxfqVXEYDVtI0Q/s1600/home.png);
}
ul#navixed .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrniUdSkafmjeILajipYpAw5q-PAxk-d1uBu0ae6KOIV7UxEzSlHi2xYrj5XFd2_LlqhEbhXpqwarKwmmm86PhybG5hfSH8yTVPzv1eOW-LVW025YfYe0o6uP6kbtI785lyatzrO43LqE/s1600/id_card.png);
}
ul#navixed .search a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit9l4EIPWxLBmJ0VIyLQP6AW6oGbYs4J4PMO4uJbKb13EJflYzzydqQnipWyw-wAWR8vUZJQlMw3HemQuTJtaFEmO8_7T_VjRSrrAsTsQ0TcoIpxC2tDvMMFm5VuGBLXvHzFff4JcIjGk/s1600/search.png);
}
ul#navixed .podcasts a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilhijbzMpHj-gYc9qYyG8PYyGqB8nUqr7tYCNW36KKnUzk6JIVoBcp6147YR7o0v-tGieg7d_t-2NW0Wuq9rCCvgsqbokpwZC8hmhkgwZGHsZJE2veii9-d1YWf1JGgY41OR5Np16rmOQ/s1600/ipod.png);
}
ul#navixed .rssfeed a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUExIY2bZMknZvgEvckV8yXjXNwQKRGHM0SoYzxn8w-a9lutFRpcs8erQmSY_P9EuUSTyuZlt_SvF_0Tju_FWUlyxtCrBGN-Mc3wZ_GI-cdRjxQQCQ_VDtM5QOq8FSXY2VZVSprIrss8g/s1600/rss.png);
}
ul#navixed .photos a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl6x77xRVgu-_lO_pC7-lqNSoo-0I9u7CAj38TPZtkjG0pieWJWdpVKSkqBh67jMD9ac3VUip25EPHUf5eaY3r-qj33r_ApOrdXCYJ3QIrtCDex0QhTjkTWzVjTwe_W_EKLZET7huPgqI/s1600/camera.png);
}
ul#navixed .contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBgCAZkRZ8nTcH-CNPBfWye5vu39UU_T1WdFHKQEGrLufn_Qq5-mFR4XsSDSEjH4fCiQPvOXVEj7kNJY1YZ-e8eDZ1Bt-COi-97BvQ8S_sMce8sDeSU1BsF_Afd9mxt0QzK1ZNZgZ9-Ac/s1600/mail.png);
dan simpan script ini di atas 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;
$('#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>
terakhir simpan cara pemanggilannya di atas kode <body>:
<ul id='navixed'>ket : silahkan ganti # dengan link yang anda inginkan
<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>
selesai... jangan lupa simpan template......
Friend source : http://tipsbelajar-blog.blogspot.com/2011/04/cara-membuat-beautiful-slide-out.html
wah iy ini kayak punyanny temen ku :D
BalasHapusCoba aaah... :)
BalasHapusMantap ne Tutorialnya, dicoba dulu smga berhasil
BalasHapus@Cek Info mantapppp
BalasHapusIni yang ane tggu dari duli2 Gan ,... hehehehe
BalasHapusBoleh juga nih tutorial,,, Comot dulu kali ye,, hehe
BalasHapusmantap niy, ane kasih real support biar selalu semangat buat berbagi ilmu
BalasHapusnice...
BalasHapusblogwalking...
http://antechno.com
visit back ....
Suker banget kyaknya tak coba duluoe ahh...thx bro
BalasHapus