Drop Down Menu Bold Red
1.Log masuk ke blogger dashboard anda
2.Dekat Blogger Dashboard anda-->Klik Design --> Edit Html
Cari kod
]]></b:skin>
Pastekan kod dibawah sebelum/diatas kod ]]></b:skin> tersebut
/*Start Css Menu*/
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirHraFVsoGsxQFn-q06WQqeLaFWxtldYNB-WQlm8n3TsjPiMEYtjrH8KO7kxnWLZMN4OHAfl9UZrY0LIbyLl39mE2LUMaJBhK6vCNp9JmXBVMbIHOmybW3GZQLqx5UqeMy6_KBe3ZFr3NN/s1600/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #a80329;
border-right:2px solid #a80329;
border-bottom:2px solid #a80329;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg4Hga1d2JW9m6OtHRHDkhtlDXNZ7c_NtxpV6Lkx2Da74yqqSwOYTmLEoFCIJulpXfLATVy5tzEruxCI4pfOaYgOIsaSfhZkXyNtuUjlvcLaEwHoiTdXI2j4EWLDeDjxBdDjjPwrpQZKQO/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}
/*End Css Menu*/
3.Klik save template
4.Pergi ke layout page atau design-->Add a gadget-->Html Javascript
Pastekan kod dibawah dekat situ
<div class="menu">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#" >Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
Template Designer Tabs Fix
Kalau korang guna template dari Blogger Template Designer,ada bahagian Css yang akan efek pada sebarang menu yang korang letak pada bahagian kolum tersebut.Ianya dipanggil tab dan korang kena alihkan atau tulis semula tab css tersebut.
Cara untuk menutup kod tersebut(Boleh remove terus tp nnti susah klau nk letak blik)adalah dengan menambah /* dan */ pada awal dan akhir kod.
/* Tabs (Inilah kod tab yang dimaksudkan)
----------------------------------------------- */
/*.tabs-inner .section:first-child {
border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}
.tabs-inner .section:first-child ul {
margin-top: -$(header.border.size);
border-top: $(header.border.size) solid $(tabs.border.color);
border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}
.tabs-inner .widget ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: $(tabs.border.width) solid $(tabs.border.color);
margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: $(tabs.font);
color: $(tabs.text.color);
border-$startSide: $(tabs.border.width) solid $(content.background.color);
border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}
.tabs-inner .widget li:first-child a {
border-$startSide: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: $(tabs.selected.text.color);
background-color: $(tabs.selected.background.color);
text-decoration: none;
}
*/
/* Columns(Ini pula kod bhgn kolum dibawahnya)
Dengan itu kod tab akan ditutup dan untuk mngaktifkannya semula,buang saja /* dan */ pada awal dan akhir kod yangtelah ditambah tadi
Post a Comment:
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.