Membuat Tombol Show Hide Gambar - Text di Blog (spoiler)

Kamis, 30 September 2010 - - 24

Tombol Show Hide pada Blog (spoiler) ini berfungsi untuk menyembunyikan gambar atau text yang terlalu panjang sehingga bisa menghemat tempat posting. bisa juga digunakan untuk menyembunyikan gambar unik atau gambar yang mengejutkan pembaca.contohnya lihat di posting disini.
Untuk cara-caranya silahkan ikuti tutorial berikut:
  1. Login kehalaman admin blog anda
  2. CoPas code yang ada dibawah ini kedalam posting atau sidebar anda.
  3. selesai.

Berikut Codenya:


<div style="text-align: center;"><div class="button-spoiler"><input value="Contoh Tombol Spoiler" 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 = 'Sembuntikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampak'; }" type="button"></div><div class="spoiler"><div style="display: none;"><br /><br /> <div style="text-align: left; padding: 10px; border: 3px inset #333; font-size: small;"><br /><br /><br /><br />Silahkan tulis text atau gambar disini <br /><br /><br /><br /><br /><br /> </div></div></div></div>


Penjelasan Code:
Yang saya beri warna hijau silahkan anda isi dengan teks atau kode gambar yang ingin anda sembunyikan.

kalau di Kaskus untuk membuat spoiler caranya menggunakan kode berikut:

[spoiler=pesan]isi pesan[/spoiler]

Selamat mencoba, semoga bermanfaat.

terima kasih ya atas informasinya...!

candra Thp at 28 Desember 2010 21.56

thanks kawand ada HTML nya,. ^_^

jalan-jalan ke Blog ku kawand hehee
http://bontangkreatif.blogspot.com/

Dunia Pascalle at 7 Januari 2011 00.52

MANTAPZ GAN NICE POST !!!
KUJUNGI http://www.duniapascalle.blogspot.com

safana(ano) at 18 Januari 2011 18.59

mantap bro...

Wah mantab gan artikelnya......

visit my blog donk....
http://www.artikelkomputer.net/

Wah mantab gan artikelnya......

visit my blog donk....
http://www.artikelkomputer.net/

Rumah Jahit Aqxa at 1 Maret 2011 12.25

thanks

Cygnus at 31 Maret 2011 13.32

... thanks artikel yg bermanfaat sekali !

templatenya pikirku facebook :D mantap templatenya

Notebook review at 1 Juli 2011 22.21

thnkz bwt infonya... :)

buluk at 11 September 2011 15.58

makasih dah bagi2 ilmunya, ringan dan jelas

Mr.Mung at 11 September 2011 16.42

@All: makasih kunjunganya, semoga bermanfaat.

aciracia at 29 November 2011 07.30

lum mudeng cara masukin kode gambar,,..

Mr.Mung at 29 November 2011 16.54

yang kurang jelas mengenai memasukan kode gambar, bisa baca posting ini:
http://www.mrmung.com/2010/12/cara-mendapat-hosting-gambar-gratis.html

Trimakasih sangat mas broo, tutorial ini sangat mempesonakan diriku, izin sedot..!!

Visit: www.frangkyblog.blogspot.com

tapi bro kalo pngen bikin di artikel posting gimana yaakunujngin dong http://baguzzzen.blogspot.com/

jilbab cantik at 26 Januari 2012 15.59

Thanks infonya...

Nice info, perlu dicoba juga nih tipsnya.

izin nyoba gan..buat hiding banner partner saya...dh tll bnyk..mksh infonya ya

PAKAR ILMU at 17 Mei 2012 13.41

sipp tutornya.. mampir kak
http://pakarilmu.web.id
PAKAR ILMU

The Gaptek at 23 Juni 2012 13.20

thank's mas bro

Tokichi at 5 Oktober 2012 09.32

Mantap bos...
udah ak pake..
please visit my blog...
http://blackroom13.blogspot.com

Ian Apian at 27 Oktober 2012 11.30

Bermanfaat bro
show hide dipasang
:D

Admin Rungan at 30 Januari 2015 22.03

ok, ijin sedot gan,

Silahkan tinggalkan komentar anda disini dan Terimakasih anda mau menuliskan nama anda.

Koleksi Tutorial Blog

Arsip Blog