Cara pasang horizontal menu bar dengan shout box


Untuk memasang menu bar dengan auto-hide shout box, seperti yang boleh anda lihat di blog ini atau di sini(sila klik), sila ikut beberapa langkah di bawah:

p/s: Sila save template anda terlebih dahulu.

Langkah 1

Salin kod css berwarna biru di bawah. Edit kod warna dan width yang telah di bold di bawah. Anda boleh gunakan kod di bawah sebagai rujukan.

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

/*** 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 ***/


Langkah 2

Log in blog => Dashboard => Design => Edit HTML.


Langkah 3

Dengan menggunakan keyboard, tekan kekunci F3. Salin atau paste kod ]]></b:skin> pada kotak Find dan seterusnya tekan Enter.



Langkah 4

Salin kod css yang telah siap di edit(rujuk langkah 1) dan paste kod tersebut di atas atau sebelum kod ]]></b:skin> pada script template.



Langkah 5

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://maribinablog.blogspot.com'>Home</a></li>
<li><a href='http://maribinablog.blogspot.com/search/label/Tutorial'>Tutorial</a></li>
<li><a href='http://maribinablog.blogspot.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 6

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 7

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.

Akhir sekali, klik Preview dan jika tiada mesej Error yang terpapar, klik Save.


{ 34 comments.. read them below or add one }

zulkbo zulkbo 7:14 PM
salam..
amat moden widget ni
belum bersedia..takut
nanti ramai yang confused
apapun amat berguna pada
yang mementingkan sofisticated
tahniah..anda memang terbaikkk
Fina Fento Fina Fento 8:15 PM
wah..sangat menarik nih.
iza iza 8:16 PM
Nanti aku cuba.....
kalau nk letak email juga kat atas tu, nk kena ikut step yg sama ke?
atau tambah2 je apa yg perlu....
Me Me 8:43 PM
wahh... menarik2... tapi nak pakai yg lama dulu... takut nanti orang nak blogwalking tak jumpa plak..

hihi...
Mummy Dasy Mummy Dasy 12:09 AM
menarik, thanks..
mrkazen mrkazen 1:09 AM
yeah akhirnye yg d tunggu2 sudah kua.....maceh
mrkazen mrkazen 2:03 AM
salam nes cam blog ak kan da ade menu bar camne nk masukkan je shoutmix tu kat menu bar yg dah tsedia...ke ade cara mane2 x..buang menu bar tu ke?? igt nk masukkn terus kat menubar yg dah tsedia
heygirl heygirl 3:10 PM
salam..klu nak letak sebelah kanan sidebar camner
Kazen Kazen 11:00 PM
@heygirl

nie kire xnk letk kt menubar ke? kalu gitu copy je code shoutbox n paste kt widget edit html..
NHIDAYAT NHIDAYAT 1:52 PM
dah try letak di tiga2 bahagian, tp semua error, nape ye
FIFIEY LYCHEE MARATION FIFIEY LYCHEE MARATION 1:59 AM
panjang naa...yg pendek je tak jadii..hahahhaha....surrender sudaa..admin mai cnii la tlg ajar sendiri..bole??
sonigonzales sonigonzales 7:41 PM
mujarab & berkesan, boleh dipelbagaikan kepada mcm2 lagi function.aku nanti nak try pollbox, komen, stats, haha.best2 gile best ini script
~NySz~ ~NySz~ 10:15 PM
yg msa msukkan kod shout di sini uh nak gne code mne erk??
url kter ke?
konfius3.. hu3..
Alex77 Alex77 8:46 PM
boss,, reti ngak buat di scroll?? pencerahan dong?? makasi
YatieOwners YatieOwners 5:17 PM
alamak, susahnya nak buat...^_^
muzam muzam 11:15 AM
agk penin de..
Afiq Afiq 8:05 PM
salam,thnkx untuk tutor menu navigation ni.. :)
www.afiqbukhari.com
si biskut si biskut 1:47 PM
camner nak buat menu bar jer..aku kira taknak hide shoutbox aku.biar layout kat luar jer.tapi yang aku nak menu bar utk aku leh bg ruang banyak sket kat blog aku.
ammboi.blogspot ammboi.blogspot 2:09 PM
waaa.. canggih manggih ni...
akan dicuba apabila tiba masanya..
hehehe
nazirulhazwan~ nazirulhazwan~ 10:20 AM
bro. langkah no 6.
xde la kat blog den.x jumpe cari=(
tlg2
ⒸⒶⒽⒶⓎⒶ ⒸⒶⒽⒶⓎⒶ 9:57 AM
terima kaseh daun keladi :)
purplekyu^_^ purplekyu^_^ 2:37 PM
emm...cmne nk buat post jdy sticky note?
mcm bile stiap kali bukak blog,,,post tu ttp ade kat blog tu walaupun dah buat post lain...
purplekyu^_^ purplekyu^_^ 2:38 PM
bile dah balas...bgtau kat shoutbox sy ye kalo boley :)
ozzy ozzy 9:22 AM
menarik...thanks for sharing
honeyvsbee honeyvsbee 12:46 PM
susah...serender lah
CIK TOM CIK TOM 3:35 PM
tak menjadi la...nak cuba jgk smpi dpt!tp cuba sok la plk..huhu..

http://www.ciktom.com/
AsyillahAisyah Idres AsyillahAisyah Idres 11:54 PM
Saya dah try banyak kali, asyik error je. Codes yang merah tu saya paste dekat Add a Gadget then drag dekat bawah header, pun tak menjadi. Saya tak tau kenapa? Agak-2 bro, kenapa ye? Tolong lah saya T.T

Ni contoh tak jadi; http://i891.photobucket.com/albums/ac119/AminYusuf/MenuBar.png

Kenapa ye dia jadi macam tu?
Nescafe ais Nescafe ais 1:06 AM
@AsyillahAisyah Idres

Rasanya kod css tak masukkan kut.
AsyillahAisyah Idres AsyillahAisyah Idres 11:20 AM
Kod css dengan html yang mana satu? Tak reti nak beza.
lassiegewdix lassiegewdix 8:42 PM
lassie buat tak jadi lahh .
boleh tengok kan tak ?
Sal Sal 11:24 AM
hahahaha...x jadi... (ps: tgh console diri sendiri ni...)
Подтверждаю Подтверждаю 2:52 PM
@AsyillahAisyah Idres

kod css tu yang ada attribute style sheet. yang html tu, ada attribute html

=)