Night Diamond

Jumat, 16 September 2011

Home » » Cara membuat tombol spoiler

Cara membuat tombol spoiler


Postingan saya kali ini akan membahas tentang cara membuat tombol spoiler (show/hide) di postingan... Yaps yang seperti tombol di posting saya Download AVG. Sebenarnya sih saya juga sudah mengetahuinya dari dulu.. hehe :P. Okay begini caranya :
1.     Buat sebuah postingan (atau pilih salah satu postingan anda).
2.    Edit Posting tersebut.
3.    Pilih HTML editing.
4.    Di paling atas silahkan anda copy-paste(copas) code berikut :

<div>

<input value="Show posting" 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;Hide posting&#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:#ffffff;text-align:left;padding:10px;color:#000000;">

Dan di akhir html postingan tambahkan code :

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

Contoh, jika anda memiliki postingan dengan format HTML codenya :

<br />
<div class="MsoNormal">
<span style="font-family: 'Comic Sans MS';">Sebenarnya cara
ini mungkin sudah dikenal oleh agan-agan yang sering ngeblogwalking yah,, tapi
tak apalah saya akan membahasnya.. Cara singkatnya saja yaa... hehe :</span></div>
<!--more--><o:p></o:p><br />

Maka akan menjadi seperti ini jika telah ditambah code tombolnya:

<input value="Show posting" 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;Hide posting&#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:#ffffff;text-align:left;padding:10px;color:#000000;">
<br />
<div class="MsoNormal">
<span style="font-family: 'Comic Sans MS';">Sebenarnya cara
ini mungkin sudah dikenal oleh agan-agan yang sering ngeblogwalking yah,, tapi
tak apalah saya akan membahasnya.. Cara singkatnya saja yaa... hehe :</span></div>
<!--more--><o:p></o:p><br />
</div>
</div>
</div>

5.    Nah selesai,,, jika berhasil akan seperti posting ini.. J




2 comments:

farelsite mengatakan...

makasih Sob tipsnya, good information...

muhaziz97 mengatakan...

Seeepp.. thanks atas kunjungannya yaa.. :)

Posting Komentar