many blogger adds their social networking profile links in their blogs Because The Social networks plays an important role in increasing traffic on there blogs, Today i will Show you How to add A social subscription box with Search bar to your  blogger very easily just using CSS and HTML codes.It contains your Feedburner Link,Twitter Profile Link,Facebook Page Link,Google + and search bar. Installation of this widget extremely easy you just have to copy and paste the codes.


follow simple steps below :

• Go to Blogger Dashboard > Design > Edit HTML.
  
• Backup/Download your template.
  
• check expand widget templates.
  
• Now search for ]]></b:skin>
  
• Add below code just above ]]></b:skin>

/*  ---------Social Media Widget----------- */
#search {
border: 1px solid
#DDD;
background:
white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcbsuE05Hs4t6u-um3LvCtXQEKyigJi9MxsuObRnWIWyLzmgnxFkRYe2u-vErADJI9s0B-0OorJMiPieRCYg9psLPIov2mhnj1AtsLJ9oI-vBHhuJDCH3Fi8NStjh8iR7GhmwN52S5b-g/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.

<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/AVvXsEjbLwNX2-f-cX-dImMzYXaIa-AlVy_0TqFgrL-0vgNI2vMrww5eF0ulmgAYbKptCgVL3nsAamsvohk7ZWxB9mt5m8BRmsAKn4GId6PHDhYQu7a4wMbtFxtgsujDWIN0zl8kn5l2DlkIfWU/s1600/rss-black.png" /><a href="http://feeds.feedburner.com/username" 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/AVvXsEgskJBqWKZBy0UtmM1c7AMfSURERkeN6lxd-O09je4iO-yUaVdGlaf-zDcmxAxe0KGWxbGS3lyTgtFvnMR-U6Odx3fYXSJfK7TovE5J6d3IgnIjK5xQSzjHkoqGcBSsGr9NCbVfnHAgy6g/s1600/twitter-black.png" title="follow us on twitter!" /><a href="http://twitter.com/username" 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/AVvXsEhuwZEhKKrnYxAUAQtZYHi4HqdQny0z4UPXPIOSUsvtPFv14awKPR4PHpLhVdXa_sDE_zx3hDJLIdpAuyVwmVsz-JL2HmCWFApmu5NNVQjNedcUQxnNhBuqLUarqw2B4QXEzD9gW-e3qdg/s1600/facebook.png title=&#39;Be Our Fan" /><a href="http://www.facebook.com/username" 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/AVvXsEhcKEqO03FMZPRlEdtjYYvLN0KwItX15fGNpKHkyUc1F55vVfICvfkuEz5u2LGtl0CKbMbXUayBdjH0TthPjymLiisln6ojsWg4mL7UB89rT9aKs0G7lqYYcohLGRhdbPyoo6FrD5UreLQ/s1600/g-plus-logo.png" /><a href="https://plus.google.com/username" target="_blank">Add Me on Google+!</a>
</div>

Change this :

1. useraname : your feedburner id
2. username : your twitter username
3. username : your facebook fan page id
4. username : your google plus id

• Click Save and You Are Done :)