Klik Disini
Tutorial kali ini saya akan jelaskan cara membuat tombol spoiler atau tombol sembunyi pada postingan blog. Tombol spoiler atau tombol sembunyi pada blog mudah saja kita buat, hanya perlu menambahkan perintah tertentu agar menyembunyikan kontennya lalu menampilkannya jika tombol tersebut diklik. Silahkan lihat cintoh di atas.
Nah itu contohnya, kalau sobat pengen spoiler seperti itu, berikut adalah langkah-langkahnya..
- Login ke dashboar blog sobat >> Buat postingan, dan pilih pada mode Edit HTML.
- Copy code berikut, paste dipostingan sobat.
<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Klik Disini</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Ganti Dengan Spoiler sobat disini, boleh gambar, code dll
</div></div></div></div>
- Ganti tulisan yang berwarna Hijau dengan Kata-kata sesuka anda. Tapi jangan di hapus ya, nanti ngk bisa fungsi spoilernya.
- Ganti tulisan yang berwarna Biru dengan kode URL gambar anda
Nah kalau sudah selesai silahkan anda publikasikan dan lihat hasilnya.
Selamat mencoba...
0 komentar: