Featured Post

Cara Mudah Membuat Spoiler Kaskus dengan jQuery

on
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.
Hai, saya hanya blogger yang nulis sejak 2008 lalu. Saat ini sedang asyik mengembangkan Game of Calculator

Mungkin Kamu Juga Suka...

Comments

  1. Fikri El FranaSeptember 19, 2013 at 5:00 PM

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

    ReplyDelete
  2. hpteknoSeptember 19, 2013 at 6:51 PM

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

    *kode spoiler blog yg ada kebanyakan sangat panjang

    ReplyDelete
    Replies
    1. IskaSeptember 19, 2013 at 7:39 PM

      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 :)

      Delete
  3. PencukurBumiSeptember 20, 2013 at 4:33 AM

    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...

    ReplyDelete
    Replies
    1. IskaSeptember 20, 2013 at 5:02 AM

      ya iya lah :D
      beda dengan spoiler Konami yang kamu bikin :D

      Delete
    2. PencukurBumiSeptember 20, 2013 at 6:15 AM

      =.=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).

      Delete
    3. IskaSeptember 20, 2013 at 6:17 AM

      ouwh iya :D
      ya nanti aku pikirkan lagi :P

      Delete
    4. Febrian Bahari AdiSeptember 20, 2013 at 7:35 AM

      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 :)

      Delete
    5. IskaSeptember 20, 2013 at 10:46 AM

      wow, keren :D

      Delete
  4. Toko Batik OnlineApril 12, 2014 at 11:46 AM

    sibb gan langsung saya praktekkan di web saya :D

    ReplyDelete
    Replies
    1. IskaApril 12, 2014 at 11:56 AM

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

      Delete
  5. Sandy RachmadNovember 17, 2014 at 7:38 PM

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

    ReplyDelete
  6. damblueAugust 10, 2015 at 10:18 PM

    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");
    });

    ReplyDelete
    Replies
    1. IskaAugust 11, 2015 at 5:53 AM

      apakah jquery nya sudah dipasang?

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

      Delete

Post a Comment

Subscribe to: Post Comments (Atom)
©2013-2024 Belajar Ngeblog bersama Iskael. All rights reserved.