Membuat Show Hide Widget

Hello blogger mania , kali ini  saya akan posting tentang membuat Show Hide Widget seperti gambar disamping..
Jika masih penasaran dengan  membuat show hide untuk widget, mari ikuti langkah-langkah berikut ini :




*Pergi ke Edit HTML ,
*Centang expand template widget .
*Cari Nama Widget yang pengen kamu Show Hide
   Biar cepat nyari tekan CTRL + F
*Contoh nya Recent post , Kalau udah ketemu maka akan terlihat kode seperti dibawan ini :

       

<b:widget id='HTML1' locked='false' title='Recent Post' 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>

          <b:include name='quickedit'/>

        </b:includable>

        </b:widget>

        </b:section>

        </div>

Setelah ketemu, ganti kode merah tersebut dengan kode berikut.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>

NB: kode warna biru ganti sesuka kamu
   
* Setelah itu pastekan kode

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

Tepat di atas kode </b:includable> 

dan hasil akhirnya akan seperti ini,

        <b:widget id='HTML1' locked='false' title='Recent Post' 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;"><b>[Show/Hidden]</b><\/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>

        </b:section>

        </div>

 

* Setelah selesai Save/Simpan template sobat, dan hasilnya tara......

Judul: Membuat Show Hide Widget
Rating: 10 out of 10 based on 24 ratings. 5 user reviews.
Ditulis Oleh edwin naiborhu

Terima Kasih Atas Kunjungan Anda...