Social media helps a lot to increase traffic on your blog. It also helps to spread your voice world-wide.Some days before I have already given a tutorial about a social sharing widget. It is similar to that widget.It also contains a beautiful search bar.It opens in a new tab when any visitor clicks on it. I have added hover effect to these buttons.Please see a demo first if you like this widget then you can  add it to your blog. I have tried my best to give a very easy installation.If you found any fault then please mention it in comments....



How To Add It On Your Blog ?

Here are two simple steps to add it on blogger.You can add it by adding Css and Html code....

Adding The Css Code ?


  1. Go to Blogger Dashboard > Design > Edit HTML.
  2. Now find </head> using CTRL+F function.
  3. Add below code just above/before </head> tag.
<style type='text/css'>
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.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 #FE2EC8}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;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 #FE2EC8}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;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 #FE2EC8}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;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 #FE2EC8}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;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}
#search:hover{border:1px solid #FE2EC8}
#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}
</style>

Adding The HTML Code

  1. Go to Blogger Dashboard > Design > Page Layout
  2. Choose Add A Gadget > HTML/Javascript.
  3. Paste below code and save it.
<div class="subbox">
<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/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="http://4.bp.blogspot.com/-Y8ugT2cnlJE/TxkrN4zFfJI/AAAAAAAAAiU/WjZUUGA9EQQ/s1600/btsnts-feed.png"  alt="RSS Feeds" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feeds.feedburner.com/btsnts" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=
FEEDBURNER-ID
" target="_blank" rel="nofollow"><img src="http://2.bp.blogspot.com/-nat0pE6sopk/TxkrM4VJmZI/AAAAAAAAAiE/cbFTnMcEfE8/s1600/btsnts-email.png"  alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=
FEEDBURNER-ID
" target="_blank" rel="nofollow"> Email Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/rahulippar" target="_blank" rel="nofollow"><img src="http://4.bp.blogspot.com/-ln2kCgaUMzs/TxkrOyOXQAI/AAAAAAAAAiY/43OvSaIZtuI/s1600/btsnts-twitter.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/btsnts" target="_blank" rel="nofollow"><img src="http://1.bp.blogspot.com/-2gjUnMlqNXE/TxkrNSvEFuI/AAAAAAAAAiI/7eSfVtHFLpo/s1600/btsnts-facebook.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">Widget by <a href="http://btsnts.blogspot.com/" target="_blank">BTSNTS</a></p></div>


  • Replace FEEDBURNER-ID with your feedburner ID.
  • Replace TWITTER-USERNAME with your twitter username.
  • Replace FACEBOOK-USERNAME with your facebook page. username.

Post a Comment

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top