10 Efek Toogle jQuery Terbaik Untuk Blog

10 Efek toogle jQuery Terbaik - Toogle di sini adalah sebuah tombol yang memungkinkan Anda untuk menyembunyikan dan menampilkan elemen lain dengan sebuah efek khusus yang halus yang sudah tentu akan memperindah tampilan blog anda, biasanya digunakan untuk sebuah widget atau gadget.

Sebagai contoh, penggunaan toogle pada widget di sidebar. Hal ini sangat berguna untuk menghemat ruang pada sidebar agar terlihat rapi dan terstruktur. Jadi tidak mengganggu pandangan pengunjung saat membaca sebuah posting atau artikel blog Anda. Oleh karena itu, saya akan berbagi 10 efek toogle jQuery Terbaik yang saya dapatkan dari kompiajaib.com yang dapat Anda gunakan, diantaranya

1. Blind Effect       DEMO

2. Bounce Effect    DEMO

3. Clip Effect         DEMO

4. Drop Effect       DEMO

5. Explode Effect   DEMO

6. Fold Effect        DEMO

7. Pulsate Effect    DEMO

8. Scale Effect       DEMO

9. Shake Effect      DEMO

10. Slide Effect      DEMO  

Jika anda tertarik menggunakan efek toogle tersebut, berikut ini cara memasang tombol toogle nya.

Sebelumnya, persyaratan pertama yang harus ada dalam blog tentu skrip jquery. Silakan masukkan script ini dalam template Anda, tepatnya di sebelum atau di atas kode </ body>. Jika template Anda Anda sudah memiliki skrip jquery ini (versi berapapun), silahkan abaikan langkah ini.

<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>

<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Kemudian, tempatkan script berikut tepat di bawah script jquery atas. Sebagai contoh, Disini saya memanggil elemen # sidebar-wrapper yang saya ingin sembunyikan dan tampilkan dengan toogle.

<script type='text/javascript'>

  $(function() { 

    $("#run").click(function () {

    $("#sidebar-wrapper").toggle("blind")

});

 });

</script>

Catatan: *

• Kode yang diblok merah dapat diubah sesuai dengan elemen css / gadget / widget yang ingin anda beri toogle 
• Kode yang diblok biru dapat diubah sesuai dengan efek toogle pilihan Anda. Misalnya, "slide" untuk Efek Slide, atau "clip" untuk Efek Klip.

Kemudian, panggil toogle dengan kode html di bawah ini. Letakkan tombol toogle pada posisi yang Anda inginkan. 

<a href="#" id="run">Click Me</a> 

Selesai. silahkan cek blog anda. Bila ukuran widgetnya tidak sesuai pada sidebar atau footer anda, maka sesuaikan kode css nya.

Demikian artikel  10 Efek Toogle jQuery Terbaik Untuk Blog ini, semoga bermanfaat. Bila masih bingung, kirim pertanyaan melalui kolom komentar ya.

sumber: http://www.kompiajaib.com

 

Artikel Terkait

10 Efek Toogle jQuery Terbaik Untuk Blog

4/ 5

Oleh Unknown

Unknown 01:59 Komentar