Horizontal Menu Using Only CSS3 For Blogger

Every blog/website must have a horizontal/vertical menu at top of blog which helps readers to easily navigate through your blog,also it helps you to arrange your important links on the menu.Today I am sharing a beautiful horizontal menu which works with pure CSS3 and it is designed by dynamicdrive.When any user hovers on it a brick appears on the link which increase the beauty of the menu,I also really like it :) As I mentioned the biggest advantage of this menu is it works with only CSS3,no any single image is used in this menu also the hover brick is made with CSS3.As it works with only CSS3 it has some limitations.Here is a one back point of the menu is it's not a drop down menu it is a single horizontal menu :( It is good for small blogs which have less number of links.Now without waiting anymore lets go to the tutorial.See the preview of the menu in below image.

Live Menu Demo ▼

How To Add This Menu To Blogger?

1. Go to Blogger Dashboard > Layout
2. Click On Add a Gadget Link Tab (Below Header)
3. Paste Code And Save It.

Click On Image To Enlarge

<style type="text/css">

/* Only CSS3 Horizontal Menu For Blogger By http://www.helperblogger.com/ */

div.topbar {
 height: 16px;
 background: #e16031;
}

ul.claybricks {
 font-weight: bold;
 width: 100%;
 background: #e3e490;
 padding: 6px 0 6px 0;
 margin: 0;
 text-align: left;
        font-family: calibri;
}

ul.claybricks li {
 display: inline;
}

ul.claybricks li a {
 color: black;
 padding: 6px 8px 4px 8px;
 margin-right: 20px;
 text-decoration: none;
}

ul.claybricks li a:hover, ul.claybricks li a.selected {
 color: white;
 background: #5d4137;
 background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
 background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
 background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
 background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
 background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
 -moz-box-shadow: 0 0 5px #595959;
 -webkit-box-shadow: 0 0 5px #595959;
 box-shadow: 0 0 5px #595959;
 padding-top: 17px;
 padding-bottom: 6px;
}

/* Only CSS3 Horizontal Menu For Blogger By http://www.helperblogger.com/ */

</style>



<div class="topbar">
</div>
<ul class="claybricks">
 <li><a href="http://www.helperblogger.com/">Home</a></li>
 <li><a href="#">CSS Codes</a></li>
 <li><a href="#">Forums</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">Gallery</a></li>
 <li><a href="http://www.helperblogger.com/">Blogger Widgets</a></li>
</ul>

Now replace the links and link name with your own in above highlighted lines.

Finally save it and you are done :)