Oct 14, 2015

Add Search Box With Social Buttons To Blogger

data:blog.title
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="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="http://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.

Conclusion:

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.

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.