Horizontal Menu Using Only CSS3 For Blogger - Helper Blogger

Blogger Widgets | Templates | Tutorials


Sunday, 8 July 2012

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/ */


<div class="topbar">
<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>

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

Finally save it and you are done :)


  1. This comment has been removed by the author.

  2. thanks for the tip all this post are really helpful keep it up

    from a dissertation writing service

  3. thank's


  4. your post makes me inspired. and thank you for giving me very grateful to be visiting your site.
    allow me to share the Harga Hp Android


If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM