Torn - An HQ Navigation Menu With Hover Effects

We have shared a lot of widgets in the recent phases of our blog. But, we have never shared an HQ widgets. An HQ widget will be of really high quality in its appearance as well as coding. We have worked very little on this widget as it is really simple to create and if you work hard, you can also create it.Torn is a simple and elegant navigation menu that looks professional and it also has a hover effect. This widget is fully customizable according to your needs. You are free to share this widget . But, please provide a link back to us. This widget is also a mixture of HTML and CSS so dont worry on page loading issues as this widget only has the capability to speed up the page . A lot of menu's and widgets are available in our inventory. You can choose any one if you didn't like this one. Now lets add the widget to your blog. Follow the steps carefully so that no problem persists .Sorry, Guys, right now there is no live demo for this widget. I wil add it soon .

Steps

1. Go To Blogger . Copy the code from below .
2. You can add it in the template or you can add it in the HTML Widget.
3. Save it anywhere . Done !

<style>
 ul.kidnav li {
display: block;
padding-left: 10px;
margin: 0px;
float: left;
padding: 13px 20px;
border-right: 1px solid #262934;  
}
.kidnav {
float: left;
background: #2E2E2E;
width: 910px;
position: relative;
background: -webkit-gradient(linear, left top, left bottom, from(#20263c), to(#414964));
background: -webkit-linear-gradient(#20263c, #414964);
background: -moz-linear-gradient(#20263c, #414964);
background: -ms-linear-gradient(#20263c, #414964);
background: -o-linear-gradient(#20263c, #414964);
background: linear-gradient(#20263c, #414964);
border-radius: 5px;
margin-top: 30px;
text-transform: uppercase;
text-align: center;
font-size: 15px;
font-weight: 700;
}
ul.kidnav li:hover {
background: #E95D0C;
}
#kidnavtorn {
margin: auto;
width: 920px;
}
.kidnav a {
color: #d5e5f4;
text-decoration: none;
}
</style>
<div id='kidnavtorn'>
<ul class='kidnav'>
<li><a href='http://www.bloggerkid.in'>Tutorials</a></li>
<li><a href='http://www.bloggerkid.in'>Widgets</a></li>
<li><a href='http://www.bloggerkid.in'>Resources</a></li>
<li><a href='http://www.bloggerkid.in'>About Us</a></li>
<li><a href='http://www.bloggerkid.in'>Terms of Use</a></li>
<li><a href='http://www.bloggerkid.in'>Contact Us</a></li>
<li><a href='http://www.bloggerkid.in'>Contributers</a></li>
</ul>
</div>

Final Words

Now , as you have succesfully added the widget, please share the widget if you liked it. I will surely work more on widgets and provide greater widgets for you readers. You are my success, please keep on visiting .