test
one
two
three
four
five

six



How cool is that? ;)

Dalam pembuatan spoiler di atas saya menggunakan bantuan library jQuery untuk mempermudahkan ngoding di javascript, sebenarnya tidak perlu menggunakan jQuery pun bisa, tetapi menggunakan jQuery mempermudah segalanya.

Syntax Spoiler

Pada saat saya menggunakan spoiler, yang saya tulis adalah seperti berikut (contoh hasilnya ada di atas)

<spoiler data-title="test spoiler">test
<spoiler>one</spoiler>
<spoiler>two</spoiler>
<spoiler>three
<spoiler>four
<spoiler>five</spoiler>
</spoiler>
<spoiler>six</spoiler>
</spoiler>
</spoiler>

Dan jika anda bernanya, lho di html kan tidak ada tag spoiler, jawabannya, iya, benar anda dapat seratus :D, karena itu aku buat sendiri :p.
Sebenarnya anda bisa memakai tag seperti div, atau blockquote untuk membuatnya, tetapi kalian harus memberinya class tertentu supaya bisa dibedakan dengan div atau blockquote yang lain.
Karena itu merepotkan, aku tidak memakainya :p.
Dan attribute data-title itu digunakan untuk memudahkan memberi judul pada spoilernya, dan tentunya opsional.
Dan nantinya aku akan memberi tahu bagaimana cara membuatnya persis seperti yang aku punya.

Import jQuery

Hal pertama yang harus dilakukan adalah mengimport library jQuery, ada beberapa cara untuk melakukan ini, tapi yang saya suka dan paling simpel adalah menggunakan ini

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Letakkan kode tag html di atas di head sebuah html.
Dengan kode di atas, dia akan meload library jQuery yang terdapat di servernya googleapis, jadi kalau laptop anda tidak online, maka jQuerynya tidak ke load, sehingga spoilernya tidak bisa berjalan sebagaimana mestinya.
Ada cara lain sehingga dapat bekerja secara online, yaitu meletakkan kode library jQuery langsung di html kita, tapi itu lebih ribet. *ya gak ribet - ribet amat seh...
Kita langsung lompat ke langkah selanjutnya...

Script Spoiler

Dan ini adalah bagian keajaibannya...

<script type='text/javascript'>
//<![CDATA[
var spOpen = "open";
var spClose = "close";

$(function()
{
  function crSpBut(j, o)
  {
    return ((j.data("title") === undefined)? "" : ""+j.data("title") + " ") + "" + (o? spOpen : spClose) + "";
  }
  $("spoiler").css("display", "block").hide().before("").prev().addClass("sp-but").css("display", "block").each(function()
  {
    $(this).html(crSpBut($(this).next(), true)).toggle(function()
    {
      $(this).addClass("sp-but-open").html(crSpBut($(this).next(), false)).next().slideDown("fast");
    }, function()
    {
      $(this).removeClass("sp-but-open").html(crSpBut($(this).next(), true)).next().slideUp("fast");
    });
  });
});
//]]>
    </script>

Dan sekali dilihat what the hell is that...
Jika anda tidak berminat bagian penjelasan ini silahkan langsung copy paste kode di atas ke head html anda. Dan seharusnya kode spoiler bisa berjalan, dan ada bisa langsung melanjutkan ke section berikutnya.
Untuk yang ingin tahu ini penjelasannya lengkapnya :

var spOpen = "open";
var spClose = "close";

Kode di atas bisa diganti sesuka hati untuk mengubah tampilan nama saat tombol tersebut menunjukkan open atau close.

$(function()
{
  ...
});

Perlu diketahui, tanda '$'(dollar) itu adalah pengganti dari nama 'jQuery', jadi fungsi semua library jQuery bisa diakses dengan tanda '$'.
Dan kode di atas berfungsi untuk agak fungsi yang ada di dalam parameter tersebut dijalankan setelah Dom Ready *kalau gak salah, artinya semuanya sudah di load oleh browser, sehingga tidak ada gambar atau teks atau script yang ketinggalan / belum di load sebelum fungsi di dalamnya dijalankan.

function crSpBut(j, o)
  {
    return ((j.data("title") === undefined)? "" : ""+j.data("title") + " ") + "" + (o? spOpen : spClose) + "";
  }

