Fazeera Kahar

Horizontal navigation bar versi blogskin

posted on Wednesday, December 7, 2011 | Add comment [6]

faz nak buad tutor horizontal navigation bar versi blogskin pulak .

haa . kalau hari tu faz ade bagi tuto yang sama tapi dalam versi design template kan

macam ni kan .

ni request dari Farahim .

tau lah menjadi ke tak tuto ni sebab coding kita mungkin berbeza .

kite cube ea ?

1. Dashboard > template > edit HTML

2. cari code <div class="sidebar">

3. jumpa tak ? kalau takde , cube cari coding sidebar korang .

faz tak tahu code korang sbb code blogskin tak sama .

4. oke . kalau dah jumpa , korang paste pulak code ni kat bawah code

sidebar korang tu

<center>
<div class="title">Navigations</div><br>
<center>
<a class="heart" onClick="document.getElementById('content').innerHTML=document.getElementById('much').innerHTML" title="Post">Entries</a>
<a class="heart" onClick="document.getElementById('content').innerHTML=document.getElementById('love').innerHTML" title="About">Author</a>
<a class="heart" onClick="document.getElementById('content').innerHTML=document.getElementById('you').innerHTML" title="Tuto(s) & Freebies">Stuff</a>
<a class="heart" onClick="document.getElementById('content').innerHTML=document.getElementById('peace').innerHTML" title="Ask & Request">Message</a>
<a class="heart" onClick="document.getElementById('content').innerHTML=document.getElementById('i').innerHTML" title="Freq Questions">FAQ(s)</a>
<br>
</div>

5. belum siap lagi tau . oke , sekarang korang tukar yang ni :

* biru : tulis ayat yang korang nak .

( means bila cursor sentuh akan kluar pkataan yang korang tulis ni . eish ape yang aku cakap ni ?

err. korang faham tak ? )

* pink : tajuk utk navigation korang

* hijau : key code korang . tulis je satu pkataan yang korang suka .

( faz sarankan korang tak payag tukar pun takpe . buat pening kpale je nanti )

6. sekarang utk tulis body navigation korang pulak . copy code ni

<div id="love" style="display:none;">
<div class="title">The Author</div><br>

7. letak kat bawah code sidebar terakhir korang .

cuma perlu tukar :

* hijau : key code korang . ingat! key code ni mesti sama dgn

key code korang kat navigation bar tadi tau .

contoh : kalau kat navigation korang , code utk entry adalah much . so ,

code utk body juga mesti much . jangan tukar !

* Orange : tajuk page korang

8. then korang tulis lah entry utk page korang kat bawah code tadi tu .

9 . dah siap ? buad balik step 6 sampai 8 utk entry page korang yang seterusnya .

( kalau kat navigation korang ade 5 tabs means ade 5 page yang korang

kne edit )

p/s : kalau tak faham boleh tanye faz . jangan malu2 btanya oke . harap tuto ni menjadi la sbb tuto yang faz buat ni ikut coding faz sendiri ♥

ans said...: salam , kite tgh buat layout utk classic template , tapi time buat tak jadi laa . kite klik , tapi tak keluar pun
start dari ;

[div id="love" style="display:none;"]
[div class="title"]The Author[/div][br]

. kenapa ye ? padahal kite ikut step dari mula smpai habis . kite cari yg lain pun tak boleh jugak .. btw , thanks for tuto :D
Roziaty Shafiqah said...: x faham la kak faz.. huhu
Zulaiqa Reza said...: macam mna nak masokkan page pulak ? mksodnye , camne nak ltak entry dlm tab menu tu ?
Zulaiqa Reza said...: macam mana nak masokn page pulak , mksodnye nk msokkan entry dlm tab tu ?
Unknown said...: Tak pahamm lah :/
Unknown said...: x paham lah :/