Add Stylish Social Subscription And Search Box For Blogger

Social Media Play an Important role for the growth and increasing traffic. Almost Every blogger try to use social widgets on their blog. This is a good idea to use important networks widget on blog and lets them visitors to joins your blog on social medias for latest updates.

So today i decide to introduce an another social subscribing widget and also contains search box also. This Gadget contain one search box and 4 social networks including Feed Link, Facebook Page or Profile, Twitter and Google+ Page or Profile. This widget is lighter and stylish have black tone shade which makes this widget awesome and best for using on blogs. If you want to add this Gadget follow and add codes accurately on your blog.

Steps To Add This Gadget On Your Blog.

• Firstly open your Blogger Dashboard >> Then Layout

• Then Click on Add a Gadget

• Now Paste The Below code in Edit HTML/JavaScript box

<style> 
/* ---Safe Tricks Social Media Widget--- */ 
#search {
border: 1px solid #DDD; 
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQZFDYzloBUkEQTe3H8Fh-qS30bEkbZ6RU5TkpgooKCfbA25g5w4cqToYumfT_Egra0t653K6VjmayxhhkNyx-CBjIiJyJIjtLM3X8bGiVKC-J2sGfcewEzOVoNkV3tcZXvZJ4PPTpUDg/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/AVvXsEjfTLiCnFR4HoS8XKzXyyLs8zUhjF9tDGTmqpfE3MFOUpVLRpbmkkXes5umd7KVZY7O4XODswPYBg1v2wOV06_VkiovGis-xiqlpXXl5d0va7xWm_uOkaBsxoo-t5XbbNgXcANaTwmVY0U/s32/rss.png" /><a href="http://feeds.feedburner.com/SafeTricks" 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/AVvXsEi3X-a9mYEJhYq_oNrBky8DzEdiNtPqbWXPbanrUTfzZp_OykAXd1xsES5CXigjAN1s_5KSceBnK-IaCKXzLzm7ujqxt-KZ_gacdn2Kt0VK_8q3FEqLgVNS1JmSLBp-scCJ7xbhn90NXAU/s32/twitter.png" title="follow us on twitter!" /><a href="http://twitter.com/SafeTricks" 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/AVvXsEj_y9hwIf5defSFxJkfBEGvhJLAwBw9ZbZyWqPngAKZznww_L3FeF0Y3-bvx2qZYE5pZPCteZ9GzQ8JJHoEnndAOwPKuJQ6JuxgjpcrPmDljvYlAJXdGfZTSD7sX8rwduBcVLyVFdJ9mTU/s32/facebook.png&#39; title=&#39;Be Our Fan" /><a href="http://www.facebook.com/SafeTricks" 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/AVvXsEgGNWksMobf86AmF6S5aCO6hki6vau-zwYq9WIft5SXfsC4TRLl3tZlFZCP1UALLHKXtkVzYHBubP8xxq9Y6R0cYXo38zRXcslKEZK40wcf6nyMM2Tv64syIpGeeJPH0mifpON1blfxwQQ/s39/g-plus-logo.png" /><a href="https://plus.google.com/u/0/105296359951523996670" target="_blank">Add Me on Google+!</a></div>

• After Pasting above code Replace below usernames on bases of color codes

SafeTricks with Feedburner Id

SafeTricks with Twitter Username

SafeTricks with Facebook Username

105296359951523996670 with Google plus Id

• After replacing above usernames. Then click on the Save Button

I hope you like this widget and also enjoy this tutorial But if you face any problem feel free  to share your comment.