March 1, 2012

Tutorial : Cara membuat tab menu frequency lava-lamp




ehemehem, assalamualaikum..


hari nie satu lagi tuto azza nak ajar dekat korang, hari nie azza nak ajar korang macam mana cara nak buat tab menu yang comel cam azza tu, nama dia, frequency lava lamp tau, coding diubah, azza bukan amek code darui maribinablog.com :))


okay, simple mimple, korang just kena log in > dashboard > design > add a gadjet


okay, di dalam petak kosong HTML tu korang add code nie tahu.

<style>
#container {
width: 970px;
margin: 0px 0px;
padding: 0px 0px 0px 0px;
}

ul, li {
margin: 0; padding: 0;
}

#blob {
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
top: 0;
z-index : 1;
background: #B93B8F;
background: -moz-linear-gradient(top, #B93B8F, #F9B7FF);
background: -webkit-gradient(linear, left top, left bottom, from(#B93B8F), to(#F9B7FF));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 5px #011331;
-webkit-box-shadow: 2px 3px 5px #011331;
}

#lava-lamp {
background: #E4E2E2;
background: -moz-linear-gradient(top, #E4E2E2, #FAFAFA);
background: -webkit-gradient(linear, left top, left bottom, from(#E4E2E2), to(#FAFAFA));
float: left;
border: 1px solid #BDBCBA;
margin: 0px 0px 0px;
padding: 8px 0px 10px 0px;
width: 880px;
}

#lava-lamp li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 0px solid #4a4a4a;
}

#lava-lamp li a {
color: #202020;
text-shadow: 0 0px 0px #202020;
position: relative;
z-index: 2;
float: left;
font-size: 13px;
font-family: arial, sans-serif;
font-weight: normal;
text-decoration: none;
padding: 0px 20px;
}


</style><div id="container"><ul id="lava-lamp">
<li id="selected"><a href="http://NAMABLOG.blogspot.com
"><b>Home รข�¥</b></a></li>

<li><a href="link menu"><b>nama menu</b></a></li>


<li><a href="link menu"><b>nama menu</b></a></li>


<li><a href="link menu"><b>nama menu</b></a></li>


<li><a href="link menu"><b>nama menu</b></a></li>


<li><a href="link menu"><b>nama menu</b></a></li>


<li><a href="link menu"><b>nama menu</b></a></li>


</ul></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script><script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery.spasticNav.js"></script> <script type="text/javascript">




$('#lava-lamp').spasticNav();




</script>


okay, dah add ? nak ubah code ? boleh sahaja sayang sayang sekalian okay,


untuk ubah panjang lebar blog korang tu, korang just kena cari width: 880px; yang telah diBOLDkan .
untuk ubah warna button tu, kalau azza pink, korang leh tukar pada apa apa warna sekalipun, dengan mencari code #B93B8F), to(#F9B7FF)) yang telah diBOLDkan .
untuk memasukkan link, korang just tukar nama menu tu pada ayat korang sendiri, kalau tutoral maka tutorial lah, dan link menu tu plak, korang masukkan code link tu tau


takkan tak paham kot, hehe, azza tahu korang dah biasa kan dengan nie smua ? so, selamat berjayaa !
Love,

46 Comment:

zie~azharizalira'z said...

ehehehe,,ini la tutorial y di cari selame ni,,tenx dear,,:D

Miss Nadia said...

mudah di fahami :) mahu mencuba nya

Nurwanniey said...

nk try la...:)

nur hanis said...

kena cari width: 880px; ??..nk cari kt mna?..mcm mna??..tak reti laaa.. hmm ..tlomg ajarkn dgn lbih mndalam

Azza Firza said...

@zie~azharizalira'z


welc, gudluck yaa

Azza Firza said...

@Miss Nadia

gudluck tauu

Azza Firza said...

@Nurwanniey

oke, silakann .

Azza Firza said...

@nur hanis

cari bbtol keh dear, gudluckk

Taufiqz said...

kena cari width: 880px; dengan mencari code warna #B93B8F), to(#F9B7FF)) ???
nk cri kt mna azza???
blh tlog ajar kn??

Taufiqz said...

kena cari width: 880px; dengan mencari code #B93B8F), to(#F9B7FF)) ???
kat mna nk cri??
blh tlog ajar kn???

Azza Firza said...

@Taufiqz

tu azza dah update balik, yang telah diboldkan :))

Ahmad Dzulhaziq said...

