tutorial menu bar

okay.
tuto kali ni tuto pasal nak buat menu bar
kadang-kadang aku jadi biul gak kalau nak buat bende alah ni


okay jom mulakan
ni tuto menu bar
kalau korang hias cantek2 mesti hot blog korang !




firstly,
korang dari dashboard -> design -> edit HTML 
korang cari code ni 
guna Ctrl F ya !
]]></b:skin> 


lepas tuh copy plak code bawah ni n paste-kan kat atas  
]]></b:skin> 






/*** 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 &gt; 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 &gt; 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;-mozborder-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 ***/
Petunjuk :

Warna background menu bar : #72587F
Warna button menu bar : #EE82EE
Warna background shout box : #9EDEFA
Button bila sentuh : #000000
Width : 185px
Font : Arial

P/s : Yang petunjuk tu, korang bebas untuk edit ikut suka hati korang okey! :)

lastly,
korang dari dashboard -> design -> page elements -> add gadget + HTML / Jaavascript


and korang copy code ni n pastekan kat dalam box HTML/Javascript



<!-- menubar1 mula --><ul id='menubar1'><li class='current'><a href='URL ANDA'>AYAT ANDA</a></li><li><a href='URL ANDA'>AYAT ANDA</a></li><li><a href='URL ANDA'>AYAT ANDA</a></li></ul><!-- Menubar1 tamat -->

korang editlah dengan ayat korang sendiri

Kalau nak tambah menu bar lagi, copy code bawah ni



<li><a href='URL ANDA'>AYAT ANDA</a></li>
Okey, dah siap :)


kalau pening-pening tanye yana kat chatbox yana :)

Sunday, January 30

tutorial menu bar

okay.
tuto kali ni tuto pasal nak buat menu bar
kadang-kadang aku jadi biul gak kalau nak buat bende alah ni


okay jom mulakan
ni tuto menu bar
kalau korang hias cantek2 mesti hot blog korang !




firstly,
korang dari dashboard -> design -> edit HTML 
korang cari code ni 
guna Ctrl F ya !
]]></b:skin> 


lepas tuh copy plak code bawah ni n paste-kan kat atas  
]]></b:skin> 






/*** 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 &gt; 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 &gt; 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;-mozborder-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 ***/
Petunjuk :

Warna background menu bar : #72587F
Warna button menu bar : #EE82EE
Warna background shout box : #9EDEFA
Button bila sentuh : #000000
Width : 185px
Font : Arial

P/s : Yang petunjuk tu, korang bebas untuk edit ikut suka hati korang okey! :)

lastly,
korang dari dashboard -> design -> page elements -> add gadget + HTML / Jaavascript


and korang copy code ni n pastekan kat dalam box HTML/Javascript



<!-- menubar1 mula --><ul id='menubar1'><li class='current'><a href='URL ANDA'>AYAT ANDA</a></li><li><a href='URL ANDA'>AYAT ANDA</a></li><li><a href='URL ANDA'>AYAT ANDA</a></li></ul><!-- Menubar1 tamat -->

korang editlah dengan ayat korang sendiri

Kalau nak tambah menu bar lagi, copy code bawah ni



<li><a href='URL ANDA'>AYAT ANDA</a></li>
Okey, dah siap :)


kalau pening-pening tanye yana kat chatbox yana :)