Add Navigation [Blogskins]

Assalamualaikum + Hye

\Bismillahhirrahmanirrahim/ Hello fellas ^^ Pagi2 dh wat tutorial yang terbaru. Cehh, haha :D Btw tuto nie direquest oleh Aimad :) Dye tanye camne nak wat navigation mcm akak ni. Jadi, nilah buktinye yg dye request tuto tu..

Sbelum tu, sye nk explain pasal navigation dgn page neh. Takut korg x fhm. Jadi, faham2 jelah kann? Korang tau x ape tu navigation? Rupe dye mcm kt bwh neh :

Dah paham kan ape tu navigations? Kalau kite tkn navigation tu, nanti dye akan keluar page. Dan dinasihatkan supaya backup template korang. Paste je kat mane2 mcm kt wordpad, notepad dll. Sebab ape? Takut x jadi.

UNTUK NAVIGATIONS

• Dashboard > Template
• Search kod ni </style>
• Copy kod dibawah dan paste di atas kod </style>

a.navigate {
background: #F8B1B1;
padding: 2px;
letter-spacing: 2px;
display: inline-block;
width: 200px;
color: #FFFFFF;
-webkit-transition-duration: 0.5s;
font-family: century gothic;
font-size: 12px;
text-align: center;
text-transform: uppercase;
border: 1px solid #FFFFFF;
-webkit-transition:1s;
cursor: url(URL CURSOR), auto;
}
a.navigate:hover {
background : #FFDDDD;
color: #000;
-webkit-transition:1s;
cursor: url(URL CURSOR), auto;
}

Nota kecil :

• #F8B1B1 - background navi sebelum dihover

• #FFFFFF - warna font sebelum dihover

• century gothic - font navigation korang

• 12px - saiz font korang

• #FFFFFF - border navi korang

• -webkit-transition:1s; - webkit transition. kalau nk rmove pon x pe

• URL CURSOR - url cursor korang

• #FFDDDD - background selepas dihover

• #000 - warne font selepas dihover

• -webkit-transition:1s; - webkit transition. kalau nk rmove pon x pe

• URL CURSOR - url cursor korang

Okeh, sekarang neh korang dah pastekan kod navigation tu. Lepas nie saye nak ajar camne nak edit yang "about" tu kat navigation tu, okeh.

• Dashboard > Template
• Cari kod sidebar korang e.g ; navigations here dll
• Copy kod ni dan paste di kod sidebar korang tu ^^

Neh adelah contoh kod navigations saye. Jangan ambik !

<center>
<a class="navigate" onClick="document.getElementById('entry').innerHTML=document.getElementById('diary').innerHTML" title="Entry">Story</a>
<a class="huhu" onClick="document.getElementById('entry').innerHTML=document.getElementById('about').innerHTML" title="Princess">About</a>
<a class="navigate" onClick="document.getElementById('entry').innerHTML=document.getElementById('link').innerHTML" title="Links">Links</a>
<a class="huhu" onClick="document.getElementById('entry').innerHTML=document.getElementById('stuff').innerHTML" title="Tutorials">Goodies</a>
</center>

Korang boleh ambik kod neh ;

<center>
<a class="navigate" onClick="document.getElementById('entry').innerHTML=document.getElementById('diary').innerHTML" title="Entry">Story</a>
<a class="navigate" onClick="document.getElementById('entry').innerHTML=document.getElementById('about').innerHTML" title="Princess">About</a>
<a class="navigate" onClick="document.getElementById('entry').innerHTML=document.getElementById('link').innerHTML" title="Links">Links</a>
<a class="navigate" onClick="document.getElementById('entry').innerHTML=document.getElementById('stuff').innerHTML" title="Tutorials">Goodies</a>
</center>

Nota kecil ;

Bold : Tajuk navi korang

Biru : Kalau korang hover navi tu, dye akan keluar perkataan mcm story, dye akan keluar "entry"

Oren : Ayat navigation korang. Kena berhati-hati ketika mmbuatnye ^^

Fyiuh, penat giler wat tuto nie. Haha. Jadi kalau korang nak add page untuk blogskin, refer kat sini kayy. Tapi sebelum tuh, sila klik sini ea.

Big thanks to : Fadlin and Jaja

Assalamualaikum, peace yoo.