Saturday, December 8, 2012

Navigation III

Hari tu mimi dapat request dari seseorang . mimie tak ingat siapa .
Tutorial ni agak susah . Bila korang nak edit kena hati-hati okey ^^



1 2 3 4
Klik No.1 to see ChatBox ... Klik NO.2 To see my Navigation .

Nota kaki : Pastekan kod ni Di SINI untuk edit
Nak navigation yang lain KLIK SINI

Kalau tak nak edit pun tape sebab mimie dah buat cantik2 untuk korang ^^


<center><style>
.adv2 ul{background:url(http://olhar-43.net/conteudo/patterns/patterns4/7.gif);padding:5px;border:1px dashed #DDDDDD;text-align:center;width:250px;color:#555}

.adv2 p{padding:5px;text-align:left;width:250px;color:#555;}

a.tablo{-webkit-transition: all 0.5s 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:#fff;
width:20px;
text-decoration:none; 
border:1px dashed #BBBBBB; 
border-radius:33px;
color:#555; 
display:inline-block;
text-align:center;
}

a.tablo:hover{background:#ccc;color:#fff;}

 </style>
<div id="adv2" class="adv2">
<center><style>
.babo{background:url(http://olhar-43.net/conteudo/patterns/patterns4/16.gif);padding:5px;border:3px solid #9E78FF;text-align:center;width:250px;color:#555}

a.tablo{
-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:#78A3FF;
width:20px;
text-decoration:none; 
border:3px solid #de45ff; 
color:#fff;
box-shadow:1px 1px 3px #78A3FF;
border-radius:33px;
display:inline-block;
text-align:center;
font:16px calibri;
}

a.tablo:hover{background:#BB45FF;color:#572B70;}

#wnsb img{max-width:245px;}
 </style>
<div class="babo">
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >1</a> 
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >2</a> 
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >3</a> 
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('4').innerHTML" >4</a> </div>

<div id="wnsb" style="width:250px;color:#30889C; padding:5px;border:3px solid #9E78FF;border-top:none;font:11px arial; letter-spacing:1px;">
Write anything at here . your bio , shoutbox or anything .
</div>

<div id="1" style="display: none;">
no 1.Write anything at here


<div id="2" style="display: none;">
<center><style>
</style>
No2 .Write anything at here
</div>

<div id="3" style="display: none;">
<center>No.3 Write anything at here</div>

<div id="4" style="display: none;">
no 4 Write anything at here

</div>
</center></d



5 comments:

Anonymous said...

untuk blogskin takde ke??

Syamimi_Tahir said...

@Anonymous maaflah tada . tak reti la bab2 blogskin ni . huhu

Dunia Wilma said...

Nice tutorial ^_^

zeeQa said...

nak buat juga lahh.
nice tuto.

Cik Chokie said...

Waaa comelnya :D