Cara membuat tombol spoiler atau show/hide di blog

Oleh Unknown

Jumat, 20 Juni 2014

Bagikan :

Tweet

Sahabat Blogger, kali ini Kang PP akan share tentang Cara membuat tombol spoiler atau show/hide di blog. Apa itu spoiler ? Bisa di artikan sebagai tombol Show/hide atau Buka/tutup atau muncul atau sembunyi. Fungsi dari spoiler ini bisa untuk menghemat tempat, baik di widget ataupun di postingan.

Demo ::

Baca ini harus berkomentar !!!

Gimana ? Berikut langkah-langkah membuatnya :
1.   Pada menu TAB HTML, masukan kode berikut:

<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;">

Masukan yang dijadikan spoiler, baik gambar/artikel/lainya

</div></div></div> 

2.    Selesai

Keterangan :
Di bagian Masukan yang dijadikan spoiler, baik gambar/artikel/lainya  , silahkan masukan apapun kedalamnya.

Jangan lupa untuk komen to the tar, komentar. ^_^

Tag : Tutorial Blog