Social networks plays an important role in increasing traffic on your blog. That's why many blogger adds their social networking profile links in their blogs.Today we will add stylish social subscription box to blogger very easily just using CSS and HTML codes.It contains your Feedburner Link,Twitter Profile Link,Facebook Page Link,Google + and search bar.I have added a hover effect to it which increases the beauty of this widget.Installation of this gadget extremely easy you just have to copy and paste the codes.Take a preview of this widget.

How To Add This Gadget To Blogger?

You can add this widget in two ways...

  1. Adding it as a HTML/JavaScript widget.
  2. Integrating in your template.

1st Way : Adding It As An HTML/JavaScript Widget

To add this widget as a HTML/JavaScript widget,

  • Go to Blogger Dashboard > Design > Page/Edit Layout.
  • Add a Gadget > HTML/JavaScript.

<style>

/*  ---------Helper Blogger Social Media Widget----------- */ 

#search {
border: 1px solid 
#DDD;
background: 
white url(http://1.bp.blogspot.com/-t-XnlJf5iIE/Tu_lRFYsvkI/AAAAAAAABqc/qtXhiIEeTpY/s1600/search.png) 99% 50% no-repeat;
text-align: left;
padding: 6px 24px 6px 6px;
height:15px;
mouse:pointer:
}
#search #s {
background: none;
color: 
#666;
border: 0;
width: 100%;
padding: 0;
margin: 0;
outline: none;
}
.social-connect-widget{background:#F5F4EF;border:1px solid #E7E6DE;padding:10px; border-radius:5px; -moz-border-radius:5px;} 
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#FFF} 
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E} 
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04} 
.social-connect-widget img{vertical-align:middle;margin-right:5px;height:32px;width:32;} 
</style>

<div id="search" title="Type and hit enter">
<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" />
</form>
</div>
<br/>
<br/><div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;"> 
<img alt="rss feed" src="http://3.bp.blogspot.com/-hEgZHK7jgaU/TzwJGEghh9I/AAAAAAAAAf4/GgLBaLyxAAc/s1600/rss.png" /><a href="http://feeds.feedburner.com/hblogger" target="_blank">Subscribe to our RSS Feeds!</a> 
</div> 
                        
<div class="social-connect-widget" style="margin-bottom:10px;"> 
<img alt="follow us on twitter!" src="http://1.bp.blogspot.com/-w3rrG7CcZOg/TzwJGr77q-I/AAAAAAAAAgA/uFsohpve_Tc/s1600/twitter.png" title="follow us on twitter!" /><a href="http://twitter.com/helperblogger" target="_blank">Follow Me on Twitter!</a> 
</div>

<div class="social-connect-widget" style="margin-bottom:10px;"> 
<img alt="be our fan!" src="http://2.bp.blogspot.com/-wv3o68M5bGk/TzwJFto27GI/AAAAAAAAAf0/Grrv9oHANiw/s1600/facebook.png&#39; title=&#39;Be Our Fan" /><a href="http://www.facebook.com/btsnts" target="_blank">Follow Me on Facebook!</a> 
</div>

<div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;"> 
<img alt="google plus" src="http://4.bp.blogspot.com/-oq9HRonnmDk/T2jQsYl_PRI/AAAAAAAABOI/9OB4NGbN0y8/s1600/g-plus-logo.png" /><a href="https://plus.google.com/u/0/106527290580119996124" target="_blank">Add Me on Google+!</a> 
</div>


2nd Way : Integrating It In Template


If you integrate the widget in your template then it loads quite fast as compared to HTML/JavaScript widget.
To integrating it in your template,

  • Go to Edit HTML page.
  • Download/Backup your template.
  • Find ]]></b:skin>
  • Add below code just above  ]]></b:skin>


CSS CODE

/*  ---------Helper Blogger Social Media Widget----------- */ 

