Tutorial : Navigate Box


Assalamualaikum and annyeonghaseyo. Hai. Hari ni tieqa nak share satu lg tuto berkaitan dgn navigation. Navigate ni sesuai diletakkan di bahagian sidebar blog korg. Btw, tutor ni hanya utk pengguna template designer sahaja.

| PREVIEW |

1. Dashboard > Layout > Add Gadget > HTML/JavaScript
2. Copy code di bawah ni

<style>
.hyun ul{
background:url(URLBG);
padding:5px;border:1px solid #DDD;
text-align:center;width:220px;color:#555;
}

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

a.lulu{
-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:2px solid #DDD;
border-radius:33px;color:#555;
display:inline-block;text-align:center;
}

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

</style>
<div id="hyun" class="hyun"><ul>
<a class="lulu" onclick="document.getElementById('word')
.innerHTML=document.getElementById('1').innerHTML" >1</a>
<a class="lulu" onclick="document.getElementById('word')
.innerHTML=document.getElementById('2').innerHTML" >2</a>
<a class="lulu" onclick="document.getElementById('word')
.innerHTML=document.getElementById('3').innerHTML" >3</a>
 <a class="lulu" onclick="document.getElementById('word')
.innerHTML=document.getElementById('4').innerHTML" >4</a>
</ul>
<div id="word" style="width:250px;">Navigate around</div>
<div id="1" style="display: none;">Navigation no.1</div>
<div id="2" style="display: none;">Navigation no.2</div>
<div id="3" style="display: none;">Navigation no.3 </div>
<div id="4" style="display: none;">Navigation no.4 </div></div>

3. Paste dalam HTML/JavaScript
4. Save

Merah : URL background
Hijau : ketebalan border
Biru : solid / dotted / dashed
Oren : warna border
Ungu : stuff etc

Credit : wanaseoby

2 comment [s]:

Anis Amirah said...

navigation.1 tu boleh ltk cbox ke? bls kt fb syer boleh?
http://www.facebook.com/aanisamirah

leogurl94 said...

saya guna :)