Ini merupakan fungsi untuk memudahkan dalam koding.
Fungsinya adalah menentukkan isi dari button yang ada.
Parameter 'j' adalah untuk element spoiler mana yang ingin dimodifikasi, dan paramer 'o' adalah status tertutup atau terbukanya.

j.data("title") adalah fungsi untuk mengambil data dari attribute tag yang bernama 'data-title', dan kita cek apakah ada atau tidak, jika tidak ada maka string kosong dikembalikan, jika ada maka sebuah span yang stylenya float:left, yaitu dia bakal nempel ke kiri box yang berisi judul tersebut.

Kemudian ditambah dengan span lain yang float:right atau nempel ke kanan box berisi perintah open atau close.

$("spoiler").css("display", "block").hide().before("").prev().addClass("sp-but").css("display", "block").each(function()
  {
    ...
  });

Kemudian $(string) adalah untuk meng-query / atau mengumpulkan semua element yang cocok dengan query string tersebut.
Seperti yang dilihat kita mengumpulkan semua element yang mempunyai tag "spoiler".

.css("display", "block")
Itu artinya kita ingin memberikan style kepada spoiler kita, style displaynya kita ingin paksa menjadi block.
Kenapa kita lakukan ini? Karena tag yang aneh seperti spoiler biasanya display blocknya adalah "inline" atau bersebelahan, kita inginnya dia langsung ada di bawah tombol. *ya kira - kira seperti itu.
Kenapa kita taro di kode bukan di css stylenya? Karena aku ingin :p.

.hide()
Ini digunakan untuk menyembunyikan isi dari spoiler itu di awal.

.before("<button />")
Ini digunakan untuk menambah element tombol di atas element spoiler kita.

.prev()
Ini digunakan untuk mengubah cakupan kita ke element sebelumnya, yaitu sebelum element spoiler, yaitu tombol yang baru kita masukan.

.addClass("sp-but")
Ini digunakan untuk memberikan class kepada tombol kita, yaitu "sp-but", ini terserah seh, hanya digunakan untuk bisa membedakan dan bisa di style di css.

.css("display", "block")
Ini digunakan sama seperti sebelumnya, saya ingin tombol ini menjadi block / mengambil semua width yang ada.

.each(function()
{
...
});
Ini digunakan untuk menjalankan fungsi kepada setiap button yang ada. (mirip for gitu).

Jika anda bertanya - tanya kodenya aneh karena sambung menyambung begitu, saya ucapkan selamat datang di jQuery, yang bisa membuat kode hanya satu baris.

$(this).html(crSpBut($(this).next(), true)).toggle(function()
{
  ...
}, function()
{
  ...
});

Kode ini untuk memanipulasi setiap button yang ada...

$(this)
Ini untuk mengacu ke button itu sendiri.

.html(...)
Ini untuk mengeset isi dari tag tersebut / atau isi text dari button itu.

crSpBut($(this).next(), true)
Jika anda ingat crSpBut adalah fungsi untuk menentukan apa isi dari button tersebut, berdasarkan element spoilernya, sehingga kita masukkan parameter pertama itu element spoiler tersebut (artinya element sesudah element button ini), dengan tulisan open (true).

.toggle(function()
{
...
}, function()
{
...
});
Ini berfungsi untuk mendeteksi tekanan, jika tombol ditekan sekali, maka fungsi pertama berjalan. Jika ditekan lagi, fungsi kedua jalan, ditekan lagi fungsi pertama berjalan, ditekan lagi, fungsi kedua jalan, dan seterusnya.

$(this).addClass("sp-but-open").html(crSpBut($(this).next(), false)).next().slideDown("fast");

Ini adalah fungsi untuk membuka spoiler tersebut, yaitu dengan mengubah teks di tombol jadi close, dan memperlihatkan isi spoilernya.

$(this)
Untuk mengacu ke buttonnya.

.addClass("sp-but-open")
Kita ingin menambahkan class "sp-but-open" supaya bisa membedakan mana tombol yang sudah dibuka mana yang belum, sehingga kita bisa melakukan styling dengan mudah.

