Memodifikasi Spoiler Show And Hide

Memodifikasi Spoiler Show And Hide

Bola Hero Gawai

Memodifikasi Spoiler Show And Hide

Spoiler Show And Hide
Postingan ini berawal karena ada beberapa sobat Kompi Ajaib yang menanyakan cara memodifikasi spoiler show and hide yang saya pakai. Dan tentunya Anda sudah tahu dan mengenal apa itu spoiler show and hide kan?

Yup...spoiler show and hide adalah sebuah button yang menyembunyikan konten dan menampilkan konten di dalamnya ketika button tersebut diklik. Nah untuk memodifikasinya hanya memerlukan beberapa kode CSS sederhana yang saya yakin Anda bisa melakukannya sehingga model buttonnya akan tampak seperti yang kita inginkan.

Untuk contoh spoiler show and hide yang saya gunakan seperti di bawah ini, silahkan klik tombolnya...



Contoh Spoiler Show And Hide


Bagaimana tertarik untuk mencobanya? Sebenarnya kode spoiler ini seperti kode di bawah ini

<div style="text-align: center;">
<div style="margin: 1px;">
<div class="smallfont" style="margin-bottom: 1px;">
<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 Content'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show Content Click Here'; }" style="font-size: 14px; margin: 0px; padding: 0px; width: auto;" type="button" value="Show Content Click Here" /></div>
<div class="alt1">
<div style="display: none;">
<br />
<div style="text-align: center;">

KONTEN DI SINI

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

Nah untuk memodifikasi tampilan button-nya tambahkan kode CSS di bawah ini

.smallfont{background:#b0130d;border:1px solid #fff;padding:6px 8px 4px;transition:all 400ms ease-in-out;display:inline-block;box-shadow:1px 1px 5px #c3c3c3}
.smallfont input[type=button]{background:none}
input[type=button]{outline:none;display:inline-block;cursor:pointer;font:bold 12px Georgia;text-decoration:none;text-shadow:1px 1px #000;color:#fff;border:none;border-radius:2px;background:#b0130d;transition:all 400ms ease-in-out}
.smallfont:hover,input[type=button]:hover{background:#E02424}
input[type=button]:active,button:active{position:relative;top:1px;left:1px}

Silahkan rubah warna backgroundnya agar sesuai dengan tema blog Anda. Selamat mencoba dan semoga bermanfaat...

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

28 Comments Add Comment

cukup keren lho mas kompi, nih ada pertanyaan sedikit oot mas, namun singkat kok, pada tahap upgrage PR versi 2 pada tahun ini sudah atau blm ya mas? kok pada diam semua dari anak2 blogger sih dan tidak heboh2 lagi ya

Balas

Update PR untuk seaseon 2 th 2013 ini blm Google lakukan, mungkin menundanya. Kini Google sedang fokus pada pembersihan blog2 yang dianggapnya spam...

Balas

pantasan banyak blog yang hapus, tq mas..

Balas

Nice post ... :) mas

http://center60.blogspot.com/

Balas

top markotop bang .. layak untuk dicoba neh

Balas

Biasa buat ngumpetin gambar ga mas??

Balas

Heheheh...makasih mas....

Balas

Silahkan dicoba mas.

Balas

Bisa ki...buat ngumpetin aki juga bisa hehehe...becanda ki...

Balas

Mas... Demo Mastemplate... Blog nya kenapa pada si hapus...?|

Balas

Sepertinya terlalu banyak yang naruh link hidup di komentarnya...seperti kita tahu di blog demo Maskolis selalu banyak yang naruh link hidup...

Balas

Tapi kalo link hisup terus otomatis kaya blog Kompiajaib nih...
Itu ngga papa kan..?

Balas

Sebenarnya itu tidak baik, makanya dikasih peringatan itu untuk bikin efek jera karena percuma nyimpen link hidup tapi tidak tampil. Yang paling parahnya linknya jadi dead link...seperti di sini http://www.kompiajaib.com/2013/05/mengatasi-broken-link-di-blog.html

Balas

Saya praktekkan, di HTML-EDITOR kok CSSnya nggak bekerja ya Mas?.
Kunjungan rutin M3.

Balas

Mungkin kode class pada input spoilernya berbeda...perhatikan kode class pada css harus sama dengan yang dipakai pada kode html-nya.

Balas

Mas, mau nanya nih, Gimana Caranya agar setelah Visitor melakukan publish-Comment, blog kita terus melakukan Scroll to Bottom(to Comment-Editor) lagi.

Balas

Itu pakai javascript mas...
Simpan emailnya di sini nanti saya kirim ke emailnya atau bikin post di forum (Out of Topic) nanti saya jawab...

Balas

Ha..ha, ketauan deh, ane nggak bisa ngebedain JS sama HTML. Terima kasih Master. Saya senang sekali Mas Kompi dah mau membalas komentar saya. Saya selalu Download dari post Mas Kompi lho, dari DataFileHost. Saya yakin aja M3 is the Master of Blogger Indonesia.Segera saya ke OOT.

OK,mas. Terima kasih sudah berkenan bagi post memodifikasi spoiler show and hide.
marlonalamo@gmail.com (subscriber kompiajaib)

Balas

Sudah saya kirim ke emailnya mas...heehehe

Balas

Mas, saya mau tanya, cara buat page Menu disamping Header itu gimana, Membuat jarak antara Sidebar dan Main page itu gimana, buat Top Menu seperti mas kompi itu Gimana.

Balas

Mas ... Related Post nya mas ngga di kasih efek tooltip kaya punya fullblogdesgin...? :) Biar lebih unik

Balas

wakakakaka....arek nyumputen dimana eta aki-aki.. wakkakaka

Balas

Request : Cara ngedit tampilan default Button blogger itu gimana mas

Balas

Wah, dishare juga mas..
Terimakasih ..

Balas

Sama seperti di atas...

button{....}

Balas

Asyik bener toggle spoiler 'show and hide' nya om. Penampilan nya lebih elegan dari penampilan biasanya. :)

Balas

Iya bisa dibikin sesuka hati kita...

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!

×
×
×