#search {
border: 1px solid 
#DDD;
background: 
white url(http://1.bp.blogspot.com/-t-XnlJf5iIE/Tu_lRFYsvkI/AAAAAAAABqc/qtXhiIEeTpY/s1600/search.png) 99% 50% no-repeat;
text-align: left;
padding: 6px 24px 6px 6px;
height:15px;
mouse:pointer:
}
#search #s {
background: none;
color: 
#666;
border: 0;
width: 100%;
padding: 0;
margin: 0;
outline: none;
}
.social-connect-widget
{background:#F5F4EF;
border:1px solid #E7E6DE;
padding:10px;
border-radius:5px;
-moz-border-radius:5px;
} 
.social-connect-widget:hover{
border:1px solid #CBCBC2;
background:#FFF
} 
.social-connect-widget a{
text-decoration:none;
font-weight:bold;
font-family:Arial,Helvetica,Sans-serif;
color:#4B4D4E
} 
.social-connect-widget a:hover{
text-decoration:underline;
color:#F77C04
} 
.social-connect-widget img{
vertical-align:middle;
margin-right:5px;
height:32px;
width:32;
} 



  • Now go to Page layout
  • Add a Gadget > HTML/JavaScript.
  • Paste below code and save it.


HTML Code

<div id="search" title="Type and hit enter">
<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" />
</form>
</div>
<br/>
<br/><div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;"> 
<img alt="rss feed" src="http://3.bp.blogspot.com/-hEgZHK7jgaU/TzwJGEghh9I/AAAAAAAAAf4/GgLBaLyxAAc/s1600/rss.png" /><a href="http://feeds.feedburner.com/hblogger" target="_blank">Subscribe to our RSS Feeds!</a> 
</div> 
                        
<div class="social-connect-widget" style="margin-bottom:10px;"> 
<img alt="follow us on twitter!" src="http://1.bp.blogspot.com/-w3rrG7CcZOg/TzwJGr77q-I/AAAAAAAAAgA/uFsohpve_Tc/s1600/twitter.png" title="follow us on twitter!" /><a href="http://twitter.com/helperblogger" target="_blank">Follow Me on Twitter!</a> 
</div>

<div class="social-connect-widget" style="margin-bottom:10px;"> 
<img alt="be our fan!" src="http://2.bp.blogspot.com/-wv3o68M5bGk/TzwJFto27GI/AAAAAAAAAf0/Grrv9oHANiw/s1600/facebook.png&#39; title=&#39;Be Our Fan" /><a href="http://www.facebook.com/btsnts" target="_blank">Follow Me on Facebook!</a> 
</div>

<div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;"> 
<img alt="google plus" src="http://4.bp.blogspot.com/-oq9HRonnmDk/T2jQsYl_PRI/AAAAAAAABOI/9OB4NGbN0y8/s1600/g-plus-logo.png" /><a href="https://plus.google.com/u/0/106527290580119996124" target="_blank">Add Me on Google+!</a> 
</div>


Customizations (For Both Ways)

Now choose any way and copy the code in your notepad and replace all my usernames with yours.
(Note - If you want to use second way then use only HTML code for customizing)

If you have any queries about this gadget then feel free to tell me.I will solve it as soon as time allows.May this gadget increase your social subscribers...

Post a Comment

  1. your nice blog but code is overflow...
    students project

    ReplyDelete
  2. i want to add subscription box in my blogger just like your please tell me that how should i do now ?

    bollywoodhdpictures.blogspot.com

    ReplyDelete
    Replies
    1. you can get yours at here -

      http://www.helperblogger.com/2012/03/quick-addmashable-style-social.html

      Delete
  3. hey i like this a lot, but can you please tell me how to remove the search bar completely ??

    ReplyDelete
    Replies
    1. see i figured out how to remove search bar,but how to i remove the extra black space above it... pls see this http://techminerva.blogspot.in/ to understand !

      Delete
    2. from above 2nd number code(HTML CODE) remove below snippets of code and save it.

      <div id="search" title="Type and hit enter">
      <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" />
      </form>
      </div>
      <br/>

      Delete
  4. Nice widget from:
    http://hamzanetwork.blogspot.com

    ReplyDelete
  5. Thanks for this tutorial, this will helps my blog to get a cute search box.. Thank you!

    ReplyDelete

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