TRENDING NOW

CSS hover Effect Navigation Menu bar

Today I'm going to explain how to add Css Hover Effect With Image blogger navigation menu bar.Navigation bar is very important part of our website.It helps visitors to navigate our website and make easy to them find relevant content of our site.If you use some cool and attractive CSS hover effect with icon display menu bar for blogger it help to look your website awesome.just read this tutorial from this tutorial you can learn how to add CSS hover effect on your navigation bar widget.We are using CSS language for this navigation menu bar.To grab this menu bar for blogger website just follow the steps mentioned below.

How to add Css Hover Effect With Icons Navigation Menu Bar

1. Go to Blogger Dashboard > Template
2. Backup your template
3. Click on Edit HTML
4. Find  ]]></b:skin>
5. Paste below code just above it
/* The CSS Code for the menu starts here bloggersstand.blogspot.com */
#bstand-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}

#bstand-nav li {float: left;}

#bstand-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}

#bstand-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}

#bstand-nav li a img {position: relative;top: 0;transition: top .5s ease;}

#bstand-nav li a:hover {cursor: pointer;}

#bstand-nav li a:hover img {top: -85px;}

#bstand-nav li a:hover .aname {top: 85px;}

#bstand-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}

#bstand-nav li:nth-child(2) a {background: #9bc704;}

#bstand-nav li:nth-child(3) a {background: #0dc3ff;}

#bstand-nav li:nth-child(4) a {background: #51a2ec;}

#bstand-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}

6. Go to blogger Layout 
7. Click Add Gadget and select 'HTML/Javascript'
8. Paste below code.
<div id="bstand-nav">

<li>
    <a href="#"><span class="aname">Homes</span>
      <img src="http://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" />
    </a>
  </li>
<li>
    <a href="#">
      <span class="aname">Download</span>
      <img src="http://2.bp.blogspot.com/-TcXder58ssQ/Ug5ASx8pT0I/AAAAAAAAA0o/5UdA4_gLnV8/s1600/btrix-download.png" />
    </a>
  </li>
<li>
    <a href="#">
      <span class="aname"> MySql</span>
      <img src="http://2.bp.blogspot.com/-umlQ7fKXobk/Ug5AT2bLnnI/AAAAAAAAA08/yrQHl6qPMH8/s1600/btrix-mysql.png" />
    </a>
  </li>
<li>
    <a href="#">
      <span class="aname"> Html</span>
      <img src="http://2.bp.blogspot.com/-2-iy8RJ92V8/Ug5ASDCru-I/AAAAAAAAA0c/GOBCPpZlA04/s1600/Btrix-html.png" />
    </a>
  </li>
<li>
    <a href="#">
      <span class="aname">Contact</span>
      <img src="http://4.bp.blogspot.com/-vsm9s0yQr9I/Ug5ASjqawnI/AAAAAAAAA0k/rqb01AbGaFw/s1600/btrix-contact.png" />
    </a>
  </li>
</div>
*Change All # With your Link.

9. Now save your HTML/Javascript'..Done !!

If you have Any Query regarding This CSS Hover Effect with Icons Navigation Menu Bar..Feel Free To Ask,Just Drop Your Comment. 
      
Dark Purple CSS Hover effect Navigation Menu Bar
Today I'm going to explain how to add CSS3 Dark Purple Style Hover Effect blogger navigation menu bar.Navigation bar is very important part of our website.It helps visitors to navigate our website and make easy to them find relevant content of our site.If you use some cool and attractive CSS3 hover effect menu bar for blogger it help to look your website awesome.just read this tutorial from this tutorial you will learn how to add Dark Purple CSS hover effect on your navigation bar widget.We are using CSS language for this navigation menu bar.To grab this menu bar for blogger website just follow the steps mentioned below.

How To Add Dark Purple CSS Hover Effect Navigation Menu Bar

