Tutorial accordian tabs menu
Wah,d'ya semakin rindu untuk kembali menjadi cikgu untuk mengajar anda tutor.Best tau ajar orang lain tutor selain dapat menambah pahala free je tau.Jangan kedekut ilmu sebab tuhan tak suka apatah lagi prinsip 'sharing is caring' menjadi pegangan d'ya.Tutorial kali ini di request oleh zila dan meminta d'ya membuat tutorial accordian tabs menu.Tak tahu?Jom tengok?
Accordian tabs menu adalah tabs menu yang tidak perlu di click.Hanya sentuh dengan cursor tabs menu tersebut akan keluar.Lihat contoh di blog d'ya di bahagian sidebar yang bewarna pink yang bertulis tab 'facebook profile'.Cube gerakkan cursor,pastu ada magic kan?Hehe,jom ikut tutor magic.
Pergi ke dashboard>design>add gadget>HTML/javascript
Copy dan paste code di bawah ini<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>
Perhatian!! Sila ikut nota penting di bawahh.
warna merah untuk tulisan kat tab menu warna oren untuk background tab menu warna biru untuk background isi tab menup/s: Dah penat buat tutor ini.Kalau saya boleh tolong awak,awak tolongkan saya untuk komen dan picit like okay.Sambil-sambil tersenyum kambing.Ngehe
17 marshmallow komen