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.
How To Add Search Box With Social Buttons To Blogger

How To Add Search Box With Social Buttons To Blogger

  • 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=”” target=”_blank” rel=”nofollow”><img src=””  alt=”RSS Feeds” title=”RSS Feed” style=”vertical-align:middle; margin-right: 5px;border:none;”  /></a>
<a href=”” target=”_blank” rel=”nofollow”>RSS Feed</a>
</div></td><td><div class=”emailsbox”>
<img src=””  alt=”Google Plus” title=”Google Plus” style=”vertical-align:middle; margin-right: 5px;border:none;”  />
<a href=”href=” ” target=”_blank” rel=”nofollow”> Google Plus</a>
</div></td></tr><tr><td><div class=”twitterbox”><a href=”” target=”_blank” rel=”nofollow”><img src=””  alt=”Twitter” title=”Twitter” style=”vertical-align:middle; margin-right: 5px;border:none;”  /></a>
<a href=”” target=”_blank” rel=”nofollow”>Twitter</a>
</div></td><td><div class=”facebookbox”><a href=”” target=”_blank” rel=”nofollow”><img src=””  alt=”Facebook” title=”Facebook” style=”vertical-align:middle; margin-right: 5px;border:none;”  /></a>
<a href=”” target=”_blank” rel=”nofollow”>Facebook</a>
</div></td></tr></table><p style=”display:none;” align=”center”><a href=”” target=”_blank”></a></p></div>

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


So above guide is about How To Add Search Box With Social Buttons To Blogger Blog. Hope by this guide you can easily add this widget to your blogger blog, if problem persist then just drop a comment below. Do share and also give feedback for this widget.
Paramjot Singh

Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I'm blogging since 2 years, and here on My Blogger Guides, I'm sharing my little mind knowledge which I learned in these past two years. :)

Click Here to Leave a Comment Below 0 comments

Leave a Reply: