Glowing Horizontal Menu With Hover Effect For Blogger

• Beautiful Hover Effect.
• Beautiful Cool Black Color.
• Nice Glowing Feature. 
• Pure CSS widget.

How To Add Horizontal Menu Bar To Blogger

• Sign up to your Blogger Dashboard >> Your  site.
• Now click on the layout Tab there.
• Click on the Add new Gadget link there.
• A menu will pop up with a list of Gadgets.
• Select the HTML JAVASCRIPT gadget from the list.
• A box will pop up with open space.
• Now copy the below code and paste it inside the HTML JavaScript box.

<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/AVvXsEiXlB_CIPp8RsRfeDZl5-B3uYDeNZcZkTk3rCAgZMRTDQrR81vqFPGIg5mWqGsLP-2V4D8oh5xIO5sBVQrGIeX_pir4itPeeAoL3qYqpE5Ib1RBSIZQapuGktTnKe_ltf7o4XuVkaqRDcyr/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/AVvXsEhdzQ6oa956_Q4cxZ2Lef0PoAEUYYuqu6EY5XlgYoV8mJQ3NYpeGg5WYsU9PuOzT6RcZfV8o5Gy7f53jdT4oRhWMDsuNkYnqzPxSYGx5Pj1MzNNX0nCppwZEWZ5KA3OwLf_hXXrdagLQVbg/s1600/bgmenu_a.jpg) no-repeat center center;
}

#RWGmenu li a:hover {
text-decoration:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdzQ6oa956_Q4cxZ2Lef0PoAEUYYuqu6EY5XlgYoV8mJQ3NYpeGg5WYsU9PuOzT6RcZfV8o5Gy7f53jdT4oRhWMDsuNkYnqzPxSYGx5Pj1MzNNX0nCppwZEWZ5KA3OwLf_hXXrdagLQVbg/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>

Customization in the Script or Code

• Replace 960 with according to your Blog width.
• Replace Orange color Text with your Page or URL name where you want peoples to redirect.
• Replace the # with your desired URL OR Page URL to which you want peoples to navigate.
• Now hit the Save Button...........Because you have done this Tutorial.