Tutorial Membuat Button Buka Tutup (+-) di Sidebar

Kikiki..dah lama saya tak share mengenai tutorial kan.. Kalau dulu, kat blog Ma Belle Histoire (kini dikenali sebagai Ma Belle Conway), acap kali jugaklah saya membuat entri berbentuk tutorial.. Ok, oleh kerana Puan Lela Farouk aka Fadzillah bertanya cara membuat (+-) macam kat banner GA & Contest di sidebar blog Ma Belle Conway, so saya sharekan kat sini..

Bila klik di +- tu, akan keluar banner2 contest dan ga yang saya join.. Kenapa saya sorokkan? Supaya blog nampak lebih kemas dan loading juga akan lebih laju lagi.. Ok, jom kita tengok step2 yang diperlukan.. 

1st sekali pi kat Dashboard > Design > Edit HTML.. Jangan lupa untuk backup dulu template uols.. Selepas tu, tick Expand Widget Templates. Contohnya, saya mahu pasang button (+-) di widget GA & Contest.. Dengan menggunakan CTRL F, search title='GA & Contest', akan keluar

<b:widget id='HTML12' locked='false' title='GA & Contest' 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>

Gantikan kod yang berwarna merah dengan kod di bawah 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;font-weight:bold; color:#FFFFFF;">[Open -+]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>

Tulisan berwarna purple boleh diganti mengikut kesesuaian. Kod color untuk font juga boleh ditukar mengikut kehendak uols. Seterusnya salin kod ini :

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

dan letakkan sebelum kod 

</b:includable>

Preview dulu, dah berpuashati then klik save and voila.. Template uols nampak lebih kemas lagi.. Oh ya, kalau uols perasan, untuk blog ni, saya gunakan kat Belle Buddies dan Belle Reporters..

credit : TeknikBuatBlog

Suka entri ini, meh picit button kat bawah ni: