Simple Tombol Spoiler di Blog

Posted by at
Selain Tombol Download & Demo, Tombol Spoiler juga bisa kadang diperlukan.
Fungsinya adalah utk menyembunyikan Tulisan , dan menampilkan Tulisan tsb saat mau dilihat.

Tombol Spoiler yg akan saya share ini bisa kamu terapkan di Blog, juga penerapan nya mudah.

1. CSS

Copy kode CSS di bawah ini, lalu Pastekan tepat di atas ]]><b:skin> atau </style>


/* Tombol Spoiler */
.tombolSpoiler{display:block;margin:10px 0;border:1px solid #3498db;padding:7px 10px;border-radius:3px;-moz-border-radius:3px}
.tombolSpoiler .tombol{background:#008c5f;color:#fff;display:inline-block;cursor:pointer;font:normal 600 14px Tahoma,sans-serif;padding:0;border:none;outline:none;line-height:20px;border-radius:3px;-moz-border-radius:3px}
.tombolSpoiler .tombol:focus{pointer-events:none}
.tombolSpoiler .tombol:before{content:'Lihat Spoiler';display:inline-block;padding:7px 10px;border-radius:3px;-moz-border-radius:3px}
.tombolSpoiler .tombol:focus::before{content:'Tutup Spoiler';background:#c00}
.tombolSpoiler .isi{background:#e4e4e4;pointer-events:auto;visibility:hidden;opacity:0;height:0;transition:all .5s ease}
.tombolSpoiler .tombol:focus + .isi{visibility:visible;opacity:1;height:auto;margin:10px 0 5px;padding:10px 15px;transition:all .5s ease}

2. HTML

Utk menggunakan Tombol Spoiler ini saat membuat postingan, Copy kode di bawah ini lalu Paste di bagian HTML (Bukan Compose).

<div class="tombolSpoiler">
    <div class="tombol" tabindex="0"></div>
    <div class="isi">
        <!-- Isi Spoiler -->
        1. Blablabla<br />
        2. Blablabla<br />
        3. Blablabla
    </div>
</div>

Gimana mudah kan?
Yauda langsung aja dicoba..


Labels: