Add a New Glowing Horizontal Menu With Box Hover Effect

Add a new and awesome Glowing Horizontal Menu in Blogger which made by the pure CSS codes and only two images are used in it and this concept is very clear and very easy in blogging, as you get one point that this is pure CSS made menu, so there will not come any error in installation in it. So, use it and tell us your experience with us. :)

Live Demo

Add New Glowing Horizontal Menu With Box Hover Effect

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Layout
• Add a HTML/JavaScript Gadget
• Paste below code in it.

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<style>
#RWGmenu-wrapper {
background:#215175 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuJ7S_3zUpPh-sWaQ1QeebhUg2gzYCXV3LXEFim9FO4eAT2lzq-u6efEuWIL93klYL6VoobHWSgoTni7vME4oXXeVNu09fhhbkP7wfpVEzgHRW4Izt-Vd8Cu0xKhQro531e9U39LqUsIoi/s1600/RWGmenu-bg.PNG) repeat;
width:960px;
height:43px;
font:normal 15px 'Oswald', sans-serif;
text-transform:uppercase;
margin-bottom:15px;
}

#RWGmenu ul {
text-align:center;
padding:12px 0 8px;
}

#RWGmenu li {
display:inline;
margin-right:10px;
}

#RWGmenu li a {
color:#fff;
text-decoration:none;
padding:8px 10px;
}

#RWGmenu li.selected a {
color:#fff;
font-weight:700;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdoaYrF_EEyWNY_v8Hx8DVt6j0XhCONycrzL8-5CY0xjh86-RFzBfr2RP5MG-cnGo1fQtZyDmvTPeVppGq24ffwk4gSHm-Ishqz0ISnwvqwJGi7U_blY0x4MlqxxVg-HDHZJtOY7GC1JHp/s1600/bgmenu_a.jpg) no-repeat center center;
}

#RWGmenu li a:hover {
text-decoration:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdoaYrF_EEyWNY_v8Hx8DVt6j0XhCONycrzL8-5CY0xjh86-RFzBfr2RP5MG-cnGo1fQtZyDmvTPeVppGq24ffwk4gSHm-Ishqz0ISnwvqwJGi7U_blY0x4MlqxxVg-HDHZJtOY7GC1JHp/s1600/bgmenu_a.jpg) no-repeat center center;
}

</style>

<div id='RWGmenu-wrapper'>
<div class='RWGmenu section' id='RWGmenu'>

<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Youtube</a></li>

<li><a href='#'>Widgets</a></li>
<li><a href='#'>News</a></li>

<li><a href='#'>Privacy</a></li>
</ul>

• Save your Widget and Be Enjoy it.

Make Changes....!

• Replace it # with your link
• Replace it orange color with your tab name. 
• Replace it 960 according to your  blog's width (Optional)

Final Words.....!

This Menu has many functionality like it looks PRO it's hover effect also very PRO, this is responsive and you can change it width according to your blog's width. So, I think you should definitely use it for your blog's professional.