Cara Membuat Kotak Spoiler di Blog Versi 2

Yo~ Konnichiwa sobat Otatechnime

Kali ini, mimin mau ngasih tips blogging Cara Membuat Kotak Spoiler di Blog versi 2.
Sebelumnya mimin pernah nge post untuk versi pertamanya dan bisa kalian baca di
Cara Membuat Kotak Spoiler di Blog Versi 1. Nah, apakah perbedaan kotak spoiler yang ini dengan yang sebelumnya? Jadi jika pada kotak spoiler 1, mimin sudah jelaskan bentuknya yaitu dengan tombol spoiler dan kotak tertutup yang belum terbuka. Untuk kotak spoiler yang ini, tetap menggunakan tombol untuk pemicunyatetapi lebih simple dengan tidak adanya gambar kotak tertutup pada halaman. Sehingga lebih ekonomis dan simple. 

Okee langsung saja mimin kasih ya

<div id="spoiler" style="display:none"> <span style="color: #ff0000;">Isi Dari Konten</span> </div> <button title="Klik untuk melihat isi" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Spoiler</button>

Yang Males nge-blok silahkan langsung di copy (klik Copy Here)

<div id="spoiler" style="display:none"> <span style="color: #ff0000;">isi dari Konten</span> </div> <button title="Klik untuk melihat isi" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Spoiler</button>

Keterangan:

1. Pada teks Isi dari Konten dapat kalian ganti dengan konten yang kalian masukkan seperti gambar, paragraf,  atau teks.

2. Teks Klik untuk melihat isi merupakan teks yang akan muncul ketika kursor kita diarahkan ke tombol spoiler
3. Untuk teks Spoiler bisa kalian ganti bebas. Teks ini muncul pada button spoiler.

Caranya memasukkan kodenya sama seperti versi 1 nya.

Hasilnya akan seperti dibawah ini.

isi dari Konten

Sampai ketemu di post selanjutnya
Saynoara~

Share this

Unknown