Tutorial : Simple Navigate 2

Assalamualaikum . If nak buat yang pertama , korang boleh rujuk >SINI< . Sekarang aimi nak share macam mana nak buat simple navigate yang kedua . Kali ni lain sikit sebab dia bentuk bulat . Nak tengok contoh ? Tengok kat bawah dan kalau berminat . Boleh ikut step mudah di bawah . Kalau tak faham jangan malu jangan segan nak tanya saya okay ? 

contoh

Blogskin

1. Dashboard > Template

Template Designer 

1. Dashboard > Layout > Add a gadget > HTML/Javascript

2. Copy code kat 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 (Template Designer)

4. Paste di mana mana bahagian blog yang korang suka (Blogskin)
5. Save

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