Rabu, 05 Desember 2012

Trik Membuat Spoiler atau Buka Tutup Dengan Tampilan bagus




Membuat Spoiler atau Hide Show Keren
Setelah membahas bagaimana Trik Cara Menambahkan Sub Menu (Pull Down Menu) Pada Tab Menu Horizontal Standar Blogger

Pada postingan artikel sebelumnya, hari ini saya akan share sebuah Blogger Tutorial mengenai cara membuat sebuah spoiler atau tombol open close bagus di blog.

Mungkin juga anda tertarik dengan Artikel sebelumnya yang berhubungan dengan Widget ;


Spoiler atau tombol open close ini berfungsi untuk menyembunyikan sebuah text, gambar ataupun widget. Ketika kalian meng-klik tombol open maka text, gambar ataupun widget yang kalian sembunyikan akan terlihat begitu pula sebaliknya, jika kalian kembali meng-klik tombol close maka text, gambar ataupun widget yang kalian sembunyikan akan kembali tertutup. Kalian sudah mengerti kan? Kalau kalian ingin menggunakannya silahkan kalian pilih bentuk spoilernya dan copas kode di bawahnya ke tempat yang kalian inginkan


Spoiler 1
Text, URL Gambar atau Widget kalian Disni

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<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: none repeat scroll 0% 0% yellow; border: 1px dashed red; color: blue; font-size: 10px; margin: 0px; padding: 5px; width: auto;" type="button" value="BUKA" /></div>
<div class="alt2">
<div style="display: none;">
<div style="background-color: yellow; border: 2px dashed red; color: blue; padding: 10px; text-align: justify;">
Text, URL Gambar atau Widget kalian Disni</div>
</div>
</div>


Spoiler 2


<div><div style="margin: 5px;">
<div class="normalfont" style="margin-bottom: 2px;">
<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 = 'CLOSE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'OPEN'; }" style="background: none repeat scroll 0% 0% BLUE; color: white; font-size: 11px; margin: 0px; padding: 5px; width: 30%;" type="button" value="OPEN" /></div>
<div class="alt2">
<div style="display: none;">
<div style="color: white; padding: 10px; text-align: justify;">
Text, URL Gambar atau Widget kalian Disni</div>
</div>
</div>
Text, URL Gambar atau Widget kalian Disni

Spoiler 3


<div><div style="margin: 5px;">
<div class="normalfont" style="margin-bottom: 2px;">
<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 = 'CLOSE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'OPEN'; }" style="-moz-border-radius: 15px 15px 15px 15px; background: none repeat scroll 0% 0% BLUE; color: white; font-size: 11px; margin: 0px; padding: 5px; width: 30%;" type="button" value="OPEN" /></div>
<div class="alt2">
<div style="display: none;">
<div style="color: white; padding: 10px; text-align: justify;">
Text, URL Gambar atau Widget kalian Disni</div>
</div>
</div>


Spoiler 4


<div><div style="margin: 5px;">
<div class="normalfont" style="margin-bottom: 2px;">
<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="-moz-border-radius-bottomleft: 15px; -moz-border-radius-topright: 15px; background: none repeat scroll 0% 0% RED; color: white; font-size: 11px; margin: 0px; padding: 5px; width: 30%;" type="button" value="BUKA" /></div>
<div class="alt2">
<div style="display: none;">
<div style="color: white; padding: 10px; text-align: justify;">
Text, URL Gambar atau Widget kalian Disni</div>
</div>
</div>


Spoiler 5


<div><div style="margin: 5px;">
<div class="normalfont" style="margin-bottom: 2px;">
<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="-moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; background: none repeat scroll 0% 0% darkgreen; color: white; font-size: 11px; margin: 0px; padding: 5px; width: 30%;" type="button" value="BUKA" /></div>
<div class="alt2">
<div style="display: none;">
<div style="color: white; padding: 10px; text-align: justify;">
Text, URL Gambar atau Widget kalian Disni</div>
</div>
</div>


Spoiler 6
Text, URL Gambar atau Widget kalian Disni
<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;">
<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 = 'HIDE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'SHOW'; }" style="margin: 0px; padding: 0px; width: 100%;" type="button" value="SHOW" /> </div>
<div class="alt2" style="-moz-background-inline-policy: continuous; background: none repeat scroll 0% 0% rgb(255, 0, 0); border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Text, URL Gambar atau Widget kalian Disni</div>
</div>
</div>



Catatan :
Kalian bisa melakukan beberapa modifikasi : mengganti warna/color, ukuran/jenis font, text-attribute seperti bold/italic, dari Spoiler tersebut.
Kode berwarna 'Merah' adalah isi, bisa berisi link, text, gambar, dll

Bagaimana? Cukup mudah bukan cara membuatnya tinggal copas aja koq.

Sekian .. Semoga bermanfaat and Happy Blogging.

Edit ; wawansurya
Sumber;
www.affiliate-waones.com
http://mitra-sbm.blogspot.com/
http://mitra-sbm.blogspot.com/

merchant 
Search Engine





Artikel Menarik Lainnya :



Tidak ada komentar:

Posting Komentar

Apabila ada saran atau dalam posting ada kata yang kurang berkenan, saya mohon maaf. terima kasih sudah mampir di blog saya.