HOMEPAGE
THE AUTHOR
FREEBIES
TUTORIALS
DESIGN PROCESS
PORTFOLIO

Tutorial Navigation Bar Like Me II

Assalamualaikum bloggers ;)

Today aten nak buat tutorial navigation bar macam aten. Yang dulu punya bukan sekarang. Tutorial ni direquest oleh Azwar dan siapa tah. Ni preview dia :


Okay jom kita mulakan.

For blogskin
1. Dashboard > Template
2. Cari code </style> dan paste code bawah ni kat atas code </style> 

.navi{
padding:5px;
display: inline-block;
font:11px verdana;
font-weight:bold;
text-align:center;
margin:2px;
color:#ffffff;
letter-spacing:2px;
-webkit-transition-duration:0.5s;
}
.navi:hover{
background:#ffffba;
border-radius:5px;
-webkit-transition-duration:0.5s;
color:#000000;
}

3. Cari code ni pulak <tbody><tr> dan paste code kat bawah ni di bawah code <tbody><tr>

<center><div style="background:#ffcfdc; width:754px; padding:3px;"><a class="navi" onClick="document.getElementById('fh').innerHTML=document.getElementById('hazwani').innerHTML" title="">Go Entries</a>
<a class="navi" onClick="document.getElementById('fh').innerHTML=document.getElementById('gila').innerHTML" title="">About Me</a>
<a class="navi"  onClick="document.getElementById('fh').innerHTML=document.getElementById('pian').innerHTML" title="">Freebies</a>
<a class="navi" onClick="document.getElementById('fh').innerHTML=document.getElementById('tutorial').innerHTML" title="">Tutorials</a>
<a class="navi" onClick="document.getElementById('fh').innerHTML=document.getElementById('binti').innerHTML" title="">Exchanges</a>
<a class="navi" onClick="document.getElementById('fh').innerHTML=document.getElementById('order').innerHTML" title="">Tempahan</a></div></center>

4. Yang 'fh' berwarna merah tu sila tukar ikut korang punya id page korang. Tahu kan? Tapi kalau tak tahu rujuklah kat code navigatin korang tu.
5. Segala perkataan yang warna merah tukarkan ikut korang punya suka.
6. Preview.
7. Kalau jadi save.

For Template Lain
1. Dashboard > Layout > Add a gadget > html javascript
2. Copy code bawah ni dan paste terus didalam kotak html javascript tu 

<style>
.navi{
padding:5px;
display: inline-block;
font:11px verdana;
font-weight:bold;
text-align:center;
margin:2px;
color:white;
text-decoration:none;
letter-spacing:2px;
-webkit-transition-duration:0.5s;
}
.navi:hover{
background:#ffffba;
border-radius:5px;
text-decoration:none;
-webkit-transition-duration:0.5s;
color:black;
}
</style>
<center><div style="padding:3px;background:#ffcfdc; width:754px;">
<a class="navi" href="URL PAGES">TAJUK NAVIGATION</a>
<a class="navi" href="URL PAGES">TAJUK NAVIGATION</a>
<a class="navi" href="URL PAGES">TAJUK NAVIGATION</a>
<a class="navi" href="URL PAGES">TAJUK NAVIGATION</a>
<a class="navi" href="URL PAGES">TAJUK NAVIGATION</a>
<a class="navi" href="URL PAGES">TAJUK NAVIGATION</a>
</div></center>

3. Segala yang warna merah tu ubah k.
4. Lepastu tekan Save & Save arragment.
5. Ingat pilih ADD A GADGET yang kat bawah header tu macam ni (preview denim) ;



19 comments:

  1. Salam aten ,thanks buat tuto ni.. sye dah try buat..tapi tak cukup plak belah kiri..macam mana ye??

    ReplyDelete
  2. kalau untuk simple template nape dye xsama rata ea kak ... saya kurang paham :\

    ReplyDelete
  3. @azwar : waalaikumsalam. ubahlah code yang aten dah merahkan kat atas tu. ataupun tambah margin-left:-1px; kat sebelah code <div style=" okay?

    @aimi wardina ; haha okay ur welcome :)

    @diana ; simple template memang lain sikit. dia sama rata bila blogskin/washed denim/denim. kalau nak sama rata, pepandai lah ubah code tu endiri.

    @amira :okay :)

    ReplyDelete
  4. Haha ... memang susah nak paham .. adik dah try .. tp susah .. but xpe adik cbe try :D

    ReplyDelete
  5. @dianaelzaf ; cuba ye :) usaha tangga kejayaan. ceh :p

    ReplyDelete
  6. Assalmmaualaikum , Awak guna new old interfaced ke??

    ReplyDelete
  7. Wahh!~ Terima kasiih X100 kali kak Fatin! Lama saya cari navigation macam ni. Simple yet cute. ^_^

    ReplyDelete
  8. akak, thanks untuk tutorial. menjadi. padahal dari last year cari tuto ni :'))

    ReplyDelete

Terima kasih atas komen yang diberikan. Jangan lupa datang lagi untuk cerita yang terbaru. Salam sayang dari owner blog

 
Thankyou for visiting | Template made by Fatin Hazwani.