» » » Amazing Social Media Subscribing Widget With Search Bar For Blogger/Blogspot

0 , 01:40

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim7gqg-wNK2rr7ikw-0A10Yqk3xTYWaNztIehMfmpGff3bcZYftYzfbOc9xswUy_2FV2nAWlOhJb9MerkTE6fMhMscUf84NkpMVYQh2rAFLpll-tV38WUxd5oskApE5VItxSnHYnGLP4oS/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMBdcY7Dslj8ipF0c1homvZmSa0z6nZBAm-bxDQH63_uh0qFywm4wjGBD9n80jp0Ea9uoL95yqLXy2y5E-8fshJdycK74QCzzp9bOLJyc0pXy7076KVK0khG1OObke4lZfb8qotPkLBbOr/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLRd5xe44PquVfGakxIUam3ZyEHc5RQe-FYuGjRjm7PJBxLSwycaZv6ZLRw8oCI-G-GTm6fTWlr3biHn3QeBGlQrLGmTnFis3vpHzpFFjH3hDtcCjLwpVXphoJ14ShDD_2Hu1aKUIwiDQI/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Zpiz1iXKurKJMHlRtgE8Ap7G_2F48o2s_J8WaH4Py2sPONIuF8uuXmRLv-eYKgPyFlO3zvRqtANaS1TMiFhs3mGUvErzhGwu3CQjq2mJTmWP4Pq2t_scZ3Li_t5dONCNzylQPHqb2TKU/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.
Posted by

Share to:

Post a Comment

Subscribe to: Post Comments (Atom)
 
Top