Untuk demo klik disini
Bingung ni masu ngasih judulnya apaan!!! kita langsung ajah lah ya..
- Seperti biasa backup dulu template anda.
 - Cari kode ]]></b:skin> lalu masukan kode dibawah ini tepat diatasnya.
 - Setelah itu cari kode </head> lalu masukan kode dibawah ini diatasnya.
 - Lalu cari lagi kode <body>, setelah itu tambahkan kode berikut ini dibawahnya .
 - Save Template anda, dan lihat hasilnya.
 
#sliderWrap {
margin: 0 auto;
width: 300px;
}
#slider {
position: absolute;
background-image:url(http://s2.sigmirror.com/files/58956_xcuvk/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;
}
<script type="text/javascript" src="http://s2.sigmirror.com/files/58960_sspjf/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $(".topMenuAction").click( function() {
       if ($("#openCloseIdentifier").is(":hidden")) {
           $("#slider").animate({
               marginTop: "-141px"
               }, 500 );
           $("#topMenuImage").html('<img src="http://s2.sigmirror.com/files/58955_t6ugo/open.png"/>');
           $("#openCloseIdentifier").show();
       } else {
           $("#slider").animate({
               marginTop: "0px"
               }, 500 );
           $("#topMenuImage").html('<img src="http://s2.sigmirror.com/files/58954_fdrhd/close.png"/>');
           $("#openCloseIdentifier").hide();
       }
   });
});
</script>
<div id="sliderWrap">
   <div id="openCloseIdentifier"></div>
   <div id="slider">
       <div id="sliderContent">
           Isn't this nice?
       </div>
       <div id="openCloseWrap">
           <a href="#" class="topMenuAction" id="topMenuImage">
               <img src="http://s2.sigmirror.com/files/58955_t6ugo/open.png" alt="open" />
           </a>
       </div>
   </div>
</div>
0 komentar:
Post a Comment
saran, komentar dan kritikan anda sangat berharga buat saya, terima kasih.