Membuat Show Hide Div Sederhana Di Postingan

Membuat Show Hide Div Sederhana Di Postingan

Bola Hero Gawai

Membuat Show Hide Div Sederhana Di Postingan

Selain isi konten yang original dan menarik ketika membuat sebuah postingan, tentunya akan lebih baik lagi jika tampilan postingannya lebih aktraktif sehingga akan lebih menarik pengunjung untuk membacanya. 

Salah satu hal yang bisa kita buat di dalam postingan yaitu tombol show and hide. Kita bisa menyembunyikan teks atau gambar dengan ini, kemudian pengunjung bisa melihat gambar atau teks yang kita sembunyikan dengan meng-klik tombolnya.

Banyak jenis show hide div ini, dan di sini saya akan share cara membuat salah satunya yaitu show hide div yang sederhana di postingan seperti yang bisa Anda lihat pada gambar gif di bawah ini.

Show Hide Div Sederhana


Bagi yang mau mencobanya silahkan gunakan kode HTML di bawah ini, silahkan gunakan pada post editor HTML.


<div id="Button" style="margin:0 auto;text-align:center">
<input type="button" onclick="document.getElementById('Content').style.display='block';Button.style.display='none';" value="Get The Code Here" />
</div>
<div id="Content" style="display:none;width:300px;padding:10px;margin:0 auto;border:1px solid #aaa;text-align:center;box-shadow: 0px 1px 3px 0px rgba(179,179,179,1);background:#fff">
<p>
SILAHKAN SIMPAN TEKS ATAU GAMBAR DI SINI
</p>
<input type="button" onclick="document.getElementById('Content').style.display='none';Button.style.display='block';" value="&#10006;" />
</div>

Cukup sederhana bukan? Silahkan ganti kode Get The Code Here dengan apa saja yang Anda mau. Dan silahkan ganti SILAHKAN SIMPAN TEKS ATAU GAMBAR DI SINI dengan teks atau gambar yang ingin Anda sembunyikan.

Dan perhatikan lebar Content pada kode ini width:300px bisa Anda ganti angkanya sesuai keinginan Anda seperti di bawah ini.


Jika kita kreatif, ini juga bisa kita jadikan trik untuk membuat ucapan terima kasih setelah klik tombol download seperti pada postingan saya yang lalu.


Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

50 Comments Add Comment

Langsung ambil pertamax =D Kebiasan saya = Komen Dulu Baru baca :D

Balas

Langsung ambil keduax =D Kebiasaan saya = Komen Dulu Baru baca =)D

Balas

ini fungsinya seperti spoiller gaya baru ya mas ;) karena spoiller gaya lama sdh tdk sempurna lagi jika digunakan di blogger versi baru :)

bisa dicoba nih makasih sharingnya :-d

Balas

Terimakasih Kang Adhy, langsung saya coba terapkan untuk show hidden kolom comentar,
Dan sampai saat ini, saya senantiasa memantau serta berusaha meniru blog kompi, tapi bukan clonning. :(
Alasanya karena blog inilah yang selalu menghadirkan inspirasi-inspirasi baru buat saya. Sekali lagi Terimakasih :-bd

Balas

asalkan jangan gumpeting isteri kedua aja mas wkwkwkwk... @@,

Balas

yang ini nih yang paling keren..
thanks mas

Balas

mantappp nih kang , untuk diisi dengan link download atau yg lainnya ...
ijin coba kang :D

Balas

sangat simple kang show hide div-nya mudah di praktekkan
ijin simpan kang untuk diterapkan di blog saya nantinya :)

Balas

Sama-sama mbak Indri :) Silahkan dicoba.

Balas

Sama-sama mas :) Berkreasi sendiri dan terinspirasi dari orang lain saya rasa sah-sah saja mas :)

Balas

Sama-sama mas :)

Balas

Silahkan mas dicoba aja :)

Balas

Iya mas silahkan dicoba heheheeh :)

Balas

sederhana namun menarik mas :]

Balas

Bisa dicoba nih mas kapan-kapan :)

Balas

top nih tutorialnya, terima kasih mas

Balas

terima kasih mas,,,, mas adi emang topcer da.. :)

Balas

Iya mas makasih :) silahkan dicoba.

