Tutorial : Navigation (Part Four)

Assalamualaikum & Salam Sejahtera

Hari ni takde benda nak buat , so sambil dengar lagu B.A.P - One Shot , sambil nak bagi tutor simple menu tab ni dekat korang . macam biasa , nama pon simple , so takde yang menarik cuma ape special features dekat navigation ni , dia bulat and warna pelangi . tu je , wait , itu special ke ? haha . lupa kan . nak live preview or better preview ?

CLICK HERE FOR PREVIEW

amacam , okay tak ? nak cuba meh nak ajarkan :)

Template designer 
Layout > Add a Gadget > HTML / JavaScript 

Copy code bawah ni and paste dekat bahagian berkenaan ;

<style>
@font-face{
font-family:lemoncanfly;
src:url('http://static.tumblr.com/eq1rpir/A8nm517nt/lemons_can_fly.ttf')
}
.bulat {
display:inline-block;
width:50px;
height:40px;
font-family:lemoncanfly;
font-size:30px;
text-transform:uppercase;
text-align:center;
color:#fff;
text-shadow: 1px 1px 3px rgba(111, 123, 125, 1);
border:2px solid #fff;
box-shadow:0px 1px 2px #aaa;
border-radius:30px;
padding-top:8px;
padding-bottom:2px;
}
</style>

<center>
<a class="bulat" style="background:#fe5964;" href="YOUR URL">1</a>
<a class="bulat" style="background:#fea659;" href="YOUR URL">2</a>
<a class="bulat" style="background:#f8fe59;" href="YOUR URL">3</a>
<a class="bulat" style="background:#59fe5d;" href="YOUR URL">4</a>
<a class="bulat" style="background:#59ddfe;" href="YOUR URL">5</a>
<a class="bulat" style="background:#5978fe;" href="YOUR URL">6</a>
<a class="bulat" style="background:#ba59fe;" href="YOUR URL">7</a>
</center>

Classic Template
Template > Edit HTML

Copy code bawah ni , paste dekat ATAS </style> ;

@font-face{
font-family:lemoncanfly;
src:url('http://static.tumblr.com/eq1rpir/A8nm517nt/lemons_can_fly.ttf')
}
.bulat {
display:inline-block;
width:50px;
height:40px;
font-family:lemoncanfly;
font-size:30px;
text-transform:uppercase;
text-align:center;
color:#fff;
text-shadow: 1px 1px 3px rgba(111, 123, 125, 1);
border:2px solid #fff;
box-shadow:0px 1px 2px #aaa;
border-radius:30px;
padding-top:8px;
padding-bottom:2px;
}

kemudian copy code bawah ni and paste dekat bahagian mana yang korang nak , ynag korang suka ;

<center>
<a class="bulat" style="background:#fe5964;" href="YOUR URL">1</a>
<a class="bulat" style="background:#fea659;" href="YOUR URL">2</a>
<a class="bulat" style="background:#f8fe59;" href="YOUR URL">3</a>
<a class="bulat" style="background:#59fe5d;" href="YOUR URL">4</a>
<a class="bulat" style="background:#59ddfe;" href="YOUR URL">5</a>
<a class="bulat" style="background:#5978fe;" href="YOUR URL">6</a>
<a class="bulat" style="background:#ba59fe;" href="YOUR URL">7</a>
</center>

Save and siap . mudah kan ? macam biasa , mana mana yang BOLD tu , korang boleh ubah ikut kesukaan korang . kalau berminat nak pakai , sila kan . tapi make sure komen dulu . TQ :)