.html(crSpBut($(this).next(), false))
Sama seperti sebelumnya, hanya isinya kita ganti dengan kata close (false).

.next()
Kita akan mengubah acuan kita ke element spoiler kita.

.slideDown("fast")
Kita akan memunculkan kembali spoiler kita dengan animasi slide down dengan kecepatan "fast". (bisa ditentukan dalam milidetik juga)

$(this).removeClass("sp-but-open").html(crSpBut($(this).next(), true)).next().slideUp("fast");

Ini sebaliknya fungsi untuk menutup spoiler kita, yaitu dengan teks tombol jadi open, dan menyembunyikan spoiler kita.

$(this)
Untuk mengacu ke buttonnya.

.removeClass("sp-but-open")
Kita membuang class "sp-but-open" karena sekarang sudah menutup.

.html(crSpBut($(this).next(), true))
Sama seperti sebelumnya, hanya isinya kita ganti dengan kata open (true).

.next()
Kita akan mengubah acuan kita ke element spoiler kita.

.slideUp("fast")
Kebalikan dari sebelumnya, yaitu dengan menyembunyikan spoiler kita dengan animasi slide Up.

CSS

Setelah anda mencoba, pasti anda menyadari kalau itu spoiler plain sekali, hanya berupa tombol biasa.
Maka saya akan memberikan CSS yang seperti yang saya pakai

.sp-but
{
  width : 100%;
  margin : 0;
  padding : 5px;
  background-color : #222;

  border-style : solid;
  border-color : #444;
  border-width : 5px;

  color : #d70;
  font-size : 100%;
}

.sp-but:hover
{
  border-color : #555;
}

.sp-but-open
{
  background-color : inherit;
  border-bottom-width : 1px;
}

spoiler
{
  border-style : solid;
  border-color : #444;
  border-width : 0 5px 5px 5px;

  margin : 0;
  padding : 5px;
}

.sp-but
Untuk style tombol saat spoiler masih tertutup.

.sp-but:hover
Untuk style tombol saat dihover.

.sp-but-open
Untuk style tombol saat spoiler kelihatan.
Ini akan menimpa style dari .sp-but

spoiler
Style untuk box spoiler kita.

Taruh kode itu di file css dan di load ke html atau taruh kode itu diselimuti tag style di head html anda.

Blogger

Dan cara untuk menggunakannya di Blogger adalah begini
Pertama - tama, buka di Template terus klik di Edit HTML
Terus ada perintah bla bla bla, proceed aja.
(Untuk jaga - jaga back up template anda, kalau tiba - tiba error jadi bisa dibalikin).

Dan copas script import library dan script spoilernya di bawah tag "<head>"
kalau lupa apa yang musti di kopas silahkan liat berikut

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var spOpen = "open";
var spClose = "close";

$(function()
{
  function crSpBut(j, o)
  {
    return ((j.data("title") === undefined)? "" : ""+j.data("title") + " ") + "" + (o? spOpen : spClose) + "";
  }
  $("spoiler").css("display", "block").hide().before("").prev().addClass("sp-but").css("display", "block").each(function()
  {
    $(this).html(crSpBut($(this).next(), true)).toggle(function()
    {
      $(this).addClass("sp-but-open").html(crSpBut($(this).next(), false)).next().slideDown("fast");
    }, function()
    {
      $(this).removeClass("sp-but-open").html(crSpBut($(this).next(), true)).next().slideUp("fast");
    });
  });
});
//]]>
    </script>

Kemudian copas kode css sebelumnya diatas "]]></b:skin>"

.sp-but
{
  width : 100%;
  margin : 0;
  padding : 5px;
  background-color : #222;

  border-style : solid;
  border-color : #444;
  border-width : 5px;

  color : #d70;
  font-size : 100%;
}

.sp-but:hover
{
  border-color : #555;
}

.sp-but-open
{
  background-color : inherit;
  border-bottom-width : 1px;
}

spoiler
{
  border-style : solid;
  border-color : #444;
  border-width : 0 5px 5px 5px;

  margin : 0;
  padding : 5px;
}

Udah gitu harusnya beres, di save aja. Terus silahkan dicoba dengan membuat post.

Semoga postingan ini berguna... *panjang juga yah ==a...