Moving Nativigation Like Me(Tab)

hey peeps!

Hari ni dila nak ajar korang buat nativigation yang gerak-gerak...

Ini picture jew sebab tu tak gerak...so kalau korang nak tengok yang gerak...

sila hala kan cursor korang ke arah bawah tajuk "My Navitigation...Click!"

Gerak kan...ok,jom ikuti tutorial cam ne nak wat jadi camtu..

1. Design > Dashboard >Add A Gadget > HTML/JAVASCRIPT

2Copy code ni ----->

<style type="text/css">
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: FONT COLOUR;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color: BACKGROUND COLOUR;
margin:1px;
border: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("slowest");
});
//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("slowest").siblings("div.msg_body").slideUp("slowest");
});
});
</script>
<div class="msg_list" id="secondpane">
<h5 class="msg_head">TITLE</h5>
<div class="msg_body">
<a href="URL LINK">AYAT POWER KORANG</a>
</div>
<h5 class="msg_head">TITLE</h5>
<div class="msg_body">
<a href="URL LINK">AYAT POWER KORANG</a>
</div>
<h5 class="msg_head">TITLE</h5>
<div class="msg_body">
<a href="URL LINK">AYAT POWER KORANG</a>
</div>
<h5 class="msg_head">TITLE</h5>
<div class="msg_body">
<a href="URL LINK">AYAT POWER KORANG</a>
</div>
</div>

3.Pastekan di HTML/JAVASCRIPT
4.Save!

If korang still tak cukup lagi tab yang dila berikan tu...korang just tambah code ni..

<h5 class="msg_head">TITLE</h5>
<div class="msg_body">
<a href="URL LINK">AYAT POWER KORANG</a></div>

sebelum
</div>
</div>

ok skunk camne korang nak selesaikan yang text colour-colour tu...

Hijau : Masukkan colour "font" and "background"...CARI KAT SINIBiru   : Masukkan title link korang...example "Home,About Me,Entries,Tutorial"Pink   : Copy URL link yang korang nak masukkan..dan pastekan kat colour pinkPurple : Tulis ayat power korang....example selepas di preview :
Bawah title home terulis "Ibu Segala Blog Saya"
So disini menunjukkan "Ibu Segala Blog Saya" adalah "Ayat Power Korang"

Ada Paham?? orait..kalu korang dah jadi tutorial ni Sila Komen...

        

---

Tengs For Read

---