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 comments:

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

    ReplyDelete
  2. mudah di fahami :) mahu mencuba nya

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

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

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

    ReplyDelete
  6. @Taufiqz

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

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

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

    ReplyDelete
  9. huhu... maseh tak boleh... T.T

    ReplyDelete
  10. 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'

    ReplyDelete
  11. @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 :)

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

    ReplyDelete
  13. @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 ;))

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. 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?:)

    ReplyDelete
  17. @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

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

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

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

    ReplyDelete
  21. haa??ulang yg mcm mane tu kak??

    ReplyDelete
  22. 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???

    ReplyDelete
  23. bagaimana cara membuat link tutorial seperti di blog azza???

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

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

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

    ReplyDelete
  27. @manzarina

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

    ReplyDelete
  28. 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? :)

    ReplyDelete
    Replies
    1. azza dah bagi jawapan dah =)) kat tutorial tu ada.

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

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

      Delete