Tuesday 13 December 2011

Tutorial : Membuat Tab Menu Slide

Assalamualaikum

Hye3..sekarang apple mau ajar cara mau buat tab menu slide yang ada macam di blog apple ni..macam gambar bawah niiii haaaa 

(ni la tab menu slide tuu)

Mau lihat yang REAL:s::s:Boleh la tengok kat blog apple yang ni..

http://applepearlhaira.blogspot.com/
Nampak sudah???mari kita mulakan misi kita..wkikiki

STEP 1 : dashboard > design > Page Elements > Add Gatget HTML

STEP 2 : copy code di bawah ni dan pastekan di kotak GADGET HTML td

<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:#F80680;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#F4F4F8;
}
</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">

Masukkan kod disini

</div>

<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body">

Masukkan kod disini

</div>

<h5 class="msg_head">Tajuk 3</h5>
<div class="msg_body">

Masukkan kod disini

</div>
</div>
 Yang HIJAU tu korang tulis la apa2 yang korang mau..contohnya macam 'ABOUT ME' ka apaka..
 Yang PINK tu plak masukkan la kod korang..
 Warna BIRU tu plak boleh korang tukar dengan warna kesukaan korang yang..boleh cari warna HTML di  SINI

STEP 3 : Boleh lar korang simpannnn.

Yeaaaa  siap pun kannn..SELAMAT MENCUBA

No comments:

Copyright By ✿apple pearl✿