Cara Membuat Show / Hide

Spoiler  show hide sering digunakan para bloger untuk meminimalis menu pada blog di samping itu dengan meminimalkan tampilan menu (gadget maupun gambar) secara tidak langsung akan meringankan loading blog kita yang disana-sini banyak nempel gadget yang beragam..
Begitu pula saya yang akhir-akhir ini sering menggunakan spoler show hiden agar tidak terlalu banyak menu yang di tampilkan. Okelah kagak usah panjang lebar mari sama-sama kita belajar.....::

1. Show / Hide  untuk gadget

Caranya:

    1. Copy codenya dibawah ini

<div><div style="margin-bottom: 2px;"><i><b><small>Klik untuk melihat </small></b></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; 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&#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;Show&#39;; }" type="button" /></div>
<div style="border:inset ; margin: 0px; padding: 6px;"><div style="display: none;">

TEXT ANDA LETAKAN DISINI

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

hasilnya kayak gini..::

Klik untuk melihat

Rujak Cemil

atau bisa juga kayak gini

Klik untuk melihat

caranya : hilangkan border:

     2. Save karya kita tadi..

2. Show / Hide  untuk widget

caranya

1. Login ke blogger.com

2. Rancangan --> Edit HTML

3. Ceklist expanwidget templates ( pastikan dulu sobat udah backup template-nya )

4. Cari nama judul sidebar sobat, misalnya "Profil"

5. Setelah ketemu, sobat perhatikan kode berwarna biru seperti di atas :

cari kode tersebut :

ganti  <h2 class='title'><data:title/></h2> dengan

<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>

6. Selanjutnya sobat scroll ke bawah sedikit lihat tag </b:includable>

  

 Letakkan kode berikut diatasnya :

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

7. Pratinjau terlebih dahulu, lalu Save..
hasil di blog saya bisa dilihat langsung

Demikian cara membuat show hide , semoga berhasil dan selamat mencoba..

Anda sedang membaca artikel tentang Cara Membuat Show / Hide. Anda bisa bookmark halaman ini dengan URL http://rujakcemil.blogspot.com/2012/06/cara-membuat-show-hidden.html. Jika Anda menyukai Artikel di blog ini, Silakan masukkan email Anda di bawah ini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit.