Add Social Sharing Widget With Search Bar To Your Blog

Am presenting to you, a stylish social sharing widget which comprises of a search bar, subscribe to RSS Feeds, twitter profile link, facebook profile/fan page link, google + profile link and mouse hover effect.

Adding The Social Sharing Widget

There is two option involve in adding this

1. Adding it to your HTML/javascript widget
2. Adding it to your Blogger Template

Adding It To Your HTML/JavaScript Widget

1. Login to your blogger dashboard
2. Click on "Design" > "Page Elements" > "Add a Gadget"
3. Choose "HTML/JavaScript" from this list of gadgets that appear, copy and paste the code below is the box provided. 

<style>

/*  ---------REALCOMBIZ SOCIAL SHARING WIDGET----------- */

#search {width:235px;
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://feedburner.google.com/fb/a/mailverify?uri=Realcombiz" 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/Realcombiz" target="_blank">Follow Us 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/Realcombiz" target="_blank">Follow Us 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/117896762172961615212" target="_blank">Add Me on Google+!</a>
</div>

• To change the width of your search box edit width:235px
• Replace http://feedburner.google.com/fb/a/mailverify?uri=Realcombiz with your RSS Feeds url
• Replace http://twitter.com/Realcombiz with your twitter profile url
• Replace http://facebook.com/Realcombiz with your facebook profile url
• Replace https://plus.google.com/u/0/117896762172961615212 with your Google + profile url.

Adding It To Your Blogger Template 

This is the second option on how to add the social sharing widget.

1. Login to your blogger dashboard
2. Click on "Design" > "Edit HTML" > Back up your template
3. Mark/Tick "Expand Widget Templates"
4. Use ctrl F to find ]]></b:skin> and paste the code below before/above ]]></b:skin>.

<style>

/*  ---------REALCOMBIZ SOCIAL SHARING WIDGET----------- */

#search {width:235px;
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;}

     5.  Click "SAVE TEMPLATE"

     6.  Now go to your dashboard, click "Design" > "Page Elements" > "Add a Gadget"

     7.  Choose "HTML/JavaScript" , copy and paste the code below in the box provided.

<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://feedburner.google.com/fb/a/mailverify?uri=Realcombiz" 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/Realcombiz" target="_blank">Follow Us 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/Realcombiz" target="_blank">Follow Us 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/117896762172961615212" target="_blank">Add Me on Google+!</a>
</div>

Click "SAVE", Edit all code as shown in the first option.

That's all, please leave comment if you have anything to say or ask, and don't forget to share this and subscribe to this blog.

Enjoyed This Post? Subscribe For More Update!

Follow @realcombiz