Tutorial : Navigation Tab #5

Live Preview :

NOTICE FOLLOW FANPAGE

Put Your Stuff #1

Put Same as Your Stuff #1

Put Your Stuff #2

Put Your Stuff #3

1. Layout --> Add A Gadget --> Edit HTML/JavaScript
2. Copy dan paste code di bawah :

<style>
.table {
text-align:center;
width:270px;
color:#333333;
}
a.navigation {
cursor:vertical-text;
background-image:url(http://i1130.photobucket.com/albums/m530/nhazieqah/Backgroundblog/lovelpurple_zps32118ea2.gif);
width:80px;
text-decoration:none;
color:#333333;
display:-moz-border-radius-topright: 10px;border-top-right-radius:
10px;-moz-border-radius-topleft: 10px;border-top-left-radius: 10px;
border:3px outset #E2A9F3;
text-align:center;
font:14px Century Gothic;letter-spacing:1px;
-webkit-transition-duration:0.5s;
}
a.navigation:hover {
border:3px ridge #F5A9D0;
background-image:url(http://i1130.photobucket.com/albums/m530/nhazieqah/Backgroundblog/pinkscratch_zps9c71575e.gif);
background-position:50% 80%;
background-size:400px;
color:#A4A4A4;
-webkit-transition-duration:0.5s;
}
#note img { max-width:270px;}
 </style>
<center><div class="table">
<a class="navigation" onclick="document.getElementById('note').innerHTML=document.getElementById('1').innerHTML" > NOTICE </a>
<a class="navigation" onclick="document.getElementById('note').innerHTML=document.getElementById('2').innerHTML" > FOLLOW </a>
<a class="navigation" onclick="document.getElementById('note').innerHTML=document.getElementById('3').innerHTML" > FANPAGE </a>
</div></center>
<center><div id="note" style="width:260px;color:#333333;font:11px verdana;"><br/>
Put Your Stuff  #1</div>
<div id="1" style="display: none;"><br/>
Put Same as Your Stuff  #1
</div>
<div id="2" style="display: none;"><br/>
Put Your Stuff  #2
</div>
<div id="3" style="display: none;"><br/>
Put Your Stuff  #3
</div></center>

 EDIT :
ABC : Letak isi yang korunk nak..
ABC : Background sebelum dan selepas hover..
ABC : Tajuk
ABC : warna border
3. Dah siap edit , Save..
4. Then , Preview.. Haaa jadi ke tidak ? ? ? :)