Wednesday, December 8, 2010

Tutorial Memasang Horizontal MenuBar Dengan Shoutbox

selamat pagi murid-murid(hehehe),hari ini cikgu krole nak bagi tuition kat korang semua~!!!nak tak???apa!!!tak dengar,sekali lagi...nak tak??hah bagus~(masuk air ke dia ni,ngeee),ok,tutorial ini krole tujukan khas buat member-member semua dan terutamanya yang bertanya kepada krole berkenaan tutorial ni iaitu seperti blogger naz,blogger cik qiqi,dan blogger matdin...krole akan cuba buat tutorial ini sesimple yang mungkin agar mudah difahami dan sekiranya ada yang kurang paham dengan tutorial krole,jangan malu jangan segan~just ask krole ye.

okai apa yang korang perlu lakukan hanyalah mengikuti langkah-langkah yang krole sediakan,jom kita mulakan.

langkah pertama :
-Log in blog>>>Dashboard >>>Design >>>Edit HTML.

langkah kedua :



/*** menubar1 css mula ***/



#menubar1 {

margin: 0;

height:33px;

padding: 3px 6px 2px;

background: #72587F url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 -110px;

line-height: 100%;

border-radius: 0em;

-webkit-border-radius: 0em;

-moz-border-radius: 4px;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);

-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);

}

#menubar1 li {

margin: 0 5px;

padding: 0 0 8px;

float: left;

position: relative;

list-style: none;

}



/* main level link */

#menubar1 a {

font: bold 12px Arial;

color: #fff;

text-decoration: none;

display: block;

padding: 8px 20px;

margin: 0;

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

text-shadow: 0 1px 1px rgba(0,0,0, .3);

}

#menubar1 a:hover {

background: #000;

color: #000;

}



/* main level link hover */

#menubar1 .current a, #menubar1 li:hover > a {

background: #EE82EE url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 -40px;

color: #404040;

border-top: solid 1px #f8f8f8;

-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);

-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);

box-shadow: 0 1px 1px rgba(0,0,0, .2);

text-shadow: 0 1px 0 rgba(255,255,255, 1);

}



/* dropdown */

#menubar1 li:hover > ul {

display: block;

}



/* level 2 list */

#menubar1 ul {

font: normal 12px Arial;

color:#000000;

text-align:left;

display: none;

margin: 0;

padding: 2px 2px 2px 2px;

width: 185px;

position: absolute;

top: 35px;

left: 0;

background: #9EDEFA url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 0;

border: solid 1px #b4b4b4;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);

-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);

box-shadow: 0 1px 3px rgba(0,0,0, .3);

}



/*** menubar1 css tamat ***/



penting :
background: #72587F (Warna background menu bar)
background: #EE82EE (Warna button menu bar)
background: #9EDEFA (Warna background shout box)
width: 185px; (Lebar kotak shout box)

langkah ketiga :
-cari kod ini (]]></b:skin>)dengan menekan kekunci F3(pastekan dikotak find)

langkah keempat :
-setelah jumpa,copy kod yang telah siap diedit tadi dan pastekan diatas atau sebelum kod ]]></b:skin> pada script template.

langkah kelima :
-Salin dan edit kod HTML berwarna merah di bawah dengan menggantikan URL dan tajuk. Kemudian, masukkan kod Shout box anda pada teks Masukkan kod shout box di sini.




<!-- menubar1 mula -->



<ul id='menubar1'>

<li class='current'><a href='http://www.krolezone.com'>Home</a></li>

<li><a href='http://www.krolezone.com/search/label/Tutorial'>Tutorial</a></li>

<li><a href='http://wwww.krolezone.com/search/label/info'>Blogger Info</a></li>

<li><a href='http://www.blogger.com/profile/01115549849119467408'>About Me</a></li>

<li class='current'><a href='#'>Shout Box</a>

<ul>



<li>Masukkan kod shout box di sini.</li>



</ul>

</li>

</ul>



<!-- Menubar1 tamat -->



langkah keenam :
-Sekali lagi, dengan menggunakan keyboard, tekan kekunci F3. Taip atau paste kod:
<body>jika anda ingin meletakkan menu bar di bahagian atas blog.
<div id='header-wrapper'>jika anda ingin meletakkan menu bar di bahagian atas header.
<div id='main-wrapper'>jika anda ingin meletakkan menu bar di bahagian bawah header.
Paste pada kotak Find dan seterusnya tekan Enter.