1. Log in to blogger account
2. Now select "Template"
3. Now Click EDIT HTML Button"
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin>
/* The CSS Code for the menu starts here bloggersstand.blogspot.com*/
#navigation1 { width:900px;height: 45px; background: url(http://2.bp.blogspot.com/-ZcNk0q2D_ns/USc-WVQpr5I/AAAAAAAAG24/1qFDgndtT2E/s1600/nav-bg.gif) repeat-x 0 0;
border:inherit 2px #000000;
-moz-border-radius-topleft: 10px;-moz-border-radius-topright:10px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px; }
#navigation1 ul { list-style: none outside; padding: 8px 0 0 8px; }
#navigation1 li { float: left; display: inline; height: 29px; line-height: 29px; text-transform: uppercase; margin-right: 3px }
#navigation1 li.last { margin-right: 0; }
#navigation1 li a,
#navigation1 li a span { float: left; display: inline; height: 29px; padding-left: 10px; background-position: 0 0; color: #919191; }
#navigation1 li a span { padding-left: 0; padding-right: 10px;  background-position: right 0; }
#navigation1 ul.sf-menu li a:hover,
#navigation1 ul.sf-menu li a:hover span { background-image: url(http://2.bp.blogspot.com/-TdLW8VcsFyk/UgZao7p7vWI/AAAAAAAAAzQ/cmUZwaLl3tM/s1600/bt_nav_hover.png); text-decoration: none; color: #fff; }
#navigation1 li a.clicked,
#navigation1 li a.clicked span { background-position: 0 bottom }
#navigation1 li a.clicked span { background-position: right bottom; }

6. Go to blogger and click Layout
7. Click Add Gadget and select 'HTML/Javascript
8. Paste below code.
<div id="navigation1">
<ul class="sf-menu sf-js-enabled sf-shadow">
<li class="cat-item cat-item-29"><a title="Home" href="#"><span>HOME</span></a></li>
<li class="cat-item cat-item-29"><a href="#" title="Graphics"><span>Graphics</span></a></li>
<li class="cat-item cat-item-31"><a href="#" title="Coding"><span>Coding</span></a></li>
<li class="cat-item cat-item-18"><a href="#" title="inspiration"><span>inspiration</span></a> </li>
<li class="cat-item cat-item-1"> <a href="#" title="Photography"><span>Photography</span></a></li>
<li class="cat-item cat-item-30"><a href="#" title="Freebies"><span>Blogger</span></a></li>
<li class="cat-item cat-item-19"><a href="#" title="Wordpress"><span>Wordpress</span></a></li>
<li class="cat-item cat-item-25"><a href="#" title="Logo"><span>Logo</span></a></li>
<li class="cat-item cat-item-22"><a href="#" title="Contact"><span>Contact</span></a>
</li></ul></div>
*Change # With Your Profile/URL/username

9. Now save your HTML/Javascript'.

If you have Any Query regarding This Dark Purple CSS Navigation Menu Bar..Feel Free To Ask,Just Drop Your Comment. 
      
CSS3 Blue Thin Style
Today I'm going to explain how to add CSS3 Blue Thin Style Hover Effect blogger navigation menu bar.Navigation bar is very important part of our websiteWe are using CSS3 for this navigation menu bar.To add this CSS3 Blue Thin Style Hover Effect  menu bar for blogger website just follow the steps mentioned below.




How To Add CSS3 Blue Thin Style Hover Effect 

1. Log in to blogger account
2. Now select "Template"
3. Now Click EDIT HTML Button"
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin>
/* CSS Code for the menu starts here bloggersstand.blogspot.com */
 #bloggersstand_litemenu {
 width:800px;
 background:#166bea;
 border-bottom: 5px solid #993300;
 border-top: 1px solid #e14d09;
 clear: both;
 overflow: hidden;
