HOME STUFF Giveaways

Tuto: Navigate like me part 1


Anneonghaseyo you all~♥

Today I wanna teach you how to make navigate bar like me. It's kindda a cute nav bar. Let's see the live preview.

[Live preview]


That's how its look when it was placed on you all sidebar. Kalau nak letak dekat bawah header pun boleh juga. Nanti kedudukan tu akan berubah sendiri. 
So, interest with this navigate bar?? Just follow these steps :
1. Copy this code
<center>

<style type="text/css">
a.navoo{
box-shadow: inset 9px 0 0px 0 #222;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:inline-block;
text-align:center;
background: #fff;
color:#000;
width:100px;
border:1px solid #aaa;
border-left:20px solid #FFD3F2;
width: 100px;
overflow: hidden; }
a.navoo:hover{
box-shadow: inset 850px 0 0px 0 #FFD7F3;
color: #555;}
</style>
<a class="navoo" href="url page">tittle page</a>
<a class="navoo" href="url page">tittle page</a>
<a class="navoo" href="url page">tittle page</a>
</center>

2. Log in dashboard --> layout --> Add gadget --> HTML Javascrip

3. Paste code tadi dalam ruangan html javascrip.

4. Preview dulu. Jadi tak? Kalau dah jadi save.

5. Then, korang letaklah dekat mana korang nak. Macam Lisa, Lisa suka letak navigate bar dekat bawah header sebab nampak lebih kemas. That is my option lah. Kalau korang selesa letak dekat sidebar. Terpulang ok. 

♥Nota priss♥
- Blue       : change to your fav colour. Boleh rujuk sini. -
- Red        : put your url page that you want.-
- Orange  : put your awesome tittle page. -
- yang lain korang godek - godek sendiri ok? - 

If korang tak faham bolehlah ask me. Kalau tak jadi juga. Ask me ok? Insyaalllah Lisa boleh tolong :)

Till then, xoxo
Assalamualikum :)

No comments:

Post a Comment

I'm looking forward for your comment. Thanks :)