24 March 2011

Tutorial - Colour Navigation Header

Salam, heyy readers.


Ada someone meng'request' tutorial Colour Navigation Header yang macam dekat atas tu. So sementara aku lapang ni, aku pun buatlah tutorial ni. Actually tutorial ni aku ambli dari Zirah. But aku telah pun meminta izin pada empunya tutorial ni dan aku akan memberikan credit pada empunya tutorial pada akhir tutorial ini :) So let's proceed the tutorial ---->




1. Login Dashboard > Design > Page Elements > Add a Gadget > HTML/JavaScript.

2. Copy code di bawah ini dan paste di kotak HTML/JavaScript.

<div style="text-align: center;"><span style='-moz-border-radius: 5px; background-color:#ff6666; padding: 10px 30px 10px 30px;'><a href="http://YOUR_LINK_HERE.com">LINK</a></span> <span style='-moz-border-radius: 5px; background-color:#ff6699; padding: 10px 30px 10px 30px;'><a href="http://YOUR_LINK_HERE.com">LINK</a></span> <span style='-moz-border-radius: 5px; background-color:#996699; padding: 10px 30px 10px 30px;'><a href="http://YOUR_LINK_HERE.com">LINK</a></span> <span style='-moz-border-radius: 5px; background-color:#33cccc; padding: 10px 30px 10px 30px;'><a href="http://YOUR_LINK_HERE.com">LINK</a></span> <span style='-moz-border-radius: 5px; background-color:#99cc00; padding: 10px 30px 10px 30px;'><a href="http://YOUR_LINK_HERE.com">LINK</a></span> <span style='-moz-border-radius: 5px; background-color:#ff9933; padding: 10px 30px 10px 30px;'><a href="http://YOUR_LINK_HERE.com">LINK</a></span><br /><br /></div>

3. Edit bahagian yang diperlukan:
tulisan biru - tukar dengan link yang anda ingini contohnya HOME, ABOUT dan lain-lain.
tulisan merah - tukarkan perkataan link dengan yang anda ingini.
tulisan pink - untuk radius (bulatan). tukarkan no yang lebih besar contohnya 10px untuk radius yang lebih melengkung.
tulisan hijau - untuk mengubah warna background asal dengan warna yang anda sukai. tukarkan tulisan hijau bold dengan code warna yang di ingini.
tulisan ungu - saiz padding (kelebaran dan ketinggian) boleh diubah dengan menukar no px.

4. Save tanpa meletakkan title. save without any title. Done!


Semoga Berjaya :D


8 comments:

Anis said...

Jalan jalan siniii ^^

apitrawrr said...

kalau nk border cam dieyna camne lak ?

Dieyna said...

Anis: Sila lahh :D

apitrawrr: Border yg mana ye?

apitrawrr said...

tngok kt gmbar tuh border dye petak , nak border mcam melengkung mcam menubar dieyna :)

Dieyna said...

Ohh yang tu. Dekat dalam code tu dah ada dah border melengkung tu :)

Hahazirah said...

hai, trima ksih krna ltk kredit.

ini link utk tuto tu:
http://hahazirah.blogspot.com/2010/07/blog-post_9679.html

thnks anyway~ :)

Dieyna said...

Okay, thanks zirah :D

Anonymous said...

apa yang saya cari, terima kasih