-moz-box-shadow: 2px 3px 5px #000000;
-webkit-box-shadow: 2px 3px 5px #000000;
box-shadow: 2px 3px 5px #000000;
border:none 5px #000000;
-moz-border-radius-topleft: 16px;
-moz-border-radius-topright:16px;
-moz-border-radius-bottomleft:16px;
-moz-border-radius-bottomright:16px;
-webkit-border-top-left-radius:16px;
-webkit-border-top-right-radius:16px;
-webkit-border-bottom-left-radius:16px;
-webkit-border-bottom-right-radius:16px;
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
 }
 #bloggersstand_litemenu ul {
 float: left;
 width: 100%;
 }
 #bloggersstand_litemenu li {
 float: left;
 list-style-type: none;
 }
 #bloggersstand_litemenu li a {
 background:#166bea;
 color: #fff;
 display: block;
 font-size: 14px;
 padding: 5px 17px 5px 15px;
 position: relative;
 text-decoration: none;
 }
 #bloggersstand_litemenu li a:hover {
 background:#002660;
 color: #fff;
 }
 #bloggersstand_litemenu li li a {
 background: none;
 background-color: #0d56c4;
 border: 1px solid #0d408d;
 border-top-width: 0;
 color: #fff;
 font-size: 14px;
 padding: 5px 10px;
 position: relative;
 text-transform: none;
 width: 130px;
 }
 #bloggersstand_litemenu li li a:hover {
 background: none;
 background-color: #166bea;
 }
 #bloggersstand_litemenu li ul {
 height: auto;
 left: -9999px;
 margin: 0 0 0 -1px;
 position: absolute;
 width: 160px;
 z-index: 9999;
 }
 #bloggersstand_litemenu li:hover ul {
 left: auto;
 } 
6. Go to blogger and click Layout
7. Click Add Gadget and select 'HTML/Javascript
8. Paste below code.
<div id="bloggersstand_litemenu">
<li><a href="#">Home</a></li>
<li><a href="#">Sub Menu 1</a>
 <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 2</a>
 <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</div>
 *Change # With Your Profile/URL/username

9. Now save your HTML/Javascript'.

If you have Any Query regarding This CSS3 Blue Thin Style Hover Effect Navigation Menu Bar..Feel Free To Ask,Just Drop Your Comment. 
      
Black Classic Style CSS3 Navigation  Bar
Today I'm going to explain how to add  Black Classic Style CSS3 Hover Effect blogger navigation menu bar.We are using CSS3 and HTML for this navigation menu bar.To add this Black Classic Style CSS3 Hover Effect Navigation menu bar widget gadget for blogger website just follow the steps mentioned below.




How To Add Black Classic Style CSS3 Hover Effect Navigation Menu Bar

