Wednesday, October 26, 2011

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>


  • Tahu tak nak paste kat mana ni? Tengok gambar kat bawah :
(Klik untuk jelas lagi)

  • Lepas dah paste,  PREVIEW  dulu. jangan main save je. Test dulu okay ke tak. Kalau okay, baru tekan  SAVE TEMPLATE CHANGES  . 
Wuhh, baru lah saya tahu betapa seksanya buat tuto.
Btw, paham tak tuto ni? Kalau tak paham, bagitahu.
Saya cuba tolong :)
Tuto ni tak de nak ciplak kat mana mana eh, saya buat sendiri :)
Harap korang paham yea :)
SORRY KEPADA SESIAPA YANG TERKEJUT DENGAN LINK TU.
sekali sekala bergurau, tak salah kann?
Kbai.

From: -Muhd Fadlin-

3 comments:

Nurul Nurfarahin said...

wauu, pnjgnye.. ehehehe.. sorry kalau menyusahkan awak :)

Nurul Nurfarahin said...

jadi la :) thanks! :D

Muhd Fadlin said...

welcome :) hehe, mana ada menyusahkan laa :)