Stylish Css3 Menu Bar Customized 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' />

Stylish Css3 Menu Bar Customized For Blogger

Css

Html

0 comments:

Post a Comment

Recent Post

Labels

Blog Archive