1. Log in to blogger account
2. Now select "Template"
3. Now Click EDIT HTML Button"
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin>
/* The CSS Code for the menu starts here bloggersstand.blogspot.com */
#bloggersstand_classic-menu{width:900px;background:#222 url(http://4.bp.blogspot.com/-iSR65vMqirU/UcFvtpl7FaI/AAAAAAAAAoI/8dAchRZoF8c/s1600/btrixfooter_bg.png) repeat-x scroll top;color:#ddd;height:35px;-webkit-box-shadow:0 1px 5px #aaa;-moz-box-shadow:0 1px 5px #aaa;-ms-box-shadow:0 1px 5px #aaa;-o-box-shadow:0 1px 5px #aaa;box-shadow:0 1px 5px #aaa;border-bottom:1px solid #000;padding-top:8px;border:none 5px #000000;-moz-border-radius-topleft: 5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
#bloggersstand_classic-menu ul,#bloggersstand_classic-menu li{margin:0 auto;padding:0 0;list-style:none}
#bloggersstand_classic-menu ul{height:35px;width:980px}
#bloggersstand_classic-menu li{float:left;display:inline;position:relative;font:14px Skranji;text-transform:uppercase;}
#bloggersstand_classic-menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#ddd;}
#bloggersstand_classic-menu li a:hover{color:#fff}
#bloggersstand_classic-menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#bloggersstand_classic-menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#bloggersstand_classic-menu label span{font-size:12px;position:absolute;left:35px}
#bloggersstand_classic-menu ul.menus{height:auto;overflow:hidden;width:180px;background:#f1eeed url(http://3.bp.blogspot.com/-7ppDp44Yxtc/UUa_IMHEhpI/AAAAAAAAAjQ/F9QEGUl5S3w/s1600/index.png);position:absolute;z-index:99;display:none;}
#bloggersstand_classic-menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;text-shadow:none}
#bloggersstand_classic-menu ul.menus a{color:#333}
#bloggersstand_classic-menu li:hover ul.menus{display:block}
#bloggersstand_classic-menu a.prett{padding:0 27px 0 14px}
#bloggersstand_classic-menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#ddd transparent transparent transparent;position:absolute;top:14px;right:9px}
#bloggersstand_classic-menu ul.menus a:hover{background:#ddd;color:#333}
.page-bloggersstand_classic-menu{width:70%;margin:18px auto;padding:0;float:right;text-shadow:0 1px 0 rgba(0,0,0,0.7)}
.page-bloggersstand_classic-menu ul{list-style:none;color:#ddd;width:700px;margin:0 auto;padding:0}
.page-bloggersstand_classic-menu ul li{list-style:none;line-height:32px;display:inline-block}
.page-bloggersstand_classic-menu li a{color:#ddd;display:block;font-size:14px;font-family:Arial;position:relative;text-decoration:none;text-transform:capitalize;padding:0 10px}
.page-bloggersstand_classic-menu li a:hover,.page-bloggersstand_classic-menu .selected{color:#fff;text-decoration:none;background: rgba(0,0,0,.4);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset}

6. Go to blogger and click Layout
7. Click Add Gadget and select 'HTML/Javascript
8. Paste below code.
<div id="bloggersstand_classic-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a class="prett" href="#">Drop list</a>
<ul class="menus">
<li><a href="#">Drop list 1</a></li>
<li><a href="#">Drop list 2</a></li>
<li><a href="#">Drop list 3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a class="prett" href="#">Drop list 1</a>
<ul class="menus">
<li><a href="#">Drop list 1</a></li>
<li><a href="#">Drop list 2</a></li>
<li><a href="#">Drop list 3</a></li>
</ul>
</li>
</ul>
</div>
 *Change # With Your Profile/URL/username

9. Now save your HTML/Javascript'.

If you have Any Query regarding This Black Classic Style CSS3 Hover Effect Navigation Menu Bar..Feel Free To Ask,Just Drop Your Comment. 
      
Round Corner CSS Hover Effect Navigation Menu Bar
Today I'm going to explain how to add  Round Corner Style CSS navigation menu bar for Blogger.We are using CSS and HTML for this navigation menu bar.To add this  Round Corner Style CSS Hover Effect Navigation menu bar widget gadget for blogger website just follow the steps mentioned below.



How To Add  Round Corner Style CSS Navigation Menu Bar To Blogger


1. Log in to blogger account

2. Now select "Template"
3. Now Click EDIT HTML Button"
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin>
/* The CSS Code for the menu starts here bloggersstand.blogspot.com */
#roundbar_bloggersstand {
background-image:url(http://3.bp.blogspot.com/-8pMSbMwRMOI/UbbzldiEJcI/AAAAAAAAHs4/gJmkPrCNUVQ/s1600/round_menu.png);
background-repeat:no-repeat;
margin-left:14px;
padding-left:10px;
height:46px;
}
#round_bloggersstand {
float:left;
height:27px;
margin-bottom:0;
font-size:100%;
width:1000px;
line-height:normal;
margin-top:0
}
#round_bloggersstand ul {
list-style:none;
margin:0;
padding:0
}
#round_bloggersstand li {
display:inline;
margin:0;
padding:0
}
#round_bloggersstand a {
float:left;
padding-right:1px;
font-weight:bold;
text-decoration:none
}
#round_bloggersstand a span {
display:block;
padding-left:10px;
padding-right:10px;
padding-top:10px;
font-weight:bold;
height:27px;
color:#FFF;
font-size:100%;
border-left:0 solid #dcdcdc;
margin-right:0;
float:none
}
#round_bloggersstand a:hover span {
color:blue;
background-image:url(http://4.bp.blogspot.com/-g7ZTQu-GcRI/UbbzlWBcXqI/AAAAAAAAHs8/J6xeaPZ5CzI/s1600/round_hover.png);
background-color:maroon;
background-repeat:repeat-x;
height:27px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
font-weight:bold;
font-size:100%;
background-position:0 0
}
6. Go to blogger and click Layout
7. Click Add Gadget and select 'HTML/Javascript
8. Paste below code.
<div id="roundbar_bloggersstand">
<div id="round_bloggersstand">
<ul>
<li id="current"><a href="#" title="home"><span>Home</span></a></li>
<li><a href="#"><span>Albums</span></a></li>
<li><a href="#"><span>Download</span></a></li>
<li><a href="#"><span>Privacy Policy</span></a></li>
<li><a href="#"><span>Lyrics</span></a></li>
<li><a href="#"><span>Music</span></a></li>
<li><a href="#"><span>Videos</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact us</span></a></li>
</ul></div></div>
 *Change # With Your Profile/URL/username