azza,,, apesal x bleh nk copy ko pnye code tuh... >.<

Azza Firza said...

@Ahmad Dzulhaziq

tekan ctrl + c ya ;p

Ahmad Dzulhaziq said...

owh... tak perasan,,, anyway,,, thnx !!! :)

Ahmad Dzulhaziq said...

huhu... maseh tak boleh... T.T

Ahmad Dzulhaziq said...

uh... sorry za... nk tnye ni,,, mnjadi mmng mnjadi,,, tpi cm ne nk masukkan page kedalam 'mende' yng dh dibuat tuh ??? ble ditekan lin tuh,,, die ckp ''page not found'

Azza Firza said...

@Ahmad Dzulhaziq

link menu tuh masukkan page yang awk nak, tuk amek link, pegi ke atas side, warna putih, yg ada http tuh ;p


then, tuk namakan menu tuh, tulis dekat nama menu :)

intan :)) said...

x phm larh kaq azza . mcm mne nkk amik link tuh ?

Azza Firza said...

@intan :))

ouh, link tu eh ? just amek jek kat pages tu, cam azza zaza96.blogspot.com en ? so amek link tuh jep :) kalau lelain jap amek gitu je oke ;))

juesamm minx said...
This comment has been removed by the author.
juesamm minx said...
This comment has been removed by the author.
juesamm minx said...

hyep kak azza..
tny ag nih..:P
kat ne kite nak paste link menu tuh??bile kite tulis post n nak post..pde menu..cam kat edit html yg kat post tu ke??edit page??edit post??di mana?:)

Azza Firza said...

@juesamm minx

maaf dik, akk tak paham, huhu

juesamm minx said...

@Azza Firza
ummp..:D
k..sye tgh tulis post nih..n da ready nak publish..sblom publish tu..sye nak sye pny post nie kat tutorial..kat mne patot sye letak link tuto tu??edit post ke??label ke??edit pages???kat mne??:D

juesamm minx said...

@juesamm minx
umpp....bwh post yg sye da publish tuh..de tulis..
link of this post.
create a link..
cam ne tu?

Azza Firza said...

@juesamm minx

ouh, edit pages lah syg :)

juesamm minx said...

@Azza Firza
ouh...g2 yup..bru taw la kak..k eah...10q kak...>)

Azza Firza said...

@juesamm minx

hehe, welc syg :)

fithriyani said...

hye kak..nk tnye nie
yg nk publish kan(page tutorial)
sy dh publish 1,
nk publish yg laen cmne

Azza Firza said...

@fithriyani

ulang benda yg sama okayy :)

fithriyani said...

haa??ulang yg mcm mane tu kak??

Azza Firza said...

@fithriyani

sama macam adik buat tuh :PPP

NURFATIN IZZATI said...

salam nk tnyer leyh x??hurm saya da ikut tutor ny..tp kan bile sye nk bkk tab contohnyer 'my biodata' knpe xde ea??then dye ckp sorry,,the page you search can't be found..so mcm mne nk tulis entry dlm sesuatu tab 2???

KelVin_BloGger said...

bagaimana cara membuat link tutorial seperti di blog azza???

Azza Firza said...

@KelVin_BloGger

erk, maaf, azza tak paham soalan anda :)

manzarina said...

nice toturial...

manzarina said...

blogger yang tak biasa dengan coding memang susah nak cari kat mana...

Anonymous said...

tak paham laa mcm mne nk edit2 yang atas tu...huhuhu..link menu tu...warna..

admin said...

mintak tunjuk ajar...nak buat tab menu dan mcm mne nak bagi dia link....

Azza Firza said...

@manzarina

thanx, betul la apa yang anda katakan itu, hanya yang sederhana je boleh paham coding sebenarnya :)

Azza Firza said...

@Anonymous

try and test oke :P

Azza Firza said...

@admin

perhatikan apa yg azza ajarkan k :)

Anonymous said...

awak! nak tye bole?

mcm mne awak buat tab menu tu? i mean bila saya tekan tab menu tu, trus hntr kat page tu. same window. boleh tlg ajrkn x? :)

Ohh Azza said...

azza dah bagi jawapan dah =)) kat tutorial tu ada.

Farra Wahedda said...

kak azza macam mana nak cari code warna lain o.O

Ohh Azza said...

cari dekat sini dik : http://www.computerhope.com/htmcolor.htm

Related Posts Plugin for WordPress, Blogger...
 

All Rights Reserved by Azah Rahaman