Tutorial : Navigate Box (Blogskin)


Assalamualaikum and annyeonghaseyo. Tutor yg kedua utk hari ni. Ok, kalau td navigate box utk template designer kan? Yg ni utk template classic pulak. Let's start.

| PREVIEW |

1. Dashboard > Template
2. Press Ctrl + f serentak dan cari code </style>
3. Copy code di bawah ni
.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;
4. Paste di atas code tadi
5. Skrang korg copy code ni pula
<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>
6. Paste di bahagian yg korg nak letak navigate ni
7. Preview & save.

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

6 comment [s]:

Atin Tory said...

wow.. tuto yang bagus ni.. atin nak buat ni.. tp xde ms.. tgk2 unnie dh buat :).. jd xyh la buat sbb unnie dh buat hihi.. so fast :D

Nurul AtiQah said...

@Atin Tory : Hehe, sekadar brkongsi :) LOL, cepat sgt kah? xD

Eggs with toast said...

cool tutorial, thanks for sharing

Siti Aisyah said...

ada x yg for simple template ?

Nurul AtiQah said...

@Eggs with toast : U're welcome :)
@Siti Aisyah :Ada http://nurulatiqahjaidin.blogspot.com/2012/12/tutorial-navigate-box.html

Hanim Jailani said...

Hai, saya nak copy tuto boleh? Saya dah credit nama awak. Thanks kalau boleh.