9. Now save your HTML/Javascript'.

If you have Any Query regarding This Round Corner Style CSS Hover Effect Navigation Menu Bar..Feel Free To Ask,Just Drop Your Comment. 
      
CSS3 Social Icons Navigation Bar With Google Search Box
Today I'm going to explain how to add Search Box Style CSS3  navigation menu bar With social icons for Blogger.This CSS3 Navigation menu bar have Rss Feed,Twitter,Faccebook and Google Custome Search Box.Social Icon with Search Box CSS3 navigation menu bar is compatible with all browsers like IE10,Chrome,Safari,Firefrox etc.To add this Search Box Style CSS3 Navigation menu bar widget gadget for blogger website just follow the steps mentioned below.


How To Add CSS3 Social Icons Navigation Bar With Google Custom Search Box

1. Log in to blogger account
2. Now select "Template"
3. Now Click EDIT HTML Button"
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin>
#bloggersstand1nav{border:none 5px #000000;
-moz-border-radius-topleft: 15px;-moz-border-radius-topright:14px;-moz-border-radius-bottomleft:14px;-moz-border-radius-bottomright:14px;-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:14px;-webkit-border-bottom-left-radius:14px;-webkit-border-bottom-right-radius:14px;
border-top-left-radius:15px;border-top-right-radius:14px;border-bottom-left-radius:14px;border-bottom-right-radius:14px;-moz-box-shadow: 2px 3px 5px #000000;-webkit-box-shadow: 2px 3px 5px #000000;box-shadow: 2px 3px 5px #000000;
        width:900px;
 margin: 0 0 0 0px;
 padding: 12px 0 8px 0;
 clear: both;
 background: #696969 left bottom no-repeat; }
#bloggersstand1nav .catList{padding: 4px 0 0 35px;float: left;margin-top:-3px; }
#bloggersstand1nav .pageList{padding: 8px 0px 0 0;float: right; }
#bloggersstand1nav ul li{float: left;margin: 0 18px 0 0 ;}
#bloggersstand1nav a{color: #fff;list-style:none;text-decoration: none;}
#bloggersstand1nav a:hover{color: #919191;}
#bloggersstand1nav li {list-style:none;text-decoration:none;}
#search{margin: -2px 20px 0 0;float: right;  }
#updatesBox { margin-left: 100px; }
6. Go to blogger and click Layout
7. Click Add Gadget and select 'HTML/Javascript
8. Paste below code.
<div class="clearfix" id="bloggersstand1nav">
<ul class="catList">
<li class="cat-item cat-item-5"><a href="#">Home</a></li>
<li class="cat-item cat-item-3"><a href="#">Downloads</a></li>
<li class="cat-item cat-item-6"><a href="#">Tools</a></li>
<li class="cat-item cat-item-4"><a href="#">Css3</a></li>
<li class="cat-item cat-item-4"><a href="#">HTML</a></li>
<li class="cat-item cat-item-4"><a href="#">Tips</a></li>
<li class="cat-item cat-item-31"><a href="#">About</a></li>
<li class="cat-item cat-item-11"><a href="#">Contact Us</a></li>
</ul>
<div id="search">
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
<div>
<input name="cx" type="hidden" value="004972222991511809341:kobh4_l5t3m" />
<input name="ie" type="hidden" value="ISO-8859-1" />
<input class="googleSearchField" name="q" size="20" style="background-color: white; background-image: url(http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border: 1px solid rgb(126, 157, 185); padding: 2px;" type="text" />
<input class="button" name="sa" type="submit" value="Search" /></div>
<input name="siteurl" type="hidden" value="bloggersstand.blogspot.com" /><input name="ref" type="hidden" value="" /><input name="ss" type="hidden" value="" /></form>
<script src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en" type="text/javascript"></script>
    </div>
