Home » , , , , , » Tutorial Blogspot || Cara memasang jquery lava-lamp menu

Tutorial Blogspot || Cara memasang jquery lava-lamp menu

Saturday, October 2, 2010


Assalamualaikum..Kali ini mijie ingin membuat tutorial cara membuat lava - lamp menu menggunakan jquery seperti yang anda lihat pada menu MiJiE BLoG. Cara  untuk membuat menu ini sangat mudah berbanding menu sebelum ini. Hanya mengikuti beberapa langkah sahaja dan kesannya amat memuaskan.. Ok, tanpa membuang masa, sila ikuti langkah mudah di bawah.

Step 1 : Login Dashboard => Design => Page Elements => Add a Gadget => Pilih HTML/Javascript .

Step 2 : Copy kod dibawah dan paste kan pada ruangan tadi.

<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: #AE0000;

background: -moz-linear-gradient(top, #AE0000, #C30000);

background: -webkit-gradient(linear, left top, left bottom, from(#AE0000), to(#C30000));

-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: 970px;

}

#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://mymijie.blogspot.com'><b>HOME</b></a></li>

<li><a href='http://mymijie.blogspot.com/'><b>NAMA MENU</b></a></li>

<li><a href='http://mymijie.blogspot.com/><b>NAMA MENU</b></a></li>

<li><a href='http://mymijie.blogspot.com/><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>




Step 4 : Klik Preview untuk lihat hasilnya. Semoga berjaya..;)

P/S : -
1 - Pastikan anda add a gadget/paste kod pada bahagian header.
2 - Untuk menukar warna tab menu cari kod ni #AE0000; .
3 - Untuk menukar warna background menu cari kod ni #E4E2E2; .
4 - Untuk menukar width menu, jika size menu terlalu besar @ pendek, cari kod ni width : 970px;
5 - Tukar href(link) kepada link untuk menu tersebut dan tukar NAMA MENU kepada nama pilihan anda sendiri.

OK, done.. Jika ada masalah.. Boleh komen dibawah, Insyaallah mijie akan bantu jika ada kesuntukan masa..

** Lagi tutorial disini..

31 dah komen:

Anonymous,  10/02/2010 6:47 PM  

salam...a loqman datang ni

http://www.kachipemas.blogspot.com/

Affan Ruslan 10/02/2010 7:33 PM  

Salam mijie. Yg warna merah tu ke lava-lamp/
Sng je ek. hehe.
thanks.

Walaupun dah guna WP, skg ni tgh kumpul material untuk try buat tmplate blgspot.. hehe

thanks

krole 10/02/2010 7:55 PM  

mijie...krole nak mnta izin bat tutorial tab ni kat blog krole...n terima kasih yer~

Mijie 10/02/2010 8:00 PM  

@Anonymous

wsalam..thanks lokman..tp knp x tulis name ek?

Mijie 10/02/2010 8:06 PM  

@Affan Ruslan

wsalam..a'ah sng jerk..sbb ni tambah kat gadget je..biasa tambah kat edit HTML 2..

kalau baca code, background dye 2 lava-lamp tp boleh jgk nk katekan merah lava-lamp..hihi..

ala template blog affan pun dh ok kan..kemas n professional..;)

Mijie 10/02/2010 8:07 PM  

@krole

ok krole, welcome..mijie letak dlm ni mmg utk share pun n lg suka klau ad org berjaya buat..hihih.:)

S..U..D..@..I..S 10/02/2010 9:15 PM  

salam mijie
klau xda gadget yg panjang kat header camna eh...

Mijie 10/02/2010 9:39 PM  

@S..U..D..@..I..S

klu xde gadget yg panjang 2 ssh sikit..kene mskkan dlm edit HTML..

si biskut 10/03/2010 1:58 AM  

best gak info yg nie...karang nak try gak lar

Mijie 10/03/2010 2:18 AM  

@si biskut

a'ah..ok..boleh je nk buat..;)

zulkbo 10/03/2010 2:21 AM  

