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

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.

Soal Online Ujian Sekolah TIK

Soal Online: Latihan Ujian Sekolah Mapel TIK

.:: Iklan ::.

Koleksi Tutorial Blog

Pengertian Blog dan Cara Membuat Blog Terbaru

Cara Melakukan Posting Artikel

Cara Membuat Readmore di blog dengan Mudah

Cara Mendapat Hosting Gambar Gratis

Cara Menghilangkan Tulisan Subscribe To Post (Atom)

Cara Setting Blog Yang Baru di Buat

Cara memasang Jam Animasi di Blog

Cara memasang banner affiliate di blog

Cara menampilkan dokumen office (word, excell, power point) di blog

Changing the Read More in blogger - New Feature

Creating 'After the jump' summaries

Encode dan Decode

Gadget Posting Terpopuler dengan Thumbnile dan Statistik Blog

How to create a blog with Blogger - Video YouTobe

Membuat Banner atau Gambar Berjalan

Membuat Navigasi Halaman / Page Navigation Blogger

Membuat Site Map, Daftar Isi Otomatis Versi 2

Membuat Slide Gambar di Blog Dengan JQuery

Membuat Teks Berkedip Seperti Gadis Cantik yang Centil

Membuat Tombol Share Facebook Dengan Counter

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

Menciptakan blog yang keren dan elegant

Mengganti Avatar Komentator dengan Avatar MyblogLog

Mengganti Template Blogger Standard

Navbar Blogger, Amankan Blog dari DELETE

Perancangan Template Blog Baru

Posting Gambar di Blog

Script Buku Tamu Model Show Hide

Script Membuat Buku Tamu Cepat dan Praktis

Script Membuat Random Posting di Blogspot

Script Membuat Slide Photo Panorama

Tips dan Trik Blog: Agar Title Blog Kita SEO Friendly

Tips dan Trik: Menghapus Link Subsribe Post

Video Tutorial Membuat Blog di Blogspot 1

Video Tutorial Membuat Email di Ymail

Website Penyedia Layanan Shout Box

Posting Blog Terbaru Otomatis Update di Status Facebook

Gambar bergoyang ketika di sentuh

Membuat Page(Laman Terpisah) di Blogger.com

Cara Membuka Website Yang Benar (Untuk Pemula)

Cara Mudah Custom Domain di Blogspot

Cara Custom Domain blogspot dengan Domain web.id

Cara Membuat Scroll Widget Blog

Cara Edit Menu dan Sub Menu Melalui EDIT HTML Template

Cara Mengedit Gambar Slide
Cara Setting Sub Domain dan Redirect Domain
Cara Menyimpan Javascript di Google Drive

Arsip Blog