Home » » Cara Membuat Show / Hide

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


atau bisa juga kayak gini

Klik untuk melihat
Review http://rujakcemil.blogspot.com on alexa.com

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.
Bagikan artikel ini :
Description: Cara Membuat Show / Hide
Rating: 4
Reviewer: Aditya Nugroho
ItemReviewed: Cara Membuat Show / Hide

Artikel Terkait

8 komentar:

  1. Balasan
    1. terimakasih juga sob untuk kunjungannya..

      Hapus
  2. Mantap gue dah coba,n sgbai tanda trimksih gue pasang link km bro silahkan cek di:http://alamsyahrachmat.blogspot.com/
    jngan lupa linkback n comentnya.

    BalasHapus
    Balasan
    1. ok sob..
      terimakasih juga udah berkunjyng..

      Hapus
  3. Om kok klo di posting tdk bisa ya show/hidenya?
    tolong balas
    terima ksh

    BalasHapus
  4. kok tidak bisa dibuka yah spoilernya di blog saya? Mohon pencerahannya

    BalasHapus
  5. Mantap ! Sip ! Tok Cer ! Trim,s !

    BalasHapus

 
DMCA.com
Copyright © 2013. Rujakcemil-Blog - All Rights Reserved
Proudly powered by Blogger

Log In Blogger