Tuesday, February 19, 2013

Tutorial : Navigate Box Simple [Like me]

Tumblr_mietw0zsyu1rgpnp4o1_500_large

こんにちは, 안녕하세요 , Assalamualaikum.
Tadi belek-belek cbox , ada req dari wany . Dia kata macam mana nak buat navigate macam atin. maksudnya navigate bahagian sideber. Ada yang dah tau ke? huhu Yang ini simple je . So atin akan ajar ye..

Example :


Blogskin/classic template :
1. Dashboard > Template
2. Tekan Ctrl + f serentak dan cari code </style>
3. Copy code di bawah ni
a.tablo{
margin-bottom:10px;
background:#fff;
width:45px;
text-decoration:none;
border:1px dotted #fff5f5;
border-radius:33px;
color:#555;
display:inline-block;
text-align:center;
}
4. Paste di atas code </style>

5. Then copy code ni pula
<center>
<a class="tablo" onclick="document.getElementById('wnsb').
innerHTML=document.getElementById('1').innerHTML" >NAVI1</a>
<a class="tablo" onclick="document.getElementById('wnsb').
innerHTML=document.getElementById('2').innerHTML" >NAVI2</a>
<a class="tablo" onclick="document.getElementById('wnsb').
innerHTML=document.getElementById('3').innerHTML" >NAVI3</a>
</center>
<br>
<div id="wnsb" style="padding:3px;border:1px dashed #fff5f5;
border-radius:3px;background:#fff; width:200px;height:100px;
<br>
<center>
Navigate for home/around
</center>
</div>
<div id="1" style="display: none;">
Put what? Navigate for Navi 1
</div>
<div id="2" style="display: none;">
Put what? Navigate for Navi 2
</div>
<div id="3" style="display: none;">
Put what? Navigate for Navi 3
</div>
</div></div></div></div>
6. Paste kat bahagian yg korang suka. elok di sideber je.
7. Preview & save.





Template designer :
1. Dashboard > Layout > Add Gadget > HTML/JavaScript
2. Copy code di bawah ni
<style>
a.tablo{
margin-bottom:10px;
background:#fff;
width:45px;
text-decoration:none;
border:1px dotted #fff5f5;
border-radius:33px;
color:#555;
display:inline-block;
text-align:center;
}
</style>
<center>
<a class="tablo" onclick="document.getElementById('wnsb').
innerHTML=document.getElementById('1').innerHTML" >NAVI1</a>
<a class="tablo" onclick="document.getElementById('wnsb').
innerHTML=document.getElementById('2').innerHTML" >NAVI2</a>
<a class="tablo" onclick="document.getElementById('wnsb').
innerHTML=document.getElementById('3').innerHTML" >NAVI3</a>
</center>
<br>
<div id="wnsb" style="padding:3px;border:1px dashed #fff5f5;
border-radius:3px;background:#fff; width:200px;height:100px;
<br>
<center>
Navigate for home/around
</center>
</div>
<div id="1" style="display: none;">
Put what? Navigate for Navi 1
</div>
<div id="2" style="display: none;">
Put what? Navigate for Navi 2
</div>
<div id="3" style="display: none;">
Put what? Navigate for Navi 3
</div>
</div></div></div></div>
3. Paste dalam HTML/JavaScript
4. Save


oren : Tajuk navigate
merah : letak ape yg korg nk letak .












3 comments:

NurShabrina said...

Akk, kenapa saya cuba buat tak jadi ?

Muhammad Adam Sani said...

Ni bukan yang akak wana punye ke?

Kawaii Gurlzz said...

Navigate for home/around nak letak code ape? tak paham.