19 Sep 2013

Cara Mudah Membuat Spoiler Kaskus dengan jQuery

Penggunaan spoiler pada thread di forum sangatlah lumrah. Biasanya kamu jumpai di Kaskus atau forum lainnya. Kali ini saya membuat tiruan spoiler yang ada di Kaskus dengan sedikit gaya Iskael. Ternyata membuat spoiler seperti yang ada di Kaskus tidaklah sulit. Cukup dengan sedikit pengetahuan tentang cara menggunakan jQuery, kamu juga bisa membuat spoiler dengan gaya kamu sendiri. Penasaran bukan dengan spoiler ala Kaskus bikinanku? Berikut ulasannya.


Spoiler ala Kaskus dengan jQuery

Seperti biasanya, coding saya lakukan di CodePen agar kamu mudah mengunduh maupun memanipulasinya. Kamu bisa melihat spoiler ala Kaskus bikinan saya di bawah ini. Klik "show" untuk mengeluarkan isi dari spoiler. Klik "hide" untuk menyembunyikannya kembali.

See the Pen mvtwG by Iskandar Dzulkarnain (@iskael) on CodePen

Mudah bukan? Kamu juga bisa membuatnya. Jangan lupa untuk menautkan pustaka jQuery untuk menjalankan kode jQuery yang dibutuhkan untuk membuat spoiler ini. Jika kamu masih bingung bagaimana cara menautkannya, kamu bisa membaca entri Iskael sebelumnya yang membahas mengenai masalah ini.

16 komentar:

  1. wah boleh di coba ini.. biar ga kepanjangan kalau bikin post.

    BalasHapus
  2. kok aku bingung yah, aku kira cuma pasang kode html doang di bagian kotak editor blog

    *kode spoiler blog yg ada kebanyakan sangat panjang

    BalasHapus
    Balasan
    1. masa sih panjang yo? :O
      oke, besok aku akan buat spoiler yang langsung bisa diterapin di entri blogspot atau wp aja yah :)
      sepertinya itu akan sangat membantu banyak orang :)

      Hapus
  3. ana belom nyobain kode di atas (lagi males), tapi dari apa yang bisa ana lihat, kode diatas akan membuka semua spoiler yang ada di halaman tersebut hanya dengan satu tombol.

    jadi...

    BalasHapus
    Balasan
    1. ya iya lah :D
      beda dengan spoiler Konami yang kamu bikin :D

      Hapus
    2. =.=a

      bukan itu maksudku... coba kamu pakai selector 'children' dan 'toggleclass' pada script spoiler tersebut... supaya seandainya ada lebih dari 1 spoiler dalam satu halaman, satu tombol spoiler hanya akan membuka spoiler yang ada di bawahnya (sedangkan spoiler lainnya tidak terbuka).

      Hapus
    3. ouwh iya :D
      ya nanti aku pikirkan lagi :P

      Hapus
    4. saya juga bikin spoiler. tapi pakai fieldset.. tag yang jarang sekali saya pakai.
      http://blog*linarian*com/2013/09/institut-lele-tempat-makan-enak-di-keputih-surabaya.html
      kalau dibuka satu., yang lain tidak ikut terbuka :)

      Hapus
  4. sibb gan langsung saya praktekkan di web saya :D

    BalasHapus
    Balasan
    1. silakan gan
      tapi cara saya ada cacatnya kalo spoilernya lebih dari satu
      kalo lebih dari satu gunakan .addClass dan .removeClass

      Hapus
  5. koq aq gagal yach? aq udah copy semua tp koq ga ada hasilnya?

    BalasHapus
  6. cara asang di blogspot gimana ya?
    kok ane gagal

    naruh kode ini dimana
    $("#hide").click(function(){
    $("#area").hide("slow");
    });
    $("#show").click(function(){
    $("#area").show("slow");
    });
    $("#toggle").click(function(){
    $("#area").toggle("slow");
    });

    BalasHapus
    Balasan
    1. apakah jquery nya sudah dipasang?

      taruh kode tersebut di atas < /head >
      dengan diapit oleh < script > dan < /script >

      Hapus

Populer Terbaru Komentar

Entri Terbaru

Komentar Terbaru

Creative Commons License
All contents by Iskael is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Based on a work at Iskael.
Permissions beyond the scope of this license may be available at Iskael.
© 2013 Belajar Ngeblog bersama Iskael. All Right Reserved. Powered by Blogger. Iskael Template by Iskael. Submitted on TopBlogIndonesia