Jumaat, 20 Julai 2012

Tutorial - Menu Bar Dekat Tepi

Siti Nurfariha | 8:01 PG | 6Comments |
Nak buat?! ikut langkah-langkah dekat bawah ek?
1. Dashboard > Design > Edit HTML > Ctrl+F
]]>< /b:skin>
2. Copy code kat bawah ni dan letak sebelum code yang ]]>< /b:skin> tadi .

#menubar1 {
color: #505050;
margin-top: 70px;
height:-5px;
padding: 3px 3px 2px;
background: url() repeat-x 0 -110px;
line-height: 100%;
border-radius: 0em;
}
#menubar1 li {
margin: 4px;
padding: 0px 6px 0px 6px;
float: left;
border-radius: 10px;
border:2px solid #fff;
background:#000 url();
position: relative;
list-style: none;
box-shadow: 3px 2px 3px #474747;
-webkit-box-shadow: 3px 2px 3px #474747;
-moz-box-shadow: 3px 2px 3px #474747;
}
/* main level link */
#menubar1 a {
font: normal normal 0% Georgia, Serif;
font-size:14px;
color: #fff;
text-shadow: 1px 1px 1px #fff;
font-weight: bold;
text-decoration: none;
display: block;
padding: 2px 2px 2px 2px;
margin: 0;
}
#menubar1 a:hover {
background:#000 url();
color: #FFF;
}
/* main level link hover */
#menubar1 .current a, #menubar1 li:hover > a {
color: #000;
padding:2px 2px 2px 2px;
background: url();
}
/* dropdown */
#menubar1 li:hover > ul {
display: block;
}
/* level 2 list */
#menubar1 ul {
background: #ff7f9d;
font: normal 12px Arial;
color:#013553;
text-align:left;
display: none;
margin: 0;
padding: 2px 2px 2px 2px;
width: 185px;
position: absolute;
margin-top: -25px;
left: 0;
background: #2b9ab7 url() 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);
}

3. Cari code ni plak < div id='main-wrapper'> (Ctrl+F)
4. Copy code kat bawah dan letak atas code yang ke (3) tadi.
< style type='text/css'>

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

 a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
< /style>
< div style='display:scroll; position:fixed; top:60px; right:8px;'>
< br>< li>< a href='http://www.blogger.com/home'>Dashboard< /a>< /li>< /br>
< br>< li>< a href='http://www.cikbulat.com/'>Main Page< /a>< /li>< /br>
< /ul>< /div>
< div class='clear'/>

5. Preview dan Save kalau suka ;-)