Showing posts with label Trik memasang tombol spoiler show hide. Show all posts
Showing posts with label Trik memasang tombol spoiler show hide. Show all posts

Wednesday, February 27, 2013

Trik memasang tombol spoiler (Show-hide)

Bismillahirrahmanirrahim..

Tombol spoiler berfungsi untuk menampilkan dan menyembunyikan postingan (tulisan, gambar, url) yang sangat panjang, kelebihan sebenarnya menggunakan spoiler meringankan loading saat membuka postingan tersebut.


Apabila tombol spoiler(show) diklik, secara otomatis akan menampilkan postingan yang disembunyikan tadi. San apabila tombol spoiler(hide) dklik lagi, secara otomatis akan menutup postingan (mengembalikan) tersebut seperti semula.

Berikut langkah-langkah membuatnya :
1. Buka menu blogger sobat www.blogger.com/blabla,

2. Klik pos, lalu klik menulis tombol pensil,


3. Klik tombol HTML, lalu copy-paste kode berikut :
<br /></div>
<div>
<div style="margin-bottom: 2px;">
<b><small>Klik Tombol ini untuk melihat Foto</small></b>
<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="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
"Klik gambar yang diinginkan pada insert image"
</div>
</div>
</div>
<br />
4. Apabila sudah, klik publikasikan,

5. Selesai.
*Keterangan :
  • Berwarna Merah, Hijau, dan Jingga dapat diganti kalimat sesuia keinginan sobat,
  • Berwarna Biru dapat diisi dengan tulisan, gambar, url yang sobat inginkan. Catatan khusus buat gambar sobat klik insert image buat memasukkan gambar.

Semoga postingan ini dapat bermanfaat, apabila script tersebut tidak berhasil atau ada yang mau ditanyakan silahkan berkomentar dengan baik. Terimakasih.

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More