Stylish Social Media Widget with Search Box

In this  post  im gonna  explain  how to add social media  widget with light search box for your blog. So, this include two gadget.  social profiles  icons and search box. Im using css3 and HTML for this widget. you can take a look at in demo page.

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste  below code.

<style>
#btrixwidget{width:307px;
padding:0 0 5px 0;
border:1px solid black;}

#btrix-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaYIfsBR7OKMwA67bc6YUPFPHyC9NQCjVhFgunGtdf03XlueS2PngPuWmKplejUXXe8RfILra-GCjrv2m_gIq6ElypvA3alUeGlX7kY9Jry4-5yXSBqoTq-_dvFJ5YLHnecYWZ-k5nGO1j/s1600/blue.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
  
form#btrix-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}
  
form#btrix-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
  
form#btrix-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>

<div id="btrixwidget"><center>
<a href="http://twitter.com/bloggertrix" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidt68o9W-rAnmAjc_1msmXYENzYQ2lKsTl9DeaCJ0-Lcv_Twwg7obIv_Zi20rfQRBILMTVQkvnqKgh4sUzwVACglujfaqBZwwqg_9-kKS8R8d7ErgSVdmG1_Fg0sT3gVxIXiHC0VpN9hc/s1600/btrix-twitter.png" alt="" title="twitter" width="62" height="78" class="alignnone size-full wp-image-6249"></a>

<a href="http://www.facebook.com/bloggertrix" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO9RkKx95iA1_TJPKY8QuKCZttMc3gF18_1-LRLGEW6TOdD6RPaHd1NwMGGlPQTAbhsenhT2EC1XEgVdd-F1UAU0_5Uzy4pjxERrm8Jrn3x6KozB1TJSjavnof0XDhEiYNb_ScEcbxRuY/s1600/btrix-facebook.png" alt="" title="facebook" width="62" height="78" class="alignnone size-full wp-image-6248"></a>

<a href="http://feeds.feedburner.com/bloggertrix" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDgWDgnX6ckWlvF0ZYKdGCuFfbVKV_zQ6MwPF7U2v07F17Etkizl46aRjp9Wnb9p9VVJIOUsoB2NaMR7K-EzFI-xnXZN2BVxuK76ED1kTP7nvddINLxDbeJ6pIgzEnT2rwI6IRcWhOWug/s1600/btrix-rss.png" alt="" title="rss" width="62" height="78" class="alignnone size-full wp-image-6251"></a>

<a href="http://au.linkedin.com/username" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGtED51H8L7umH-y-K4G-lPL0xu5-U-1gyb2s_7hyphenhyphenWZnfURwSQcaRy13t3fA3bhslk-FpZeoy1uS2QqnLAL-IGMZugneCj4mTKSK65leGVc5xV1har3PXzScFff0N2x22AyOiZLFkelZU/s1600/btrix-linkedin.png" alt="" title="linkedin" width="62" height="78" class="alignnone size-full wp-image-6250"></a>

<div id="btrix-searchbox">
    <form id="btrix-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Search...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>
</center>
</div>

Replace Bloggertrix with your twitter profile
Replace Bloggertrix with your facebook profile
Replace Bloggertrix with your feedburner profile
Replace Bloggertrix with your linkedin profile

7. Now save your HTML/Javascript'. You are done.