Tutorial / Cara membuat Tombol Spoiler (Show / Hide) Gambar dan Teks di Signature (Siggy) Forum Gemscool

Hallo kakak . kali ini saya mau share nih tentang cara membuat spoiler (show/hide) Gambar dan juga teks di Thread forum atau pun signature (siggy) . Soal nya kebanyakan Forumers menggunakan Gambar berupa char sendiri ataupun gambar lain nya , nah berhubung agar tidak mengganggu suasana Forum karna keramaian Gambar nya atau tulisan gitu alangkah baik nya di spoiler atau di hide .

 langsung saja tanpa basa - basi lagi . silahkan kakak coba yah :)

Part I

<div>

<input value="
Tampilkan" style="margin: 0px; padding:0px;width:auto;font-size:10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Sembunyikan&#39;; } else{ this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Tampilkan&#39;; }" type="button" /></div>
<div class="alt2">
<div style="display: none;">
<div style="background:#000000;text-align:left;padding:10px;color:#ffffff;">

Masukkan text-nya disini. Gambar juga bisa.
</div>
</div>
</div>

Example :


Masukkan text-nya disini. Gambar juga bisa.

Copy / Paste Script di bawah ini Dengan cara tekan tombol Ctrl + C (Copy) & Ctrl + V (Paste)

NB :
  • Huruf berwarna biru bisa anda ganti dengan kata lain kaya: SILAHKAN DI BUKA/SILAHKAN DI TUTUP atau kata kata yang lain yang anda sukai.
  • Huruf yang berwarna merah sobat bisa memasukan pesan atau gambar


Part II 


<div>
<div style="margin: 20px; margin-top:5px">
<div style="margin-bottom: 2px;" class="smallfont">
<input style="margin: 0px; padding: 5px; width: auto; " value="Show" 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 = 'Hidden'; }else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }"type="button"/>
</div><div class="alt2"><div style="display: none;">
<div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">

DISINI LETAK KONTENT ANDA

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

Example :

DISINI LETAK KONTENT ANDA
Copy / Paste code script nya di bawah ini kakak :




NB :
  • Huruf berwarna biru bisa anda ganti dengan kata lain kaya: SILAHKAN DI BUKA/SILAHKAN DI TUTUP atau kata kata variasi lain nya yang anda sukai.
  • Huruf yang berwarna merah sobat bisa memasukan pesan atau gambar

Part III 


<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><span style="font-weight: bold;">Judul Spoiler</span><input value="Open" style=" margin:5px;padding: 0px; width: 80px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39; Close..&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39; Clik Here&#39;; }" type="button" />
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

ISI SPOILER
</div></div></div>

Example :


Judul Spoiler
ISI SPOILER

Copy / Paste code script nya di bawah ini kakak :




NB :
  • Huruf warna putih (judul spoiler) bisa di ganti dengan kata yang lain nya.
  • Huruf berwarna biru bisa anda ganti dengan kata lain kaya: SILAHKAN DI BUKA/SILAHKAN DI TUTUP atau kata kata variasi lain nya yang anda sukai.
  • Huruf yang berwarna merah sobat bisa memasukan pesan atau gambar 

Nah di atas ini adalah sebagian contoh kakak dari kode HTML Spoiler (Show/Hide) text atau pun gambar .
Kalau misal kakak mau menyembunyikan gambar . text atau isi spoiler bisa di ganti dengan gambar atau Kode gambar seperti ini 

<div><div style="margin-bottom: 2px;"><b><small>Klik show untuk melihat</small></b>
<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; }" type="button"></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">
MASUKAN TULISAN KAKAK DI SINI
</div></div></div>

Masukan Tulisan kakak Di sini  bisa di ganti dengan kode gambar :
<img src='Link Gambar'/>

Copy / Paste Script :



NB : warna hijau bisa kakak ganti dengan alamat / link gambar .



<img src='http://sphotos-c.ak.fbcdn.net/hphotos-ak-ash4/281335_501404169883064_1531277193_n.jpg'/>



Hasil :



sekarang coba kita gabungkan dengan salah satu contoh spoiler di atas maka menjadi :

Klik show untuk melihat
Community Point Blank Indonesia
Jangan lupa join yah kakak :)

Nah itu contoh nya kakak :)

Sudah Paham kah sekarang mengenai Tutorial / Cara membuat tombol Spoiler (Show / Hide) Gambar dan teks ?

kalau sudah sekarang kita akan menuju ke tahap berikut nya . yaitu cara memasukan nya ke dalam source thread di Gemscool :)

Cara buat Spoiler (Show/Hide) gambar dan teks di Thread Forum


◘ Pertama kakak buat Thread terlebih dahulu

◘ Lalu , klik source
◘ Copy dan Paste kan saja langsung kode di atas ( part I - Part III) mana yang kakak pilih saja .

◘ Setelah di Copas silahkan di edit sesuai keinginan. mau di edit tulisan atau gambar nya juga boleh, tapi ingat jika ingin mengganti tulisan atau pun gambar harus di buat melalui source ini . untuk menambahkan garis baru pada source bisa di tulis <br/> seperti itu :)
◘ Setelah di edit dan merasa sudah cukup silahkan klik source kembali .

◘ klik post dan kakak lihat hasil nya


Nah gampang kan kakak , cara membuat tombol  spoiler (show/hide) ini . terus bagaimana dengan cara membuat tombol spoiler (show/hide) Pada signatue (Siggy) di fourm ?
simple saja .

◘ Pertama - tama kakak siapkan terlebih dahulu bahan yang akan di jadikan Signature / siggy kakak
◘ Cara nya kakak harus membuat nya di Thread terlebih dahulu baru lah di Copas Ke signature

◘ jika sudah seperti gambar di atas sebagai contoh maka sekarang tinggal di copas saja ke signature
◘ Buka Forum Gemscool
◘Klik Atur Profile
◘ Klik Signature / Siggy kakak
◘ Hasil akhir seperti ini



sekarang siggy kakak sudah keren deh :)
untuk informasi lebih lanjut atau ada yang ingin di tanyakan kembali kakak bisa beri komentar di bawah ini .
silahkan untuk yang ingin mencoba membuat tombol Spoiler (Show/Hide) bisa posting di forum gemscool / di Thread saya yang mengenai Tutorial / Cara membuat tombol Spoiler (Show / Hide) Gambar dan teks di Signature (Siggy) Forum Gemscool  ini :

http://forum.gemscool.com/post/list.forum?ctgrSq=34&threadSq=1000766

Dan jangan lupa kakak , Follow blog saya bagi yang memiliki akun Google+ atau Yahoo , dan bagi yang memiliki akun Forum Gemscool boleh donk beri Rate Bintang 5 ke thread saya di atas :) #Hehehe ...
1 comment

Artikel ini bermanfaat :-?
Suka Dengan Artikel ini :-?
Kalau iya , Kasih Komentar kamu di bawah ini ya (o)
Jangan lupa untuk klik ikuti atau bagikan blog ini kepada teman - teman kamu :))
Follow blog MosBsnO juga jangan lupa 8-)
Jika ingin mendapatkan informasi terbaru dari saya sih x-) "#Hehehe

Penting !!
Untuk Membalas Komentar bisa klik SCROLL / CTRL + KLIK pada tulisan Balas


Terima Kasih