Cara memasang menu spoilers/open-close

Share

Salam ne sobat.. udah lama juga ane g' posting.. apalagi tentang tips blogger.
 maaf y sobat2 smw. minggu lalu saya telah 
mempost tentang Cara buat text di navbar berjalan 


dan sekarang saya ingin mempost dulu tentang 
cara memasang menu spoilers/bukatutup. hehe

saya akan menjelaskan dulu secara singkat apa itu spoilers.


Spoiler adalah sebuah kolom yang bisa dibukadan ditutup serta ada border atau garis yang membentuk kolom. Fungsinya adalah sama seperti fungsi scroll yang bertujuan untuk menghemat 
ruang halaman saat mempostinggambar atau  


tulisan  yang banyak sehingga terlihat tertata dan rapi.


Caranya :

Login terlebih dahulu ke Blogger ID Anda.

Masuk ke Tata Letak/Rancangan.

Lalu klik tambah Gadget

     Dan ini Contoh Scriptnya :

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b>: <input value="Open" style="margin: 0px;padding: 0px; width: 55px; font-size: 11px;" 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">


Isikan kode, script, HTML atau teks Anda disini !!<br>
</div>
</div>
</div>

Dan hasilnya akan seperti ini.

Spoiler:

Percobaan iiiiiiiiiiiiissssssssssssssiiiiiiiiiiiiii tes 1 2 3

NB  :
1. Tulisan Open dan Close bisa Anda ganti yang di suka
2. Width : 55px = lebar spoiler
3. Font-size: 11px = besar tulisan pada kotak spoilers
4. Tulisan Spoiler adalah judul,bisa ganti sesuai keinginan Anda
5. Tulisan yang berwarna biru bisa juga Anda ganti sesuai dengan tulisan yang ingin Anda tuliskan pada kolom bagian dalam spoiler.


Baca juga : Cara membuat 3 kolom di bawah header blog

                       Cara membuat Link warna-warni di blog

…Semoga Bermanfaat… !.Semoga Sukses.! .send komentar ya.

Artikel terkait: