You might also like

Loading...

Prompt
0%

Add Glossy Style Curved Navigation Menu Bar

July 25, 2015 Blogger MenuCSS Menu Bar
-- min read -- words
0 Prompts
How To Add Glossy Style Curved Navigation Menu Bar For Blogger

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 */
.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;
}
6. Go to blogger and click Layout
7. Click Add Gadget and select 'HTML/Javascript
8. Paste below code.
<ul class="bloggersstand_glossymenu1">
 <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>
 *Change All # With Your Links.

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.
You May Also Like
Discover more amazing prompts

Scan QR Code

Scan with your phone to open this prompt