Membuat kotak open dan close di blogger







Cara membuat tombol spoiler open close di blog






cara membuat kotak open dan close di blogger 
cara membuat kotak open dan close di blog :
<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: 70px; font-size: 15px;" 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;">
Text, URL Gambar, Video atau Widget anda Disni <br>
</div>
</div>
</div>
 Untuk melihat script kode HTML silahkan klik buka 


Silahkan copy kodenya di bawah ini:

 <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: 70px; font-size: 15px;" 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;">

Text, URL Gambar, Video atau Widget anda Disni <br>

</div>

</div>

</div>







atau copy pada kotak di bawah ini sama saja ,hanya berbeda penyajian.untuk kotak paling atas kodenya tidak bisa di copy ,karna blog ini hanya tulisan tertentu yang bisa di copy.




 
cara membuat spoiler open dan close :

 <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: 70px; font-size: 15px;" 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;">

Text, URL Gambar, Video atau Widget anda Disni <br>

</div>

</div>

</div>












Menulis kodenya di mode tulis HTML ya sahabat pembaca cerita. 


Untuk menaruh script HTML di dalam kotak
Seperti postingan ini tidak akan bisa alias tidak akan muncul.
Hanya bisa menampilkan tulisan biasa yang bukan kode HTML .

Jika ingin menaruh script HTML caranya yaitu:
Saat kodenya selesai di tulis di mode HTML, dan ingin memasukkan kode HTML seperti postingan kotak di atas maka harus ke mode tulisan biasa lalu tulis  kode HTML  apa saja yang sahabat pembaca inginkan,

setelah itu kembali ke mode tulis HTML lalu cari kode      <div style="display: none;">   

   kode tersebut berada di atas tulisan yang akan tampil di dalam kotak, namun akan berada di bawah jika sahabat pembaca menulis di dalam kotak di mode tulis biasa.


Hapus kode tersebut lalu tulis kode tersebut   di atas tulisan yang akan di tampilkan di dalam kotak.


Berikut penjelasan lainnya⬇

Jika ingin memasukkan kode HTML di dalam kotak spouler.
Namun jika hanya memasukkan tulisan biasa tidak perlu cara ini.


Login di blog➡buat postingan baru ➡masuk mode tulis HTML➡tulis kode spoiler kotak open close➡kemode tulisan biasa➡tulis kode HTML yang di inginkan di dalam kotak➡lalu kembali ke mode HTML➡cari kode <div style="display: none;">  hapus lalu tulis kembali di atas tulisan kode yang ingin di tampilkan didalam kotak➡periksa tampilan dengan melihat tampilan blog .
Selesai
 

Untuk  menulis banyak caranya sesuai pengetahuan sang penulisnya saja.


Itulah cara membuat kotak spoiler open dan close di blogger silahkan di copy kodenya lalu buat di postingan artikel,apa bila ada yang kurang di mengerti silahkan di tanyakan di kolom komentar.

Blog ini berjudul cerita namun  isinya tentang script HTML, anggap saja postingan HTML ini adalah cerita saya melalui tulisan ini. Di lain waktu saya akan menuliskan cerita kehidupan manusia .
DONASI VIA PAYPAL Bantu berikan donasi jika dirasa blog ini bermanfaat. Donasi akan digunakan untuk membeli domain www.ceritakuuntukdibaca.com. Terima kasih :)
CERITAKU UNTUK DIBACA
Kategori: Scritp HTML untuk membuat tampilan blog lebih menarik,

Terima kasih telah membaca Membuat kotak open dan close di blogger. Silahkan berlangganan artikel ini atau silahkan share .....!

Komentar

Postingan Populer

Lelaki ini jadi pendiam alasannya karna ini

Ilmu bela diri tingkat tinggi

Cara agar banyak yang membaca tulisan kita diblogger