Add Glossy Style Curved Navigation Menu Bar

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/AVvXsEgavB8x1cyFM2vs16tx0PnXZkyqSI4L_tVqGG-GjjncRUh8RcbBbnBjeMqe_6VJgniFWxyro_ZahmIUG1oo6Fnn6hWTQ4HxLC2DczH9_Jx0DWo00Hum0SZ3mYuWm9_5ISy4iY4vLA7a0IY/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/AVvXsEhQPCx4oKv8yo6AWzoJe7M-YP0UBQJrDOYRq1r5rSyukv8mVYl_ZA6xm1elIHfHOIOtcmdUABuVKfW_MZ3cFXmX8622sBqvvbCljsxFyzZFMSZteJQTTbbzBagPKX1norzVsYgx5haXgoQ/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/AVvXsEjCvdDV44mYFFXzOQybpw_uBtg4-LkZaDyTBICbYosOtbbgOHdvhA5tMPVzrKz-VtLa4r-Da_4Peh1o-fQ4YM4vrQsiu_7M0LVC7iKVrlevruBmy9lxLHGRWLHm7ZePfOasrBv0tB4d4n8/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. 

Artikel belajar seo