Thursday, September 14, 2017

Tutorial Membuat Tombol Tutup Buka atau Spoiler di Blog

Salam blogger, by alfakir Hendi Cahyadi

1. Tutorial membuat spoiler terlempar ke bawah
Contoh :

---------- scriptnya di bawah :
<div id="spoiler" style="display: none;">
Letak Konten Isi Spoiler (Text/Gambar/dll)</div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" style="background: red; border: 1px solid blue; color: white; padding: 5px 50px 5px 50px;" title="Klik untuk membuka spoiler" type="button">BUKA/TUTUP SPOILER</button>
-----------------------------------

2. Tutorial membuat spoiler dengan tombol tetap
Contoh :
Judul Spoiler:
Letakkan teks atau kode script (gambar atau video) di sini
--------- scriptnya di bawah :
<div style="margin: 5px 10px 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Judul Spoiler</b>: <input 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="background: red; border: 1px solid blue; color: white; font-size: 12px; padding: 5px 50px 5px 50px;" type="button" value="Buka" /></div>
<div class="alt2" style="background: cyan; border-left-color: lightblue; border-left-style: solid; border-left-width: 10px; color: blue; padding: 5px 2px;">
<div style="display: none;">
Letakkan teks atau kode script (gambar atau video) di sini
</div>
</div>
</div>
------------------------- 

atau bisa menggunakan versi classicnya :
Contoh :
Judul Spoiler:
Isi Spoiler teks atau kode script (gambar atau video) di sini
------- scriptnya di bawah :
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Isi Spoiler teks atau kode script (gambar atau video) di sini
 <br>
</div>
</div>
</div> 
----------------------------- 

3.  

Previous Post
Next Post

0 komentar: