Minggu, 01 Januari 2012

Cara membuat spoiler atau tombol sembunyi


Cara membuat spoiler atau tombol sembunyi
 Halo sobat evanzip...wah udah lama bgt ya evanzip nga update postingan maklum sob, evanzip ahir ahir ini sedikit sibuk hehehe,sebelum nya evanzip sudah jelaskan cara membuat pojok kanan atas Blog melipat dan untuk Tutorial kali ini evanzip akan jelaskan cara membuat tombol spoiler atau tombol sembunyi pada postingan blog. Tombol spoiler atau tombol sembunyi pada blog mudah saja kita buat, hanya perlu menambahkan perintah tertentu agar menyembunyikan kontennya lalu menampilkannya jika tombol tersebut diklik. Dari pada sobat bingung Berikut evanzipkasih contoh nya:


Contoh Spoiler :
nah itu lah contoh nya sob,kalau sobat ingin spoiler seperti itu silahkan sobat ikuti langka2 berikut ini
1. Login ke dashboar blog sobat => Buat postingan, pilih pada mode Edit HTML
2. Copy code berikut, paste dipostingan sobat. 





<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Klik Disini</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " 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'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Isi Spoiler sobat disini, boleh gambar, code dll

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

  • Ganti tulisan warna Merah, dengan tulisan yang sobat inginkan, bisa berisi penjelasan atau hanya sekedar "klik untuk melihat", tapi jangan dihapus nanti gak berfungsi spoilernya.
  • Kemudian sobat ganti tulisan biru dengan isi spoiler sobat, misalnya gambar sobat.
 3. Publikasikan dan lihat hasil nya



Selamat Mencoba Semoga Berhasil








Kritik Dan Saran sobat Sangat Membantu evanzip Dalam Menulis Artikel pada Tutorial berikutnya.

0 komentar:

Poskan Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Blogger Templates