Css3 Menu Bar With Google Custom Search Box and Social Buttons

This is a Special post. In this post i'll tell you about Css3 Menu Bar. In this menu bar specially add Social buttons like RSS, Facebook and Twitter and also added Google custom Search Box. This menu bar work good with any latest internet browser. It is easy to add in blogger just Follow Steps:

ScreenShot

Step 1: Login to Blogger>template>Edit HTML

Step 2: Find the Code ]]>

.

Step 3: Copy the Following Code and Paste before ]]>

.

#btrix1nav{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; }
#btrix1nav .catList{padding: 4px 0 0 35px;float: left;margin-top:-3px; }
#btrix1nav .pageList{padding: 8px 0px 0 0;float: right; }
#btrix1nav ul li{float: left;margin: 0 18px 0 0 ;}
#btrix1nav a{color: #fff;list-style:none;text-decoration: none;}
#btrix1nav a:hover{color: #919191;}
#btrix1nav li {list-style:none;text-decoration:none;}
#search{margin: -2px 20px 0 0;float: right;  }
#updatesBox { margin-left: 100px; }

Step 4: Click on Save Template

Step 5: Now go to layout> Add Gadget > HTML/JavaScript

Step 6: Paste below code in Box.

<div class="clearfix" id="btrix1nav">
<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="blogger2wordpress.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/blogger2wordpress" target="_blank" title="Subscribe to RSS" style="margin-left: 80px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb81eCwpfYjia3-OL6t1YUyJbjnSafVDundj-DACbQTIpDWFsPMm9lwnbbvyo6msZbNsawk4eDRtHkzoyPhAtNe36xEpDg4baiHtNZkBq-bwTGeb3iOpMyeYw6nHiKyN0fKPAj7w__Bwg/s1600/btrix_RSS-icon.png" style=""></a>
<a alt="Follow Us" class="updatesIcon" href="http://twitter.com/blogger2wordpress" target="_blank" title="Follow Us"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIp1iUO8Jet2CfQECOriOv7Q_u-uKCUdd7HMOi8Ynlu_P3nZUNx1scf83vdtiZ1yJa_7wvo2Hn5AEAelkQGzJKzXPD-zMTx72QyXFMHLCoBum8QgQbDrdnNan7ZJfAnduCI38tcg5DF-k/s1600/btrix-twitter-icon.png" /></a>
<a alt="Become a Fan" class="updatesIcon" href="http://www.facebook.com/blogger2wordpress" target="_blank" title="Become a Fan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ZDEG1Yu1F62VJFVmLYgo2hxTcdGp5v4O1DUgaz1ms1GXSOWdOKMVdEP072vDEZGefYxXmCubG8jB5h8xCiXsOjUoF_bxksWg3TTgpMXyjR4j-RoU95aiaa1Q-CcsAgB1UgJyTIPPcJA/s1600/btrix-facebook-icon.png" /></a></div>
</div>

Replace # with your Links and Red color 

Replace blogger2wordpress with your RSS ID 
Replace blogger2wordpress with your Facebook username
Replace blogger2wordpress with your Twitter Username

Step 7: Now save it you are Done.

Please Give Us Your 1 Minute In Sharing This Post!

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Powered By: ITmaza