Tutorials by Anis Diyana
Tutorials

Tutorial menubar

Preview menubar

1. Dashbord-->Design-->Edit HTML
2.Cari code ]]></b:skin>
3. Copy dan paste code bawah ni di atas code ]]></b:skin>

/*** menubar1 css mula ***/

#menubar1 {
margin: 0;
height:33px;
padding: 3px 6px 2px;
background: #72587F url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir3tH24wEkociCzjfslQMyOWe_BxiFnjo2YORjeJ-JXq_QEmeLoTae6Awq5jvyT3bEKXxKTZkmNkgqkYnRe68nWtlOY8yWOij0xzt5ID6iliGnTlPZf3jFRqyWOMBcWKPV6D08C9kD4_Ga/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir3tH24wEkociCzjfslQMyOWe_BxiFnjo2YORjeJ-JXq_QEmeLoTae6Awq5jvyT3bEKXxKTZkmNkgqkYnRe68nWtlOY8yWOij0xzt5ID6iliGnTlPZf3jFRqyWOMBcWKPV6D08C9kD4_Ga/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir3tH24wEkociCzjfslQMyOWe_BxiFnjo2YORjeJ-JXq_QEmeLoTae6Awq5jvyT3bEKXxKTZkmNkgqkYnRe68nWtlOY8yWOij0xzt5ID6iliGnTlPZf3jFRqyWOMBcWKPV6D08C9kD4_Ga/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 ***/
4. Save template

Petunjuk :

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


5. Kemudian, pergi design-->add a gadget-->html javascript. Copy dan paste code bawah ni kat 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 -->
6. Save :)

Kalau nak tambah menu bar lagi, copy code bawah ni

<li><a href='URL ANDA'>AYAT ANDA</a></li>

Kredit : Kak Fatihah

Sunday, 4 December 2011 - BY Anis Diyana
next → ← previous


ANIS DIYANA
I'm Anis Diyana,18 y/o,muslim and Malaysian.I love to eat cheese.I love drawing chibis and doodling too.I hope this blog will help you to edit your blog.If you have any question to ask me or you want to request a tutorial,kindly email me here: anisdiyana97@gmail.com

blog Facebook Twitter Instagram





'Florale' by Marcielago. Icons from thefadingnight.
Blog Tutorials



Photoshop & Photoscape tutorials
  •  Tutorial buat text shadow dengan menggunakan Photoscape
  •  Tutorial buat border dekat image menggunakan Photoscape
  •  Tutorial multiple background colors/hue and saturation
  • How to...
  •  Tutorial download fonts
  •  Tutorial download fonts untuk windows 7 dan windows vista
  • What is...
  •  Apa itu blog ID?
  •  Apa itu tick expand widget
  •  Border styles
  • Others
  •  Senarai chatbox atau shoutbox untuk blog anda
  •  Gadget untuk melukis doodle
  •  Check berat blog anda!