Stylish Lite Blue CSS Menu Bar For Blogger

Blogger Tips » blogger-tips-tricks , CSS , Effect , Menu-bar » Stylish Lite Blue CSS Menu Bar For Blogger

Stylish Lite Blue CSS Menu Bar For Blogger

Posted by: Админ on 12:33 AM

0 comments

This post also about CSS menu bar, Its
Include with nice lite blue hover color.
Im using CSS and HTML for this menu.
You can add this easily.Check below for
demo.you can get similar menu bar from
here

Stylish Lite Blue CSS Menu Bar For Blogger

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

5.Find this code by using Ctrl+F ]]></b:skin>

6. Paste below code Before ]]></b:skin> code

/* Bloggertrix  */
#menu2{
    width:90%;
    margin:25px auto;
}
#menu2 ul{
    list-style:none;
}
#menu2 li{
    display:block;
    float:left;
}
#menu2 li a{
    background:#e4e8eb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFFm3OZWcTiIQCnXttfSSAFDXyoOlAV8LPf1MD0FXGqkAuaO2-IExdxHTFpHoCNTbleuK_9zKCUl67cV_M2SGtNhBT4jsjqWOanfGHxBMB6ENswcefI4Tc-1XGMl-z5T9RH48hHJ3eboc/s1600/menu_bg.gif) repeat-x;
    border:2px solid #bdc5cd;
    margin:0 1px;
    padding:15px 15px 15px 15px;
    display:block;
    float:left;
    color:#2b61a1;
    text-transform:uppercase;
    text-decoration:none;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-size:13px;
    font-weight:bold;
    height: 30px;
}
#menu2 li a span{
    color:#636363;
    font-size:10px;
    text-transform:lowercase;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-weight:normal;
}
#menu2 li a:hover{
    background:#e46825 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwp4CpDgMNAHhDGuqqYMyBZkIt3ifxG9G3Hl-t2rc_6aTrLkTyC-JfhcM2HcuXlcqNhgt13EdjsEyb7JLiys4moYeB0Tfw9bVH3HXTBbI6nz6MfkiX7bJgLHhQ1y4Jk_EHLdtR6hPDEUA/s1600/menu_hover.gif) repeat-x;
    border:2px solid #4a88ce;
    text-decoration:none;
}
#menu2 li a:hover span{
    color:#636363;

}
.current{
    background:#74befd url(images/menu_hover.gif) repeat-x;
    border:2px solid #4a88ce;
    margin:0 1px;
    padding:15px 15px 15px 15px;
    display:block;
    float:left;
    color:#2b61a1;
    text-transform:uppercase;
    text-decoration:none;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-size:13px;
    cursor:pointer;
    font-weight:bold;
    height: 30px;
}
.current span{
    color:#636363;
    font-size:10px;
    text-transform:lowercase;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-weight:normal;
}

7. Go to blogger and click drop-down like 1st step and select Layout

8. Click Add Gadget and select 'HTML/Javascript"

9. Paste below code.

<div id="menu2">
<ul>
<li class="current">Home<br />home page</li>
<li><a href="#">About Us<br />about us page</a></li>
<li><a href="#">Products<br />products page</a></li>
<li><a href="#">Partners<br />partners page</a></li>
<li><a href="http://www.bloggertrix.com/">Contact Us<br />contact page</a></li>
</ul>
</div>

*ReplaceURLs as your like.

10. Now save "HTML/Javascript". You are done.