|
Hai Welcome Here
 " Welcome to my bittersweet diary " We can chatting here
|
refresh
profile
tutorial
affies
twitter
follow
Tutorial Accordian Tab Menu}
Sunday, May 29, 2011 | 11:39 PM | 3Comment  Salam and hi.. Twill makin semangat nak berblogging, ouh.. Sebelum tu Twill nak tanya, korang masa bukak tadi load lama tak??? Sebab blog ni sudah 'berisi'.. Kalau berat, inform kat bawah comment ni ok.?? Ok, back to our story...  Twill nak buat tuto pasal accordian tab menu.. Tuto ni credit dari kak Lyssa..  Mula2 jadi macam ni...  Pastu bila cursor diletak pada tajuk, jadi camni Nak tau camne, meh nak kasi tau...\ 1. Klik Dashboard>Design>Edit HTML>Add HTML/Javascript 2. Copy yang bawah ni dan paste <style type="text/css"> h5 { font-family: trebuchet-ms, arial, tahoma; font-size: 13px; padding: 0 0 1em; font-weight:bold; color: #ffffff; } .msg_list { list-style: none; margin: 0; padding: 0; width: 100%; } .msg_head { padding: 5px 10px; cursor: pointer; position: relative; background-color:#FFB6D6; margin:1px; -moz-border-radius: 35px; border-radius: 35px; } .msg_body { padding: 5px 10px 15px; background-color:#FFFFFF; } </style> <script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script> <script type="text/javascript"> $(document).ready(function() { //hide the all of the element with class msg_body $(".msg_body").hide(); //slides the element with class "msg_body" when paragraph with class "msg_head" is clicked $("#firstpane h5.msg_head").click(function() { $(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow"); }); //slides the element with class "msg_body" when mouse is over the paragraph $("#secondpane h5.msg_head").mouseover(function() { $(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow"); }); }); </script> <div class="msg_list" id="secondpane"> <h5 class="msg_head">Tajuk 1</h5> <div class="msg_body"> <center> Isi dalam tajuk 1</div> <h5 class="msg_head">Tajuk 2</h5> <div class="msg_body"> Isi dalam tajuk 2 </div> <h5 class="msg_head">Tajuk 3</h5> <div class="msg_body"> Isi dalam tajuk 3</div> </div> 3. ~Tajuk 1,2,3 - tajuk yg korang nak letak ~Isi tajuk 1,2,3 - isi2 utk tajuk spt kod HTML Shoutmix @ tulisan apa2 ~ Warna oren - background tab menu ~ Warna Hijau - tulisan tab menu ~ Warna biru - background isi tab menu |
