How to Add Beautiful Horizontal Menu Bar Using CSS

Hey we have seen blogger template have a “horizontal menu bar” in some default template, and in some template menu bar in left side or right site,in previous post i was posted an article about “How To Add Horizontal menu bar in Google style“but today I’m sharing a beautiful horizontal menu bar,which menu bar is created only using css,when some of the reader hover on the text it brick appear on the link, which increase the beauty of the menu bar,i love this one, one of the advantage of this menu bar, in this menu bar no images is used,this menu bar is created only pure css,it is a good one menu bar for the small blog,which have less number of post and link,let go how to add this “Beautiful men bar”in your blogger blog,

How To Add This Menu Bar

First log in account>>Layout>>Add Gadget >>HTML Copy the below code past it

<style type=”text/css”>

/* Only CSS3 Horizontal Menu For Blogger By https://www.nafisflahi.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-gradientundefinedtop, #5d4137 0%, #41251b 12%, #2c0f05 100%);
background: -webkit-gradientundefinedlinear, left top, left bottom, color-stopundefined0%,#5d4137), color-stopundefined12%,#41251b), color-stopundefined100%,#2c0f05));
background: -webkit-linear-gradientundefinedtop, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -o-linear-gradientundefinedtop, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -ms-linear-gradientundefinedtop, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: linear-gradientundefinedtop, #5d4137 0%,#41251b 12%,#2c0f05 100%);
filter: progid:DXImageTransform.Microsoft.gradientundefined 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 https://www.nafisflahi.com/ */

</style>

<div class=”topbar”>
</div>
<ul class=”claybricks”>
<li><a href=”https://www.nafisflahi.com/”>Home</a></li>
<li><a href=”#”>How To</a></li>
<li><a href=”#”>Blogger Tips</a></li>
<li><a href=”#”>Blogger widget</a></li>
<li><a href=”#”>make money</a></li>
<li><a href=”https://www.nafisflahi.com/”>Contact us</a></li>
</ul>