Add Stylish Social Subscription Box With Search Bar For Blogger

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiCjSfS7KgnjNGF4AUAdD0ZeJbGzd_0zYi8iyXZLo-zFfwv6rh6L1EWbFvRzcMVyPbUszO8JKHmYGVy7ND-PQHMukvou6JkIHrCAzXCZP6FGxDLQqRxxbk_oHcaV9-bhw4r8Bsw5hpxgg/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3FiEhiyd1M82dwFbumyZJ4PuPdA6ZBJGgmfbSejYXXF3K5eywbaQMcJ2HWZnH6_ueuIBlUJsi8Lq2SXYXC0SaGU-8z3Snc609Ri8aTSXL71ZPlkAqfCMYSMTPgj1uWXEeckxdEZ1QMLnW/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_t7M71B_U576FcCCFD3CgiYiEL4iHUEOIZCIlxjuaAuMqapMcU8q0qMqco9V7739ty0yGdHa0zOmk9oBpmW2CK27OP339Med4fmv6t3r3j3tm_uGzP8Fqcu0RNVkbcdwlxQ45efyBKF8p/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJEUbmRCqzPFV0to9j49HURBOgyWOSi73ha4-Uz9FfaG6KzIyooUI6k0_p81pOYGyz5z8BNdmFpdU7RmwTenPf7pp8TOd9QpMednatqMGJKCZ2pHHUrMbCtiuBtIAfR7amn3YQMcv40sny/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LHGCtkBnQJStsb0BIst6V60wfp3_DSlwhdBI-TrbXAfo01FHE6Zo3z63V7QzFJ5AWxJuE-otmfO9lUnw2Wmb_sXIoQgEERRI-TSznUSfCVzUAxzlNyGmFSZKpgYx9wKsrro9iGexpr0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiCjSfS7KgnjNGF4AUAdD0ZeJbGzd_0zYi8iyXZLo-zFfwv6rh6L1EWbFvRzcMVyPbUszO8JKHmYGVy7ND-PQHMukvou6JkIHrCAzXCZP6FGxDLQqRxxbk_oHcaV9-bhw4r8Bsw5hpxgg/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3FiEhiyd1M82dwFbumyZJ4PuPdA6ZBJGgmfbSejYXXF3K5eywbaQMcJ2HWZnH6_ueuIBlUJsi8Lq2SXYXC0SaGU-8z3Snc609Ri8aTSXL71ZPlkAqfCMYSMTPgj1uWXEeckxdEZ1QMLnW/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_t7M71B_U576FcCCFD3CgiYiEL4iHUEOIZCIlxjuaAuMqapMcU8q0qMqco9V7739ty0yGdHa0zOmk9oBpmW2CK27OP339Med4fmv6t3r3j3tm_uGzP8Fqcu0RNVkbcdwlxQ45efyBKF8p/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJEUbmRCqzPFV0to9j49HURBOgyWOSi73ha4-Uz9FfaG6KzIyooUI6k0_p81pOYGyz5z8BNdmFpdU7RmwTenPf7pp8TOd9QpMednatqMGJKCZ2pHHUrMbCtiuBtIAfR7amn3YQMcv40sny/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LHGCtkBnQJStsb0BIst6V60wfp3_DSlwhdBI-TrbXAfo01FHE6Zo3z63V7QzFJ5AWxJuE-otmfO9lUnw2Wmb_sXIoQgEERRI-TSznUSfCVzUAxzlNyGmFSZKpgYx9wKsrro9iGexpr0/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...