Minggu, 13 Oktober 2013

Cara buat Spoiler pada postingan blogger

Spoiler : suatu ruang dalam postingan yang dapat di sembunyikan dan dapat di tampilkan dengan bantuan tombol ,hampir sama dengan menempatkan sebuah gambar atau text anda di wadah bingkai yang sering lihat di web atau blog yang gambar pada artikel nya di sembunyikan dan kalau kita ingin melihat gambar nya kita di suruh klik pada suatu tombol..kira-kira begitu deh ,mungkin sobat lebih paham apa yang di maksud dengan spoiler ,di bawah ini ada beberapa kode pembuatan spoiler yang mungkin dapat menghemat tempat postingan kita baik gambar maupun teks dan juga tidak mengganggu loading web kita,yuk mari kita coba.....

 Koyo iki lo rek...........
Ini kodenya: 1.spoiler tampilkan/sembunyikan <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:000;text-align:left;padding:10px;color:#ffffff;"> Masukkan text anda di sini </div> </div> </div>
Caranya gini oum........
Copy kode berikut pada postingan yang ingin di beri  Spoiler

&lt;div&gt;&lt;div style=&quot;margin: 20px; margin-top:5px&quot;&gt;&lt;div style=&quot;margin-bottom: 2px;&quot; class=&quot;smallfont&quot;&gt;&lt;input style=&quot;margin: 0px; padding: 5px; width: auto; &quot; value=&quot;Show&quot; onclick=&quot;if (this.parentNode.parentNode.getElementsByTagName(&#039;div&#039;)[1].getElementsByTagName(&#039;div&#039;)[0].style.display != &#039;&#039;){ this.parentNode.parentNode.getElementsByTagName(&#039;div&#039;)[1].getElementsByTagName(&#039;div&#039;)[0].style.display = &#039;&#039;; this.innerText = &#039;&#039;; this.value = &#039;Hidden&#039;; }else { this.parentNode.parentNode.getElementsByTagName(&#039;div&#039;)[1].getElementsByTagName(&#039;div&#039;)[0].style.display = &#039;none&#039;; this.innerText = &#039;&#039;; this.value = &#039;Show&#039;; }&quot;type=&quot;button&quot;/&gt;&lt;/div&gt;&lt;div class=&quot;alt2&quot;&gt;&lt;div style=&quot;display: none;&quot;&gt;&lt;div style=&quot;border: none; color:none; background-color:none; text-align: justify; padding:10px;&quot;&gt; DISINI LETAK KONTENT ANDA&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;


Mau gaya lain lagi
moga Manfaat ya brooo
Templateby :kendhin www.kopenkudamai.blogspot.com