Tutorial : Navigation Tab

Nagivation 123 Tab nie jimatkan ruang sidebar selain meringankan blog loading !! Jom try ! :)
1. Layout --> Add A Gadget --> Edit HTML/JavaScript
2. Copy dan paste code di bawah :
<center><style>
.table{
background:url(http://i1130.photobucket.com/albums/m530/nhazieqah/Backgroundblog/pinkscratch_zps9c71575e.gif);padding:5px;
border:3px solid #ccc;text-align:center;
width:250px;color:#ccc
}
a.box{
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
cursor:pointer;background:#E9EAE9;
width:20px;
text-decoration:none;
border:3px solid #ccc;
color:#ccc;
box-shadow:1px 1px 3px #eee;
border-radius:33px;
display:inline-block;
text-align:center;
font:16px calibri;
}
a.box:hover{
background:#F8E0EC;color:#fff;
}
#list img{
max-width:245px;
}
 </style>
<div class="table">
<a class="box" onclick="document.getElementById('list').innerHTML=document.getElementById('1').innerHTML" >1</a>
<a class="box" onclick="document.getElementById('list').innerHTML=document.getElementById('2').innerHTML" >2</a>
<a class="box" onclick="document.getElementById('list').innerHTML=document.getElementById('3').innerHTML" >3</a>
<a class="box" onclick="document.getElementById('list').innerHTML=document.getElementById('4').innerHTML" >4</a> </div>
<div id="list" style="width:250px;color:#A4A4A4; padding:5px;border:3px solid #ccc;border-top:none;font:11px arial; letter-spacing:1px;">
Navigate around. Replace this with anything/your own words.</div>
<div id="1" style="display: none;">
This fisrt page </div>
<div id="2" style="display: none;">
The second page. </div>
<div id="3" style="display: none;">
The third page</div>
<div id="4" style="display: none;">
This forth page</div>
</center>
 EDIT :
ABC : Gambar yang bersesuaian , ikut hang laa..
ABC : Background sebelum dan selepashover yang dekat bulat nombor tuh.
ABC : Please put your stuff here :')
3. Dah siap edit , Save..
4. Then , Preview.. Haaa jadi ke tidak ? ? ? :)



No comments

Terima kasih kerana sudi menulis komen di blog Nurrul, sebarang pertanyaan akan dibalas secepatnya. Jazakallahu khairan