Nov 12, 2013

Stylish Css3 Menu Bar Customized For Blogger

Posted by on 11/12/2013 in ,
css3 menu bar for blogger
Click On Image for Demo

Have you been looking for a cool pure css3 styled navigation menu-bar for blogger? Well I must say that your search overs now after you have landed on our page. Screenshot of the navigation menu-bar above is created with pure css-properties, no image, no jQuery is used.

Let's see how to install it in your blogger template.
  • Open Blogger Dashboard → Template → Html Editor
  • Search for (pressing Ctrl+F) ]]></b:skin> 
  • Add below given css code just above it.

Css

#header-navigation {
    float: left;
}
#header-navigation span {
    display: block;
}
#header-navigation ul {
    margin: 0;
  float:left;
  position:relative;
  top:0
}
#header-navigation ul > li {
    margin: 0 0 0 1px;
  float:left;
  list-style:none;
}
#header-navigation ul > li > a {
    display: block;
    height: 100px;
    width: 100px;
    text-align: center;
    color: #ffffff;
    border-radius: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  text-decoration:none;
}
#header-navigation ul > li > a:hover, #header-navigation ul > li > a:focus {
   padding-top:15px;
  -webkit-transition:.1s linear;
  transition:.1s linear 
}
.nav-icon {
    display: block;
    padding-top: 15px;
    vertical-align: top;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 30px!important;
    line-height: 25px !important;
}
#header-navigation ul li a .nav-text {
    font-size: 16px;
    line-height: 15px;
    text-transform: uppercase;
}
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}


  • Now search for <div class='header'> by (pressing Ctrl+F)
  • And add below given code just below/after it.

Html

<nav id="header-navigation">
<ul>
<li style="background-color: #f87912">
  <a href="http://www.trackmyblog.com"><div class="nav-icon">
<i class="entypo-home"></i>
</div>
<div class="nav-text">Home</div>
</a>
</li>
<li style="background-color: #FFCC00">
<a href="#" >
<div class="nav-icon">
<i class="entypo-user-add"></i>
</div>
<div class="nav-text">Elements</div>
</a>
</li>      
<li style="background-color: #AADD00">
<a href="#">
<div class="nav-icon">
<i class="entypo-publish"></i>
</div>
<div class="nav-text">Pages</div>
</a>
</li>
<li style="background-color: #00CCCC"><a href="#">
<div class="nav-icon">
<i class="entypo-layout"></i>
</div>
<div class="nav-text">Portfolio</div>
</a>
</li>
<li style="background-color: #666699">
<a href="#">
  <div class="nav-icon">
<i class="entypo-signal"></i>
</div>
<div class="nav-text">Blog</div>
</a>
</li>
<li style="background-color: #FF3333">
<a href="#">
<div class="nav-icon">
<i class="entypo-users"></i>
</div>
<div class='nav-text'>Contact</div>
</a>
</li>
</ul>
</nav


  • Replace # with link url of your blog and save the template.

Congratulations you have successfully added the widget. Need more help in customization contact us any time by leaving your comments or messages.

Note: If icon are not working then add below given code just after <head> tag in your template.


<link href='http://weloveiconfonts.com/api/?family=entypo' rel='stylesheet' />


4 comments:

  1. UnknownDecember 01, 2013

    Can't find the header div

    ReplyDelete
    Replies
    1. UnknownDecember 01, 2013

      Give me url of your blog, I'll tell you where to place this menu.

      Delete
  2. Lit ultrabar indiaApril 21, 2014

    The resource that you mentioned here is something that I have been looking from quite a time. And finally it ended with such a nice blog post. Don’t have words to thank you.

    ReplyDelete

© 2012 Track My Blog | Design Your Blogger With Us designed by Template Trackers