Saturday 1 December 2012

Tutorial : Navigate-able Box For Sidebar


Apamacam ? Berminat ? Kalau berminat , boleh ikut tutrial niyh okey . 
Sebelum tu , Nak cakap yang tutorial ni kredit from kak Wana yee .
Okey . Jom kita mulakan :)


<style>
.adv2 ul{background:url(http://i.imgur.com/LsUfp.png);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:#ff3399;
width:20px;
text-decoration:none;
border:1px dashed #BBBBBB;
border-radius:33px;
color:#ffffff;
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://www.snazzyspace.com/defaultimages/ff007f_pink.gif);padding:5px;border:3px solid #FF3399;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:#FF3399;
width:22px;
text-decoration:none;
border:3px solid #ff3399;
color:#ffffff;
box-shadow:1px 1px 3px #eee;
border-radius:33px;
display:inline-block;
text-align:center;
font:22px georgia;
}

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

#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:#ff3399; padding:5px;border:3px solid #FF3399;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 navigation no.1 , remove this and replace with anything you want to be here.
</div>

<div id="2" style="display: none;">
You can also put cbox codes here. Just anything without messing the codes.
</div>

<div id="3" style="display: none;">
The third page
</div>

<div id="4" style="display: none;">
This forth page

</div>
</center>





Dah copy ? Ehh ! Tunggu jangan masukkan dalam Html Javascript tuh dulu . Korang paste kat kod tuh kat sini dulu -->  >Sini< . . Pastekan kat tempat warna biru tu . Kalau kat warna biru tuh ade kod , Korang delete jee okey ? Lepastu korang edit laa ape - ape yee .


Panduan 

Menukar backgound header kotak


Menukar warna border header kotak



Menukar warna bulatan 



Menukar warna sidebar bulatan



Menukar tulisan dan warna tulisan



Masukkan kod widget yang ingin dimasukkan




Kalau nak kode warna kat sini yee  >Sini< .
Dah selesai edit ? Copy code  yang korang edit tadi tu .
Then , pastekan dekat html javascript tu okey ? 
Save ! Dah siap . Senang jee kalau korang bukan orang yang buat kode dia . Hehe ~ 

2 comments:

Hazirah Muslim said...

patutnya awak kreditkan kat kak wanalah ,..
http://wanaseoby.blogspot.com/2012/09/tutorial-navigate-able-box-iii.html

Arni Nazira said...

Hehe , lupa .