<div id="updatesBox">
<a alt="Subscribe to RSS" class="updatesIcon" href="http://feeds.feedburner.com/bloggersstand" target="_blank" title="Subscribe to RSS" style="margin-left: 80px;"><img src="http://2.bp.blogspot.com/-iRYvrQpas4E/UacS9R6gOAI/AAAAAAAAAk0/lRxT1hf8nFE/s1600/btrix_RSS-icon.png" style=""></a>
<a alt="Follow Us" class="updatesIcon" href="http://twitter.com/bloggersstand" target="_blank" title="Follow Us"><img src="http://2.bp.blogspot.com/-T1BVHhy333A/UacS9QEmW0I/AAAAAAAAAk8/mr7iCzFgKkE/s1600/btrix-twitter-icon.png" /></a>
<a alt="Become a Fan" class="updatesIcon" href="http://www.facebook.com/bloggersstand" target="_blank" title="Become a Fan"><img src="http://1.bp.blogspot.com/-VPaDm54iQAo/UacS9Wdw4mI/AAAAAAAAAk4/THLdyrwGBpM/s1600/btrix-facebook-icon.png" /></a></div>
</div>

  • Change # with your links.
  • Change bloggersstand with your Feedburner ID 
  • Change bloggersstand with your Facebook username
  • Change bloggersstand with your Twitter Username


9. Now save your HTML/Javascript'. Done.! 
      
Underline CSS  Hover Effect Navigation Menu Bar
I'm going to explain how to add CSS Underline Hover Effect navigation menu bar for Blogger.This Underline navigation menu bar is compatible with all browsers like IE10,Chrome,Safari,Firefrox etc.To add this Search Box Style CSS3 Navigation menu bar widget gadget for blogger website just follow the steps mentioned below.



How To Add CSS Underline Hover Effect Navigation Menu Bar

1. Log in to blogger account
2. Now select "Template"
3. Now Click EDIT HTML Button"
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin>
/* The CSS Code for the menu starts here bloggersstand.blogspot.com */
#arrowunderlinebloggersstand{
list-style-type:none;
margin:0;
padding:0;
text-align:center;
font: bold 16px Georgia;
}
#arrowunderlinebloggersstand li{
display:inline;
margin-right:25px;
}
#arrowunderlinebloggersstand li a{
position:relative;
color:black;
padding-bottom:8px;
text-decoration:none;
}
#arrowunderlinebloggersstand li a:hover{
border-bottom:3px solid #25bd0d;
}
#arrowunderlinebloggersstand li a:hover:after{
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px;
bottom: 0;
border-width:5px;
border-style:solid;
border-color: transparent transparent #25bd0d transparent;
}
6. Go to blogger and click Layout
7. Click Add Gadget and select 'HTML/Javascript
8. Paste below code.
<div id="arrowunderlinebloggersstand">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Download</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact Us</span></a></li>
</ul>
</div>
*Change All # With Your Links.

9. Now save your HTML/Javascript'. Done!