Jan 22, 2011

Home » , , , » Tutorial Membuat Button Buka Tutup (+-) di Sidebar

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:

7 Comments
Comments

7 comments

Jan 22, 2011, 1:43:00 PM

tq bagi tutorial..SJ nk buat..tp tunggu tukar domain la...~ heee

Jan 24, 2011, 11:01:00 AM

thanks...
nanti nak try buat...

Jan 26, 2011, 12:10:00 AM

@shahjiehan & fadz : sama-sama..selamat mencuba..

Feb 11, 2011, 9:43:00 AM

dah try buat aritu...
tapi kan...
cmna nak add banner contest satu2 lam tu?
pening...
1 more tutorial please...
=)

Jun 2, 2011, 12:35:00 AM

mcm mana nak dpt layout mcm awk ye ? simple . then ada button home , about us , tutorial semua tu . buat ke ? atau ada download . soory , sy baru lagi dlm blog nie .

Jun 9, 2011, 12:20:00 AM

terima kasih ade tutor nih. berkesan di blog saye.. thanks.. :)

Dec 2, 2011, 5:24:00 PM

baru jer buat kak blog ibualiya.blogspot

thanks for this tutorial

Post a Comment

Related Posts Plugin for WordPress, Blogger...