CSS3 Social Icons Navigation Bar With Google Search Box

0
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.!
CSS3 Navigation Bar With Google custom Search Box and social media icons buttons on it,best Css html navigation menu bar for blogspot with search box and social profile links included.
Today I'm going to explain how to add Search Box Style CSS3  navigation menu bar With soci...
SUMMARY

CSS3 Navigation Bar With Google custom Search Box and social media icons buttons on it,best Css html navigation menu bar for blogspot with search box and social profile links included.

You Might Also Like:

We hope this article helped you to learn CSS3 Social Icons Navigation Bar With Google Search Box. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "CSS3 Social Icons Navigation Bar With Google Search Box" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand