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.

<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