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 !
lepas tuh copy plak code bawah ni n paste-kan kat atas
]]></b:skin>
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcL69Bk3SwgjVCrsscg0ApqKLHZp6chL15mKSVscmWreco7S_aW7tm0EeQ-yFaems9mnRxActuMl_6cBAAnQTIkchE4fdKMbat7ZjLtjd5cy2qEqGgX_k06Q6zt5ivjoSAPckeshcLw020/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcL69Bk3SwgjVCrsscg0ApqKLHZp6chL15mKSVscmWreco7S_aW7tm0EeQ-yFaems9mnRxActuMl_6cBAAnQTIkchE4fdKMbat7ZjLtjd5cy2qEqGgX_k06Q6zt5ivjoSAPckeshcLw020/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcL69Bk3SwgjVCrsscg0ApqKLHZp6chL15mKSVscmWreco7S_aW7tm0EeQ-yFaems9mnRxActuMl_6cBAAnQTIkchE4fdKMbat7ZjLtjd5cy2qEqGgX_k06Q6zt5ivjoSAPckeshcLw020/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
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 :)
