Pada kesempatan kali ini saya akan Berbagi Tips And Trik Blogger Yaitu Cara Membuat Slide Menu Navigation Dengan JQuery Dan dengan adanya Widget ini dihalaman Blog sobat pastinya akan lebih indah dan menarik dan bisa menghemat ruangan didalam Blog.
Nah buat sobat yang berminat memasang di blog nya, sobat bisa ikuti Tutorial dibawah ini.
Nah buat sobat yang berminat memasang di blog nya, sobat bisa ikuti Tutorial dibawah ini.
- Silahkan Sobat Login Ke Akun Blogger
- Klik Rancangan kemudian Pilih Edit HTML lalu cari kode ]]></b:skin> Pada Template Sobat.
- Bila Sudah Ketemu Silahkan Copas script berikut dan letakkan di atas kode ]]></b:skin> tadi.
/*-- Slide Menu 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(http://i1090.photobucket.com/albums/i367/bandiets/filiex-home.png);
}
ul#navixed .about a {
background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-card.png);
}
ul#navixed .search a {
background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-search.png);
}
ul#navixed .podcasts a {
background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-ipod.png);
}
ul#navixed .rssfeed a {
background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-rss.png);
}
ul#navixed .photos a {
background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-camera.png);
}
ul#navixed .contact a {
background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-mail.png);
}
- Selanjutnya Sobat cari kode </head> dan letakkan script berikut ini di atas kode tersebut.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script src='http://filiex.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>
- lalu cari kode </body> dan letakkan script berikut ini di atas kode tersebut.
<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>
Rubahlah Tanda # Dengan URL kehendak Sobat.
- Terakhir silahkan Sobat simpan template Dan Lihat Hasilnya
No comments:
Post a Comment