Cara Membuat Menu Buka - Tutup

Kalau sobat blogger pernah mengunjungi kaskus pasti tidak asing dengan menu ataupun gambar yang bisa di buka – tutup. Bagaimana cara memasang menu yang bisa di buka – tutup tersebut di blog?

Caranya cukup mudah dan saya yakin sobat blogger tidak akan mengalami kesulitan, untuk lebih jelasnya langsung saja ikuti tutorial dibawah ini:

1. Login ke akun blogger Anda 
2. Masuk ke menu Tata Letak -> Tambah Gadget -> HTML/JavaScript 
3. Copy-Paste kode di bawah ini pada HTML/JavaScript 
   <div style="margin-bottom: 2px;"><span style="color: rgb(102, 102, 204);"> </span>
   <div style="margin-top: 5px; text-align: left;"><input 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;TUTUP&#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;BUKA&#39;; }" value="BUKA" style="margin-top: 5px; width: 60px; font-size: 10px;" type="button" /> </div>
   <div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">
   Letakkan link/script/gambar disini
    </div></div></div>


4. Kemudian Simpan

Atau

 cara buat Spoiler with jQuery.... menurut saya menu ini sngat menarik dengan efek smooth saat membuka tutup bagian dari menu nya...
untuk cara membuatnya :

1. Login blogger
2. Simpan kode di bawah ini pada edit html postingan atau  pada Html/Java script :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"

type="text/javascript">

</script>

<script type="text/javascript">

$(function(){$("#butToggle").click(function(){$('#dvt').toggle(1000);});});

</script>

<style type="text/css">

#dvt{width: 200px;height: 100px;border: solid 1px black;background-color:LightGrey;text-align:center;

display:none;}

</style>

<button id="butToggle">KLIK SAJA</button>

<div id="dvt">

Masukkan konten atau teks yang ingin dimasukkan disini</div> 

 Ganti kode yang berwarna merah dengan kode anda.

5. Simpan