Balas

Silahkan mas Prisma :)

Balas

Sama-sama mas :) Terima kasih juga :)

Balas

Sama-sama mas :)

Balas

hihihihi..bisa aja nih mas.. :D

Balas

seperti biasanya kang, ilmu show hide nya tak bokmark in, kapan waktu perlu gampang nyari nya gituh...nuhun we wungkul nya'.

Balas

simpan dulu kodenya.. makasih kang adhy :)

Balas

Ya lumayan lah mas hehehehe :)

Balas

Silahkan kang hehehe siapa tahu lain waktu bisa dicoba :)

Balas

Sama-sama mas :)

Balas

ijin bookmark kang adhy.. makasih kang

Balas

Keren bgt mas soalnya jarang yang share.

Balas

Dicoba dulu, baru komen. 100% sukses diterapkan mas :D

Balas

Silahkan mas :)

Balas

Hehehehe makasih mas :)

Balas

Siiippp kang :-bd :-bd

Balas

Oh gitu ya :) siip kalau gitu :-bd

Balas

Jigana lebar blogna digedean nya kang? :D

Balas

Hehehehe betul kang di full kan :)

Balas

Sama-sama mas :)

Balas

untuk soal dan jawaban paling cocok ini :-bd
nice post :-d

Balas

ada kendala mas, mungkin saya bisa dibantu..
kalau untuk pakai lebih dari satu 'show-hide' dalam satu postingan gimana ya, karena yg diatas hanya untuk satu 'show-hide' dalam satu postingan..
terimakasih sebelumnya untuk bantuannya ;)

Balas

Bedakan ID-nya mas untuk tombol ke-2 dan seterusnya coba ganti Button menjdi Button2, Button3, dst begitu juga id Content ganti menjadi Content2, Content2, dst...
Seperti berikut
<div id="Button" style="margin:0 auto;text-align:center">
<input type="button" onclick="document.getElementById('Content').style.display='block';Button.style.display='none';" value="Get The Code Here 1" />
</div>
<div id="Content" style="display:none;width:300px;padding:10px;margin:0 auto;border:1px solid #aaa;text-align:center;box-shadow: 0px 1px 3px 0px rgba(179,179,179,1);background:#fff">
<p>
Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana.
</p>
<input type="button" onclick="document.getElementById('Content').style.display='none';Button.style.display='block';" value="&#10006;" />
</div><br/>
<div id="Button2" style="margin:0 auto;text-align:center">
<input type="button" onclick="document.getElementById('Content2').style.display='block';Button.style.display='none';" value="Get The Code Here 2" />
</div>
<div id="Content2" style="display:none;width:300px;padding:10px;margin:20px auto 0;border:1px solid #aaa;text-align:center;box-shadow: 0px 1px 3px 0px rgba(179,179,179,1);background:#fff">
<p>
Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana.
</p>
<input type="button" onclick="document.getElementById('Content2').style.display='none';Button.style.display='block';" value="&#10006;" />
</div>


Silahkan lihat demonya di sini http://jsfiddle.net/kompiajaib/8R7HX/1/show/

Balas

Maaf ada yang kelewat, pada input buttonnya juga harus diganti id buttonnya Button.style.display='none'; menjadi Button2.style.display='none'; begitu juga yang bawahnya Button.style.display='block'; menjdi Button2.style.display='block'; ini agar tulisan atau value pada buttonnya tidak error. Coba bandingkan dengan demo ini http://jsfiddle.net/kompiajaib/8R7HX/2/show/

Balas

Super sekali mas Kompi |o|
terimakasih mas :-bd

Balas

Disikat codenya ya mas..

Balas

tadi bingung buar artikel menuntut banyak gambar, akhirnya saya ingin gambar dibuat show hide. lalu saya cari di searchbox blog ini, eh ada juga.

hmmm... apa ya yang gak ada di kompi ajaib ini.
makasih mas :-bd

Balas

saya sering menggunakan gambar lebih dari satu mas, jika di akali ada yang disimpan di HTML gimana? biar gak terlalu banyak kode di postingan gitu.

Balas

Coba dengan yang ini mas http://www.kompiajaib.com/2014/10/membuat-toggle-multi-div-content-di.html

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×