Monday 10 June 2013

Add CSS3 menu bar to blogger blog easily


Hello Readers, in this post we will learn how to add a stylish CSS3 menu bar in your blogger template. Blogger is one of the most used blogging platforms around. I like it very much because you have liberty to edit your template even in the free version unlike many other CMS around. Today I was working on a website’s design and found a great website which will help you to create cool looking menu bars in few minutes. If you do not have much knowledge about HTML, CSS3 and web-designing, this is surely for you. Even many pro designers are using this online tool to create menu bars. We all know CSS3 is one of the latest web designing technologies around and this online tool provide easy to use interface with drag-drop/sliders to customize the menu bars so that you can easily create CSS3 menu bars without even writing a single line code for it. In this post we will check out how to create menu bars with this tool and how to add them in our blogger templates.

CSS3-menu-bar


You can check out a live demo using the above link. Now we should see how this online tool works. You just need to go to this website and start your customizations for the menu bar. You will see a window like this: 
menu bar settings


Recommended articles:

  • You can see many tabs on the top the customization window. Each tab contains the default customizations for menu bar; you can select use sliders and selection boxes to customize all the elements of your menu bar.
  • You can customize all the CSS properties of the menu bar elements like border-radius, Box shadow and text shadow etc with the help of the customization window.
  • After you are done with the customizations, just scroll down. Your code is ready to be implemented.
  • Now it is time to implement this code in your blogger template. I will show it using the menu bar I created, you can simply create your own or use this one:
  • First of all, Login in to your blogger Account.
  • Click on the template tab and take back up of your blog, it is recommended to take back up of your blog before editing your template to avoid any loss.
  • Now click on EDIT template and find the code ]]></b:skin>.
  • Just before this paste the CSS code generated or the following code: 
/*CSS MENU*/
#menu-bar {
  width: 95%;
  margin: 0px 0px 0px 0px;
  padding: 6px 6px 0px 6px;
  height: 34px;
  line-height: 100%;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  box-shadow: 2px 2px 3px #666666;
  -webkit-box-shadow: 2px 2px 3px #666666;
  -moz-box-shadow: 2px 2px 3px #666666;
  background: #413D78;
  border: solid 1px #6D6D6D;
  position:relative;
  z-index:999;
}
#menu-bar li {
  margin: 0px 0px 6px 0px;
  padding: 0px 6px 0px 6px;
  float: left;
  position: relative;
  list-style: none;
}
#menu-bar a {
  font-weight: bold;
  font-family: arial;
  font-style: normal;
  font-size: 12px;
  color: #E7E5E5;
  text-decoration: none;
  display: block;
  padding: 6px 20px 6px 20px;
  margin: 0;
  margin-bottom: 6px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  text-shadow: 2px 2px 3px #000000;
}
#menu-bar li ul li a {
  margin: 0;
}
#menu-bar .active a, #menu-bar li:hover > a {
  background: #0399D4;
  background: linear-gradient(top,  #EBEBEB,  #A1A1A1);
  background: -ms-linear-gradient(top,  #EBEBEB,  #A1A1A1);
  background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
  background: -moz-linear-gradient(top,  #EBEBEB,  #A1A1A1);
  color: #444444;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
  background: none;
  border: none;
  color: #666;
  -box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#menu-bar ul a:hover {
  background: #4C478C !important;
  color: #FFFFFF !important;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  text-shadow: 2px 0px 2px #FFFFFF;
}
#menu-bar ul {
  background: #DDDDDD;
  background: linear-gradient(top,  #FFFFFF,  #CFCFCF);
  background: -ms-linear-gradient(top,  #FFFFFF,  #CFCFCF);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
  background: -moz-linear-gradient(top,  #FFFFFF,  #CFCFCF);
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 34px;
  left: 0;
  border: solid 1px #B4B4B4;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-box-shadow: 2px 2px 3px #222222;
  -moz-box-shadow: 2px 2px 3px #222222;
  box-shadow: 2px 2px 3px #222222;
}
#menu-bar li:hover > ul {
  display: block;
}
#menu-bar ul li {
  float: none;
  margin: 0;
  padding: 0;
}
#menu-bar ul a {
  padding:10px 0px 10px 15px;
  color:#424242 !important;
  font-size:12px;
  font-style:normal;
  font-family:arial;
  font-weight: normal;
  text-shadow: 2px 2px 2px #FFFFFF;
}
#menu-bar ul li:first-child > a {
  border-top-left-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-right-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topright: 5px;
}
#menu-bar ul li:last-child > a {
  border-bottom-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;
}
#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#menu-bar {
  display: inline-block;
}
  html[xmlns] #menu-bar {
  display: block;
}
* html #menu-bar {
  height: 1%;
}
  • Now you need to add the HTML code for your menu bar.
  • Go to the Layout section of your blog and add a HTML/JavaScript gadget and place it just under the header and before the main blog body.  
  • Leave the title blank and paste the HTML code generated or the following code in the text area: 
 <ul id="menu-bar">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">Drop Down Menu</a>
  <ul>
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
   <li><a href="#">Sub Menu 3</a></li>
   <li><a href="#">Sub Menu 4</a></li>
  </ul>
 </li>
 <li><a href="#">
Drop Down Menu</a>
  <ul>
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
   <li><a href="#">Sub Menu 3</a></li>
   <li><a href="#">Sub Menu 4</a></li>

  </ul>
 </li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>
  • Add the page links into your menu bar and save the HTML/JavaScript gadget.
  • Click on View Blog and check out this cool menu bar in action.

You have just added a cool CSS3 menubar in your blogger blog. You can create as many as you can using this tool. If you face any problem with any step featured in this tutorial you can comment here. I will be glad to help you.

You can also check out our blogger tips and tricks section for more blogger widgets and blogger tutorials.

If you like my work; you can show your regards by hitting the facebook like button, following us on Twitter or Google+ and subscribing to us. You can also share this post with your social networks using the buttons or give us a link back by copying one of the links below.

Do you like this post? Please link back to this article by copying one of the codes below.

URL: HTML link code: BB link code:
author pic
Author: Mohammad Zafar Ahmad
Zafar Ahmad is PHP/Java Developer and a Passionate Blogger. He likes to write about Blogging tips, SEO tips, Blogger Widgets, Smart phones, Tablets and Online Earnings. You can find him on Facebook, Twitter or Google+

3 comments:

  1. hey, Now its shown on my blog but d problem is..it is not sliding mean not drop down......why..

    ReplyDelete
  2. The drop down menu is not dropping, why?

    ReplyDelete
  3. @Navdeep Singh
    @Prajawal Gautam

    Did you check the demo..It is working and i have also added a similar menubar..There must be some other problem..

    ReplyDelete