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 REALBoleh 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:
Post a Comment