langkah ketujuh :
-Salin kod yang telah siap di edit (rujuk langkah 5) dan paste:
*Di bawah atau selepas kod<body>jika anda ingin meletakkan menu bar di bahagian atas blog.
*Di atas atau sebelum kod<div id='header-wrapper'>jika anda ingin meletakkan menu bar di bahagian atas header.
*Di atas atau sebelum kod<div id='main-wrapper'>jika anda ingin meletakkan menu bar di bahagian bawah header.

kemudian save~dan anda berjaya...yeahhhh!!!tq.


p/s : wuahhh susah juga wat tuto ni..hrp korang phm ngee~

31 Komen:

Miera Hassan said...

banyaknye step...huhu

Unknown said...

nice tutorial bro..

bro..ko di tag..
link:Contest Terjah dan geledah

nazirulhazwan~ said...

thanks dude. hang ni mmg terbaik la.hehe

Cikpuan Qiqi said...

aiyakk.byk nya step.hehehe

Shida Radzuan said...

salam krole,shida nk tnya krole de x wat tutor camne nk wat box yg mcm "krolezone fans banner" & "krolezone contest banner" shida nk taw la,

YOUsoF said...

Terima kasih Cikgu Krole! ;)

RedBoys said...

wah. kroleku dh pandai buat tutor dan main coding. good2. hope krole dan kawan2 kita yg lain2 akan maju. majulah blogger.

p/s: rindu krole.

rafina mimi abdullah said...

aip krole...sis kurang paham ni..banyak sgt step hehe

krole said...

cik meira=heheh kalo x phm gtau krole ek~

krole said...

zalin=wuahhh tq2 zalin..nnt krole bat ek~

krole said...

naz=hehehe tq2 naz...

krole said...

cik qiqi=hehehe sory ye,kalo x phm tnye krole je ngeee~

krole said...

shida=ade wak..namenye auto slide menu...ade kat ruangan tutorial tu~

krole said...

yousof=same2 murid2 ngeee

krole said...

redboyku=wuahhh tq2 redboyku,krole pun indu sgt kat redboyku,krole ade p blog redboy tp xdak shoutmix..mmg g2 ke???

krole said...

rafina=wuahhh x phm tang mne tu wak?

ANIS HJ SUKARTI said...

huwaaaa.... mcm komplikated jek... hehehe

krole said...

nadzirah=heheh x r wak~ikot step tu je...kmfrm jd pnye ngeee~

suka_haha said...

kalau matdin nak guna kod yang matdin punya boleh buat tak kalau nak tambah kotak macam banner krole tu? apa yang matdin kena tambah kat kod menubar matdin ek? hehe..

krole said...

matdin=adus...stahu krole mmg boleh..but krole x tau tang mana lak yer~cuba matdin usha2 koding yg krole pnye ni...mmg le jmpe~atau cuba tnye afiq bukhari,sal dia mnyak ajaq krole sal menubar yg ni~

RedBoys said...

ye kroleku. redboy dh buang SB atas beberapa alasan yg masuk akal. redboys rindu sgt dgn mak, krole, afiq, padin dan rakan2 kita yg lain.

redboys x penah lupakan korang semua. redboys sentiasa jalan2 ke blog kawan2 cuma x tgglkan jejak dan komen je. depends mood redboys. huhu2.

Anonymous said...

uh..teringin lak nak buat menu bar..tp de ape je nak letak..tak tau nk letak pe..but nice tutorial :D

CIK TOM said...

nice tutorial ;)

krole said...

redboyku=wuahh krole lebih indu kat redboyku~cyg redboy,x dpt nak cmbng2 cam dulu...tp krole tumpang gumbira ngan kejayaan redboy~krole doakn moga redboy berbahagia disamping keluarga dan dimurahkan rezeki~

krole said...

misyamissyou=hehehe tq2 yer wak~

krole said...

ciktom=wuahhh tq2...lama x nmpk??busyke ciktom?

KNS said...

tips berguna.
bagus2
tp step nye banyak T.T
sob2

krole said...

fxysche=hehehe mmg byk..tp kalo diikuti step tu kmfrm jdk~

siti said...

krole..step6 tu macam takde je kod tu dalam template saya..jap tak paham..menu bar ni same ke macam menu bar dalam blog saya tu? ke lain?

ar. said...

wohh jadi :D thankss

'adawiyah az-zahraa' said...

salam...
knp kod yg 1st tu keluar ble sy preview?