7/05/2010

Membuat Show/Hidden Widget ( versi 2 )

Membuat Show/Hidden Widget ( versi 2 ) - Seperti apa Show/Hidden Widget yang saya maksudkan? (Baca dulu : Cara menghidden Widget dengan Spoiler / tombol bbuka tutup ). Membuat Show/Hidden Widget ( versi lain ) yang saya maksudkan adalah widget yang seharusnya terlihat akan menjadi tertutup/terhidden oleh judul widgetnya saja.
Jika masih penasaran dengan widget hide/show versi ini, mari ikuti langkah-langkah berikut,
  • Langkah pertama, pilih widget yang akan kita jadikan Show/Hidden Widget ( versi 2 ). Caranya dengan mencari ID widget tersebut.
  • Untuk mencari ID Widget, bukalah menu page element (Masuk ke blogger >> Design/rancangan >> pae element ) .Setelah itu cari widget yang ingin Spbat jadikan Show/Hidden Widget ( versi 2 ). Kemudian klik Edit

  • Setelah terbuka, lihatlah pada address bar widget tersebut, di sanalah terdapat ID widget tersebut

  • Setelah ID Widget ditemukan, klik cancel untuk kembali. 
  • Kemudian buka halaman Edit HTML,
  • Centang Expand Widget Template (jangan lupa backup template dulu dengan klik Download Template)
  • Kemudian cari kode ID Widget yang baru Sobat dapatkan, (Misal ID = HTML1)

  • Setelah ID Widget ditemukan, lalu cari kode yang berwarna merah berikut
<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.
<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>
  • Masukkan kode <script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script> di atas kode </b:includable> , dan hasil akhirnya 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;">[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>
</b:section>
</div>
  • Save/Simpan, dan hasilnya 


Labels: