maaf,, ane ga pandai improvisasi langsung saja (wkwkwkwkwk)
masuk blogger - rancangan - Edit HTML
kalau ente tertarik ini ane share dikit gimana cara bkinnya :
step 1 : copy kode berikut di bawah <head>
<script type="text/javascript" src="http://longfield22.googlecode.com/files/jquery-1.2.6.min.js"></script>
step 2 : ika anda mw anda rombak sedikit kode body { anda atau anda bisa taruh di atas ]]></b:skin>
#navbar-iframe {
visibility: hidden;
display: none;
}
body {
margin: 0;
font-size:16px;
color: #000000;
font-family:Arial, Helvetica, sans-serif;
}
#sliderWrap {
margin: 0 auto;
width: 300px;
}
#slider {
position: absolute;
background-image:url(http://www.webresourcesdepot.com/wp-content/uploads/file/jquery-sliding-menu/slider.png);
background-repeat:no-repeat;
background-position: bottom;
width: 300px;
height: 159px;
margin-top: -141px;
}
#slider img {
border: 0;
}
#sliderContent {
margin: 50px 0 0 50px;
position: absolute;
text-align:center;
background-color:#FFFFCC;
color:#333333;
font-weight:bold;
padding: 10px;
}
#header {
margin: 0 auto;
width: 600px;
background-color: #F0F0F0;
height: 200px;
padding: 10px;
}
#openCloseWrap {
position:absolute;
margin: 143px 0 0 120px;
font-size:12px;
font-weight:bold;
}
yang saya kasi warna ijo jika kawan sudah ada maka tak perlu di kasi cukup dari body { ke bawah aja soalnya klo ada navbar tak bisalah liat open/closenya...
step 3 : copy kode berikut di atas </head>
<script type="text/javascript">
$(document).ready(function() {
$(".topMenuAction").click( function() {
if ($("#openCloseIdentifier").is(":hidden")) {
$("#slider").animate({
marginTop: "-141px"
}, 500 );
$("#topMenuImage").html('<img src="http://www.webresourcesdepot.com/wp-content/uploads/file/jquery-sliding-menu/open.png"/>');
$("#openCloseIdentifier").show();
} else {
$("#slider").animate({
marginTop: "0px"
}, 500 );
$("#topMenuImage").html('<img src="http://www.webresourcesdepot.com/wp-content/uploads/file/jquery-sliding-menu/close.png"/>');
$("#openCloseIdentifier").hide();
}
});
});
</script>
step 4 : copy kode di bawah ini di bawah <body>
<div id="sliderWrap">
<div id="openCloseIdentifier"></div>
<div id="slider">
<div id="sliderContent">
CILUUUK BAA?
</div>
<div id="openCloseWrap">
<a href="#" class="topMenuAction" id="topMenuImage">
<img src="http://www.webresourcesdepot.com/wp-content/uploads/file/jquery-sliding-menu/open.png" alt="open" />
</a>
</div>
</div>
</div>
save template anda dan jika ada div yang kurang tolong di tutup,,,
Selamat mencoba!!!
0 komentar:
Post a Comment