Spoiler pada Blogspot dengan Mengedit Template

Mau bikin spoiler gaya kaskus gitu? Ga susah2 amat koq, ini sy ada simple javascriptnya dapet dari bule cerdas, tapi masih berantakan, jd sy tambahin sedikit CSS biar rapi. Cuma butuh konsentrasi aja koq biar bisa ngikutin. Bagi yg mao copas ke blognya buat catetan silahkan aja.
Zelamat nyobain ya...


Tahap 1: Menambahkan coding pada template  

Perhatikan kode berikut ini untuk diletakkan di template blogger:

<script type="text/javascript">
function showSpoiler(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }
</script>

Pada layar Edit Template di Blogspot, gunakan Ctrl-F cari tag </head> dan letakkan kode Javascript tadi di atas tag </head>

Selanjutnya perhatikan kode CSS berikut:

.spoiler {
  width: 100%;
  background: beige;
  border: 1px solid #aaa;
  padding: 15px;
  border-radius: 4px;
}

kode CSS tadi ditelakkan di atas bagian  ]]></b:skin> pada layar Edit Template.


Tahap 2: Menambahkan coding pada postingan

masukkan kode berikut pada postingan Anda:

<div class="spoiler">
    Judul Spoiler:<input type="button" onclick="showSpoiler(this);" value="Tampilkan/Zembunyikan" />
    <div class="inner" style="display:none;">
    Isi Spoiler di sini!
    </div>
</div>

Abis itu jangan lupa ganti bagian "Isi Spoiler di sini!"  dengan conten yg mau dijadiin spoiler ya.
Berikut contoh hasilnya

Lexus Tercanggih 2014:

DISCOVER THE NEW CT 200h