» » Membuat Widget Spoiler [Show dan Hidden]

Membuat Widget Spoiler [Show dan Hidden]

Cara ini hampir sama dengan Artikel sebelumnya yaitu membuat spoiler Buka dan Tutup, namun yang membedakan spoiler ini kita menggunakan EDIT HTML, yang didalamnya kita akan membuatkan Show dan Hidden pada widget yang sudah ada diblog kita , kita hanya menambahkan spoiler Show dan Hidden…bagaimana sudah mengerti sobat!!! Saran saya pada saat membuat Widget diblog kita sebaiknya memberikan judul agar memduhkan nantinya dalam membaut spoiler Show dan Hidden . Berikut cara pembuatannya :

  • Login ke akun blog sobat

  • Masuk ke menu Rancangan > Edit HTML (penting : Download full template sobat , jaga-jaga jika terjadi kesalahan dalam modifikasi Template)

  • Jangan lupa Centang Expand widget template

  • Silahkan cari widget sobat yang ingin diubah , seperti saran tadi saya diatas sebaiknya widget diberi judul. Tinggal tekan CTRL+F dan masukkan kata kunci widget yang dimaksud ketemukan…..

  • Misalnya kata kuncinya "Link Teman" , maka scriptnya seperti dibawah ini :

<b:section'footer-column' id='col2' preferred='yes'>
<b:widget id='HTML8' locked='false' title='Link Teman'type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2'title'><data:title/></h2> </b:if>
<div'widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/> </b:includable> </b:widget>
  • Kemudian sobat ganti kode diatas yang berwarna biru dengan kode dibawah ini :

<h2'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>
  • Lalu copy kode dibawah dan letakkan diatas kode </b:includable>

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


Jika langkah-langkah diatas sudah benar , maka spoiler Show dan Hidden akan terbentuk….semoga bermanfaat……













.