Tuesday, February 23, 2010

JQuery: Slide Elements in Different Directions

Untuk melihat demonya silakan klik disini
Kali ini saya ingin memberikan beberapa trik sliding yang tentu saja menggunakan JQuery juga, langsung ajah ya.. : Klik Kanan lalu "Save As", setelah itu upload ketempat hosting anda.
  1. Cari kode berikut ini ]]></b:skin> lalu masukan kode berikut ini diatasnya.
  2. .slide { position: relative; overflow: hidden; height: 120px; width: 350px; margin: 1em 0; background-color: #ffc; border: 1px solid #999; } .slide .inner { position: absolute; left: 0; bottom: 0; width: 338px; height: 36px; padding: 6px; background-color: #4c5; color: #333; } .slide button { margin: .7em 0 0 .7em; } .js #slidebottom .inner { display: none; }
  3. Setelah itu cari kode </head> dan masukan kode berikut ini diatasnya.
  4. <script src='masukan alamat jquery.js' type='text/javascript'/> <script src='masukan alamat sliding.js' type='text/javascript'/>
  5. Save Template anda.
Setelah itu anda tinggal Tambah Laman lalu HTML/Javascript, dan masukan kode dibawah ini.
<div id="slidemarginleft" class="slide"> <button>slide it</button> <div class="inner">Slide from bottom</div> </div>
Tulisan yang berwarna merah bisa anda ganti sesuai kebutuhan anda. (sesuaikan dengan demo) sedangkan untuk tulisan yang berwarna hijau bisa disesuaikan dengan keinginan anda. nah semoga bermanfaat ya.. selamat mencoba..

0 komentar:

Post a Comment

saran, komentar dan kritikan anda sangat berharga buat saya, terima kasih.