Add Search Box With Social Buttons To Blogger

Do you want to add a custom search box widget with social buttons to blogger then you are on right platform because today we are going to share Search Box With Social Media Buttons For Blogger Blog. This Is also Another Cool Rss Subscription Gadget. It include with Twitter, Facebook and Rss, You can add it to your blog. It will make your blog attractive and helps to increase Facebook fans , Twitter follower and RSS Subscribers. We also attach a screenshot of this widget. If you want to add this widget on your blogger blog then follow below steps.

• Go To Blogger Dashboard.
• Template >> Edit HTML.
• Find ]]></b:skin> tag by pressing CTRL+F.
• Now paste Below code just above of this tag.

.mbgbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center:margin-bottom:-30px;} .addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0} .addthis_toolbox .custom_images a:hover img{opacity:1}.addthis_toolbox .custom_images a img{opacity:0.85}
 .rssbox{background:#CED8F6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px} .rssbox:hover{border:1px solid #1014c7}.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif} .rssbox a:hover{color:#1014c7;text-decoration:none}.emailsbox{background:#CED8F6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}.emailsbox:hover{border:1px solid #1014c7}.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}.emailsbox a:hover{color:#1014c7;text-decoration:none}.twitterbox{background:#CED8F6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}.twitterbox:hover{border:1px solid #1014c7} .twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif} .twitterbox a:hover{color:#1014c7;text-decoration:none} .facebookbox{background:#CED8F6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px} .facebookbox:hover{border:1px solid #1014c7} .facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif} .facebookbox a:hover{color:#1014c7;text-decoration:none} #search{width:290px;padding:2px 2px;background:#F7F6F6F;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left;margin-bottom: 0px;}#search:hover{border:1px solid #1014c7} #search form{margin:0;padding:0}#search fieldset{margin:0;padding:0;border:none} #search p{margin:0;font-size:85%} #s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% &quot;Tahoma&quot;,Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}

• Now Save Template.
• Go to Layout >> Add A Gadget >> Edit HTML.
• Now paste below code.

<div class=”mbgbox”>
<div id=’search’ style=’display:inline;’>
<form action=’/search’ id=’searchform’ method=’get’>
<input id=”s” name=”q” onblur=”if (this.value == &quot;&quot;) {this.value = &quot;Search…&quot;;}” onfocus=”if (this.value == &quot;Search…&quot;) {this.value = &quot;&quot;;}” type=”text” value=”Search…” />
<input id=”searchsubmit” type=”submit” value=”Search” />
</form></div><table><tr><td><div class=”rssbox”><a href=”http://feeds.feedburner.com/MyBloggerGuides” target=”_blank” rel=”nofollow”><img src=”http://1.bp.blogspot.com/-r3icBHfZ9tI/T-H4ytqBw7I/AAAAAAAAA6o/_swM5CqlQVQ/s1600/rss-icon.png”  alt=”RSS Feeds” title=”RSS Feed” style=”vertical-align:middle; margin-right: 5px;border:none;”  /></a>
<a href=”http://feeds.feedburner.com/FEEDBURNER-ID” target=”_blank” rel=”nofollow”>RSS Feed</a>
</div></td><td><div class=”emailsbox”>
<img src=”http://2.bp.blogspot.com/-lgwSpbmUC0A/T-H4xLZhcsI/AAAAAAAAA6g/15-p04ZT9Es/s1600/Google-plus-grey-icon.png”  alt=”Google Plus” title=”Google Plus” style=”vertical-align:middle; margin-right: 5px;border:none;”  />
<a href=”href=”https://plus.google.com/Username ” target=”_blank” rel=”nofollow”> Google Plus</a>
</div></td></tr><tr><td><div class=”twitterbox”><a href=”http://twitter.com/MyBloggerGuides” target=”_blank” rel=”nofollow”><img src=”http://4.bp.blogspot.com/-Z_JLk3C2FFc/T-H41vqABCI/AAAAAAAAA64/FuynqiFJeGg/s1600/twitter-icon.png”  alt=”Twitter” title=”Twitter” style=”vertical-align:middle; margin-right: 5px;border:none;”  /></a>
<a href=”http://twitter.com/Twitter-USERNAME” target=”_blank” rel=”nofollow”>Twitter</a>
</div></td><td><div class=”facebookbox”><a href=”http://www.facebook.com/MyBloggerGuides” target=”_blank” rel=”nofollow”><img src=”http://3.bp.blogspot.com/-JwcjMk_k5LA/T-H4zv7J6II/AAAAAAAAA6w/fxBaVEXekL0/s1600/social-twitter-box-blue-icon.png”  alt=”Facebook” title=”Facebook” style=”vertical-align:middle; margin-right: 5px;border:none;”  /></a>
<a href=”http://www.facebook.com/Facebook-USERNAME” target=”_blank” rel=”nofollow”>Facebook</a>
</div></td></tr></table><p style=”display:none;” align=”center”><a href=”https://mybloggerguides.com/” target=”_blank”></a></p></div>

• Now change red highlighted colors into yours.
• Save HTML/JavaScript.
• That’s it. You have added this widget.