How To Add Glossy Style Curved Navigation Menu Bar For Blogger
1. Log in to blogger account
2. Now select "Template"
3. Now Click EDIT HTML Button"
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin>
/* The CSS Code for the menu starts here bloggersstand.blogspot.com */6. Go to blogger and click Layout
.bloggersstand_glossymenu1{
position: relative;padding: 0 0 0 34px;margin: 0 auto 0 auto;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1K4m8n_rR1t9eNF1JiFQoNY3FORpoPH9KuQsyS4SySXssik6hfBguhps-b4FN391hwazK3P8hHiU0p6QE2eyhvgLyrPtdHaObttH1dXojAU04SS71Eyqx6yY-Ur3WKzpnm1jP5Z72YAk/s1600/btrix_menupu_bg.gif) repeat-x;
height: 46px;
list-style: none;
}
.bloggersstand_glossymenu1 li{
float:left;
}
.bloggersstand_glossymenu1 li a{
float: left;display: block;color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px;
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.bloggersstand_glossymenu1 li a b{
float: left;display: block;padding: 0 24px 0 8px;
}
.bloggersstand_glossymenu1 li.current a, .bloggersstand_glossymenu1 li a:hover{
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjH6VYSy-OMlKtp5waJrpx6jzWHscsQ-vXnkAU926Gl4OMXBhBuKA2J5r1vwLnDv2jpleyxpXQQ0-zfmzbvhVOr4iW6DM4IUN94UNVDs9Hcb3u0Z3SvJvp-qzMkkDzMNmsSONJ3m9j9l8/s1600/btrix_menupu_hover_left.gif) no-repeat;
background-position: left;
}
.bloggersstand_glossymenu1 li.current a b, .bloggersstand_glossymenu1 li a:hover b{
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-0F7SZGvpHhVxB5J0cj3E2steod22Wi-nD7E8ySye5HEG0geSJsW-lHrevLKUs_CMDxASURuJAaSnKen9WYVIhL5h91NO0gdnGtJKLMa7BSUhpRDBodyCLEKh3SdLmSnXbBZnWVYQ6IU/s1600/btrix_menupu_hover_right.gif) no-repeat right top;
}
7. Click Add Gadget and select 'HTML/Javascript
8. Paste below code.
<ul class="bloggersstand_glossymenu1">*Change All # With Your Links.
<li class="current"><a href="#"><b>Home</b></a></li>
<li><a href="#"><b>CSS</b></a></li>
<li><a href="#"><b>Forums</b></a></li>
<li><a href="#"><b>Webmaster Tools</b></a></li>
<li><a href="#"><b>JavaScript</b></a></li>
<li><a href="#"><b>Contact Us</b></a></li>
</ul>
9. Now save your HTML/Javascript'. Done!
If you have any query regarding Glossy Curved Style Navigation Menu Bar for blogger/blogspot with pink glossy colour hover effect on it.Feel free to ask,just drop your comment below.