21 Jun 2012

Slide Panel Mudah

Tiada ulasan:
 
Snapshot


1. Log in ke dashboard--> layout- -> Edit HTML

2. Klik pada "Expand Widget Templates"

3. Tekan "Ctrl+F" dan cari kod </head>

4. Sebelum </head> paste kod ni:
<script type="text/javascript" src="http://descarca.googlecode.com/files/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); </script>
Kalau dah ada kod Jquery,buang baris hijau

5.Cari kod ]]></b:skin> dan sebelum ko itu,paste kod dibawah ini
#panel { background: #fff; width: auto; height: 200px; font: 90%/120% Arial, Helvetica, sans-serif; color: #000; padding: 10px; text-align: justify; display: none; } .slide { margin: 0; padding: 0; border-top: solid 4px #000; background: url('http://img406.imageshack.us/img406/6227/btnslide.gif') no-repeat center top; } .btn-slide { background: url('http://img535.imageshack.us/img535/2351/whitearrow.gif') no-repeat right -50px; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; } .active { background-position: right 12px; }
Korang boleh ubah tinggi,lebar ikut kesesuaian korang

6.Sekarang pergi ke Layout-->Page Element dan klik pada "Add a gadget". Pilih "html/java script"dan letak kod dibawah
<div id="panel"> <!-- masukkan kandungan disini --> </div> <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>

Tiada ulasan:

Catat Ulasan

TERIMA KASIH UNTUK KOMENKOMEN TERBARU

 
© 1986. Aideal Fitri - fitri1986 Malaysian Blogger