saltwater room.: Tutorial : Tambahkan Navigation (Blogskins)

Serious terkejut giler bila nampak ni kat shoutbox :

(Klik untuk jelas lagi)

Tahu nape terkejut? Sebab saya pikir balik, macam mana nak wat tuto ni.

Susah sangat nak explain. but saya cuba kay?

Before that, tahu tak apa tu navigation? Rupa dia macam kat bawah ni :

Tuto ni direquest oleh Farahin.

Okay, jom start. Before that, tekan sini untuk lagi paham kay.

Dan dinasihatkan untuk copy dulu semua kod blogskins korang,

dan pastekan kat notepad or mana mana yang patut.

Takut tak jadi.

Dashboard > Template > Edit HTML
Search kod ni <body oncontextmenu='return false;'>
Okay, dah jumpa kann? pastikan kod yang kamu jumpa tu macam kat bawah ni :

(Klik untuk jelas lagi)

Lepas tu, bawah kod <body oncontextmenu='return false;'> tadi, ada tempat untuk tukar header kan? Bawah tempat header tu lah tempat navigation kamu. still x paham? tengok gambar bawah ni :

(Klik untuk jelas lagi)

Step seterusnya ni dengar betul betul. salah sikit kang, habis template korang. Dekat kod navigation tu, korang boleh tengok, semua kod di situ hampir sama kan? sebenarnya ada perbezaannya. Contoh kod navigation saya ialah :

<span style="color:#FFFFFF; background:#A0D6FF; cursor:pointer" id="navigation" onMouseover="this.style.color='#FFFFFF',this.style.background='#333333'" onMouseout="this.style.color='#FFFFFF',this.style.background='#A0D6FF'" onClick="changeNavigation('blog')">Entries</span>

<span style="color:#FFFFFF; background:#4FB3FF; cursor:pointer" id="navigation" onMouseover="this.style.color='#FFFFFF',this.style.background='#666666'" onMouseout="this.style.color='#FFFFFF',this.style.background='#4FB3FF'" onClick="changeNavigation('me')">About</span>

<span style="color:#FFFFFF; background:#A0D6FF; cursor:pointer" id="navigation" onMouseover="this.style.color='#FFFFFF',this.style.background='#333333'" onMouseout="this.style.color='#FFFFFF',this.style.background='#A0D6FF'" onClick="changeNavigation('escapes')">Link</span>

<span style="color:#FFFFFF; background:#4FB3FF; cursor:pointer" id="navigation" onMouseover="this.style.color='#FFFFFF',this.style.background='#666666'" onMouseout="this.style.color='#FFFFFF',this.style.background='#4FB3FF'" onClick="changeNavigation('archives')">Credits</span>

<span style="color:#FFFFFF; background:#A0D6FF; cursor:pointer" id="navigation" onMouseover="this.style.color='#FFFFFF',this.style.background='#333333'" onMouseout="this.style.color='#FFFFFF',this.style.background='#A0D6FF'" onClick="changeNavigation('tutorial')">Tutorials</span>

Okay, untuk korang tambah navigation, copy kod yang warna purple tu, paste kan dekat bawah kod warna pink tu. Nanti, dia akan jadi macam ni :

<span style="color:#FFFFFF; background:#A0D6FF; cursor:pointer" id="navigation" onMouseover="this.style.color='#FFFFFF',this.style.background='#333333'" onMouseout="this.style.color='#FFFFFF',this.style.background='#A0D6FF'" onClick="changeNavigation('blog')">Entries</span>

<span style="color:#FFFFFF; background:#4FB3FF; cursor:pointer" id="navigation" onMouseover="this.style.color='#FFFFFF',this.style.background='#666666'" onMouseout="this.style.color='#FFFFFF',this.style.background='#4FB3FF'" onClick="changeNavigation('me')">About</span>

<span style="color:#FFFFFF; background:#A0D6FF; cursor:pointer" id="navigation" onMouseover="this.style.color='#FFFFFF',this.style.background='#333333'" onMouseout="this.style.color='#FFFFFF',this.style.background='#A0D6FF'" onClick="changeNavigation('escapes')">Link</span>

<span style="color:#FFFFFF; background:#4FB3FF; cursor:pointer" id="navigation" onMouseover="this.style.color='#FFFFFF',this.style.background='#666666'" onMouseout="this.style.color='#FFFFFF',this.style.background='#4FB3FF'" onClick="changeNavigation('archives')">Credits</span>

<span style="color:#FFFFFF; background:#A0D6FF; cursor:pointer" id="navigation" onMouseover="this.style.color='#FFFFFF',this.style.background='#333333'" onMouseout="this.style.color='#FFFFFF',this.style.background='#A0D6FF'" onClick="changeNavigation('tutorial')">Tutorials</span>

<span style="color:#FFFFFF; background:#4FB3FF; cursor:pointer" id="navigation" onMouseover="this.style.color='#FFFFFF',this.style.background='#666666'" onMouseout="this.style.color='#FFFFFF',this.style.background='#4FB3FF'" onClick="changeNavigation('archives')">Credits</span>

</div><center><br>

Nampak kan ada perkataan warna emas ngan merah kan? Yang warna emas tu ngan merah tak ada masalah. Perkataan yang warna purple ngan oren tu, korang kena tukar. Okay, yang warna purple tu, tak kesah nak letak apa, tapi jangan letak perkataan yang susah sangat. Yang warna oren tu, korang tukar dengan perkataan yang korang akan letak kat navigation baru nanti. Okay, ini baru step 1. Selesai step 1, preview dulu. Kalau button navigation baru tu dah ada, jangan save dulu. Kita pergi ke step 2.
Step 2. Sekarang cari kod ni <div id="blog" style="display: none"> .
Dah jumpa? Ada sesetengah blogskins mungkin tak jumpa. Yang tak jumpa, bagitahu. Okay, lepas dah jumpa, awak copy kod dibawah ni, paste kan di ATAS kod <div id="blog" style="display: none"> tadi.

<div id="PERKATAAN PURLE TADI" style="display: none">
<div align="justify">
<div class="page"><div class="h1">PERKATAAN OREN TADI</div><br/>
<br>CONTENT KORANG<br>