Membuat Widget Spoiler [Show dan Hidden]

Imran Blog 1 comment

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

<b:if cond='data:title != ""'>
<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("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; 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>