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.
Cara pasang horizontal menu bar dengan shout box

salam..
amat moden widget ni
belum bersedia..takut
nanti ramai yang confused
apapun amat berguna pada
yang mementingkan sofisticated
tahniah..anda memang terbaikkk

wah..sangat menarik nih.

Nanti aku cuba.....
kalau nk letak email juga kat atas tu, nk kena ikut step yg sama ke?
atau tambah2 je apa yg perlu....

wahh... menarik2... tapi nak pakai yg lama dulu... takut nanti orang nak blogwalking tak jumpa plak..

hihi...

yeah akhirnye yg d tunggu2 sudah kua.....maceh

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

salam..klu nak letak sebelah kanan sidebar camner

@heygirl

nie kire xnk letk kt menubar ke? kalu gitu copy je code shoutbox n paste kt widget edit html..

dah try letak di tiga2 bahagian, tp semua error, nape ye

panjang naa...yg pendek je tak jadii..hahahhaha....surrender sudaa..admin mai cnii la tlg ajar sendiri..bole??

mujarab & berkesan, boleh dipelbagaikan kepada mcm2 lagi function.aku nanti nak try pollbox, komen, stats, haha.best2 gile best ini script

yg msa msukkan kod shout di sini uh nak gne code mne erk??
url kter ke?
konfius3.. hu3..

boss,, reti ngak buat di scroll?? pencerahan dong?? makasi

alamak, susahnya nak buat...^_^

salam,thnkx untuk tutor menu navigation ni.. :)
www.afiqbukhari.com

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.

waaa.. canggih manggih ni...
akan dicuba apabila tiba masanya..
hehehe

bro. langkah no 6.
xde la kat blog den.x jumpe cari=(
tlg2

terima kaseh daun keladi :)

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...

bile dah balas...bgtau kat shoutbox sy ye kalo boley :)

menarik...thanks for sharing

susah...serender lah

tak menjadi la...nak cuba jgk smpi dpt!tp cuba sok la plk..huhu..

http://www.ciktom.com/

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?

@AsyillahAisyah Idres

Rasanya kod css tak masukkan kut.

Kod css dengan html yang mana satu? Tak reti nak beza.

lassie buat tak jadi lahh .
boleh tengok kan tak ?

hahahaha...x jadi... (ps: tgh console diri sendiri ni...)

@AsyillahAisyah Idres

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

=)