Cara Membuat Spoiler (Tombol Buka/Tutup)

Artikel ini saya dapat dari saungweb.blogspot.com dan saya akan memcoba untuk berbagi kepada para pengunjung Blog ini ...

Spoiler itu adalah menu buka tutup dan menurut saya pribadi sangat berguna untuk Blog anda yang mempunyai widget banyak ..

Agar Blog Terlihat lebih rapih dan tidak sumpek gitu .. hehehehee

Okeh ga usah banyak kata, langsung saja saya kasih tau caranya hanya untuk Anda :)..

• Cara Menbuat Spoiler pada Postingan

Sebenarnya Spoiler bisa ditempatkan dimana saja,baik di sidebar, komentar ataupun postingan, Dengan spoiler kita bisa lebih menghemat tempat dan menjadikan tampilan blog kita jadi lebih sederhana

Membuat Spoiler pada postingan tinggal copy paste kode HTML dibawah ini : 

<div style="margin-bottom: 2px;">Judul Spoiler <div style="margin-top: 5px; text-align: center;"><input value="Buka" style="margin-top: 5px; 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"> </div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;"> Silahkan masukan Isi Spoiler disini,  Bisa teks atau gambar / foto  </div></div></div>

Perhatikan Teks yang berwarna Hijau, itu silakan anda ganti sesuai selera anda, bisa gambar ataupun teks biasa..

• Cara Membuat Spoiler Show / Hidden Widget

untuk Membuat Spoiler Show/Hidden kita harus mengetahui kode suatu widget itu terlebih dahulu, misalnya pada Widget Daftar isi, Label, Komentar ataupun Pengunjung ...

Langkah Pembuatannya :

• Masuk ke Blog, Pilih Design atau Rancangan
• Pilih Edit Laman, Jangan Lupa Centang Expand Widget Template ataupun BackUp dengan Download Templatenya
• Cari kode widget yang akan di jadikan Spoiler.. nah berdasarkan pengalaman sebaiknya setiap widget itu diberi nama Agar lebih mudah dalam mengeditnya...
• Contoh saya akan membuat Spoiler pada Widget Pengunjung dengan kode Idhtml-nya = html11 

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'> <b:widget id='HTML8' locked='false' title='html11'type='HTML'> <b:includable id='main'>   <!-- only display title if it's non-empty -->   <b:if cond='data:title != &quot;&quot;'>     <h2 class='title'><data:title/></h2>   </b:if> 
  <div class='widget-content'> 
    <data:content/> 
  </div>  <div class='widget-content'>     <data:content/>   </div>  <b:include name='quickedit'/> </b:includable> </b:widget>

• Ganti Teks yang bewarna Biru dengan kkode dibawah ini :

<h2 class='title'><script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:right;margin-right:0px;">[Show/Hidden]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>

•  Selanjutnya copy paste kode dibawah ini dan letakkan di atas kode <b:includable> 

<script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>

• Apabila kodenya digabungkan maka akan menjadi seperti dibawah ini : 

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'><b:widget id='HTML8' locked='false' title='html11' type='HTML'> <b:includable id='main'>   <!-- only display title if it's non-empty -->   <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:right;margin-right:0px;">[Show/Hidden]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script> </b:if> <div class='widget-content'> <data:content/> </div>
<b:include name='quickedit'/> <script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script> </b:includable> </b:widget>

Sampai disini Spoiler sudah jadi, silakan Pratinjau apabila tak ada pesan Error maka tinggal Save Template..


Selamat mencoba dan Selamat Membuat.....
Semoga Bermanfaat :)

Apabila ingin Copy-Paste Harap sertakan Sumbernya
http://berita-unik.cyber4rt.com