salam mijie..
dalam sesibukan pun sempat
lagi bagi ilmu kat kami ni..
TQVM..

Mijie 10/03/2010 2:53 AM  

@zulkbo

wsalam..sekarang tak sibuk mana sebab weekend kan..banyak masa terluang..;)

Wanzie 10/12/2010 10:41 PM  

salam mijie... bagus tutor yang ni senang.... tapi mijie nape wanzi buat tak jadi... bila klik menu tu dia tak link pada post ehh... nanti cuba tgk ye... tima kasih

Mijie 10/13/2010 12:22 AM  

@Wanzie

wsalam wanzie..link 2 kena tgk betul2 sama ada capital @ lower..pstu klu ade jarak pun terpengaruh jgk..ni case sensitif..klu nk sng..buka dulu link label 2..wanzie dh tau kan cam ner nk copy link dari label..

Anonymous,  12/13/2010 12:32 AM  

Kalau tak silap tutorial ni dari blog Nescafe ais kan. Kalau tak silap aku lah..

Tq for sharing

Mijie 12/13/2010 8:23 AM  

@Anonymous

tak pasti plk ambil dri mn tutorial nie..tp yg pnting mijie tak copy 100%..mijie buat dulu dan kemudian baru buat tutorial..huhu

ok..welcome..;)

Putree LaVida 12/16/2010 2:42 PM  

mcm mne nak tukar yang warne biru uh ? yang roll uh . nak tukar warne

Mijie 12/20/2010 8:06 AM  

@Putree LaVida

kalau nak tukar, tkar kod ni yang ade #. kod color boleh cari kat google.

background: #E4E2E2;

background: -moz-linear-gradient(top, #E4E2E2, #FAFAFA);

background: -webkit-gradient(linear, left top, left bottom, from(#E4E2E2), to(#FAFAFA));

irahehe 1/04/2011 9:55 PM  

yeah,berjaye jugak buat tab menu macam tu. terima kasih banyak2 mijie!

:))

Nadhirah-chan 1/07/2011 9:57 PM  

salam , saya dah try tutorial ni , memang jadi .
tapi bila tukar kod #AE0000 tu jadi kaler lain , dia jadi separa merah , separa hijau . kenapa yer ?

Mijie 1/07/2011 11:54 PM  

@Nadhirah-chan

wsalam..bgs2..

yg 2 sbb gradient kan..color campur..
awk ubah yang ni jgk #C30000. tp semua yg ada #AE0000 tkar semua tau sama jgk dgn #C30000.

Nadhirah-chan 1/09/2011 6:11 PM  

oh ok dah jadi . thanks !

cg kh 3/06/2011 11:21 PM  

Thanks mijie...jadi lava nih

cg kh 3/07/2011 12:13 AM  

SALAM ada sikit masalah...bila tulis link huruf besar pada link tersebut jadi huruf kecil bila save ? kenapa

Mijie 3/09/2011 12:35 PM  

@cg kh

Wslam..maaf lambat reply. yg jadi kecil tu maybe dah set dalam coding semua tulisan jadi huruf kecil.

Cuba cari lowercase, delete, pstu tgk jadi x..

ppk kg pelet 3/25/2011 10:01 PM  

cmna nk susun? dah save pastu nnti dia jd kebwh...x ketepi pon...konpius nie..

rizal 8/06/2011 8:30 PM  

salam... saya ucapkan tahniah pada mijie yang suka buat tutoril utk blogger.. jom datang cini lak. kalo ada nk tau apa2.. gua leh kongsi..

fathin nadia 3/04/2013 8:16 PM  

salam . kawan saya tanya , macam mana nak pindahkan post2 yang dia buat dalam pages baru . tolong yeee . terima kasih sangat sangat

Post a Comment

Sila Tinggalkan komen korang kat sini yer..
InsyaAllah setiap komen dari korang aku akan blas..:)

DeSiGn By MiJiE BloG @ 2011. Powered by Blogger.