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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoMs8n2ORpZQsrBz9-HUKD8DO1lNawkxrDBWIe4bs4dHo-BS6zOuP2iU80Evauo9igVaQ0ueEPETg7LomLzS8rG5K_3y98tmzp_L6rKqZUGcneo_Vw0FatDuWHU6Ldp6c4OsXzEDNkrZU/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9KaXK-HSKAUaKAkdRUmXoP9VCqxM1tPhoi_i8wnqM05hNjC0WEqtKrd1mp_EiyfCvC0ZH6w3Z5cUg7sgQBXPCOu14jiPdq8zeO7EY-BDq9QNr00WjaZrn-jeCTF0_9m4xrYv2oyvy6eE/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyu8rwXFcId-IWvXdo5dOO431BsfhF9Gb1TN-FHKVIaSTvZeSGEflOg_lyu8Q0FM2TpFoIZFXlzvrXWoW5Bzs4JJBNBBMEKOPHTiQT3TCMx4hrdcYZqleW0PxF6rJex3hxOca6rXvWIXc/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.! 

Artikel belajar seo