Jika anda tertarik untuk menggunakan menu fixed slide out atas ini mari kita ikuti langgkah-langkah pembuatanya di bawah ini :
1.Seperti biasa anda harus log in dulu ke blogger
2.Pilih layout
3.Kemudian pilih edit HTML
4.centang Expand Widget Templates dan backup dulu templete anda (untuk menghindari apabila terjadi kesalahan)
5.Copy code css di bawah ini dan letakan diatas kode ]]></b:skin>
Ganti image url yang berwarna merah dengan image url yang anda inginkan.
6.Copy code dibawah ini dan pastekan diatas code </head> atau di bawah code ]]></b:skin>
<script type="text/javascript" src="http://cilimoes-script-file.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
7.Dan Untuk kode html letakan kode di bawah ini diantara kode <head> dan code </head>
<ul id="navigation">
<li class="home"><a href="http://bambangpage.blogspot.com/2009/12/cara-membuat-dock-menu-menu-ala-mac.html"><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 tulisan yang berwarna hijau dengan alamat html yang anda inginkan sekian dan selamat mencoba
1.Seperti biasa anda harus log in dulu ke blogger
2.Pilih layout
3.Kemudian pilih edit HTML
4.centang Expand Widget Templates dan backup dulu templete anda (untuk menghindari apabila terjadi kesalahan)
5.Copy code css di bawah ini dan letakan diatas kode ]]></b:skin>
ul#navigation {
position: absolute;
float:left;
margin: 0px;
padding: 0px;
top: 0px;
right: 220px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#E7F2F9;
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#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .home a{
background-image: url(http://cilimoes-file.googlecode.com/files/cilimoes-home.png);
}
ul#navigation .about a {
background-image: url(http://cilimoes-file.googlecode.com/files/cilimoes-about.png);
}
ul#navigation .search a {
background-image: url(http://bambanggallery.at.ua/slide-out-men/icon/search.png);
}
ul#navigation .podcasts a {
background-image: url(http://bambanggallery.at.ua/slide-out-men/icon/iphone.png);
}
ul#navigation .rssfeed a {
background-image: url(http://cilimoes-file.googlecode.com/files/feed.gif);
}
ul#navigation .photos a {
background-image: url(http://cilimoes-file.googlecode.com/files/Photo.gif);
}
ul#navigation .contact a {
background-image: url(http://cilimoes-file.googlecode.com/files/kontak-me.gif);
}
position: absolute;
float:left;
margin: 0px;
padding: 0px;
top: 0px;
right: 220px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#E7F2F9;
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#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .home a{
background-image: url(http://cilimoes-file.googlecode.com/files/cilimoes-home.png);
}
ul#navigation .about a {
background-image: url(http://cilimoes-file.googlecode.com/files/cilimoes-about.png);
}
ul#navigation .search a {
background-image: url(http://bambanggallery.at.ua/slide-out-men/icon/search.png);
}
ul#navigation .podcasts a {
background-image: url(http://bambanggallery.at.ua/slide-out-men/icon/iphone.png);
}
ul#navigation .rssfeed a {
background-image: url(http://cilimoes-file.googlecode.com/files/feed.gif);
}
ul#navigation .photos a {
background-image: url(http://cilimoes-file.googlecode.com/files/Photo.gif);
}
ul#navigation .contact a {
background-image: url(http://cilimoes-file.googlecode.com/files/kontak-me.gif);
}
Ganti image url yang berwarna merah dengan image url yang anda inginkan.
6.Copy code dibawah ini dan pastekan diatas code </head> atau di bawah code ]]></b:skin>
<script type="text/javascript" src="http://cilimoes-script-file.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
7.Dan Untuk kode html letakan kode di bawah ini diantara kode <head> dan code </head>
<ul id="navigation">
<li class="home"><a href="http://bambangpage.blogspot.com/2009/12/cara-membuat-dock-menu-menu-ala-mac.html"><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 tulisan yang berwarna hijau dengan alamat html yang anda inginkan sekian dan selamat mencoba
| 
0 komentar:
Posting Komentar