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
 Demo By BloggingSection

Steps To Be Follow

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 one of 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/AVvXsEgOwbde2hIRzsApfJYdVC8utE6AIg0_SETRgz293_E85XQKqDnEY2bn91_M44-ILlO1bg4EcEPNgz8WP0-bau-PNLr9RAh2lmUMx8oppkYwx1B8avPAp11WLqGX_kUehxVE2U1OgEvkiKXH/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/MrOmkarSingh" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0hOqWqpN3kVjiBHyeiDKSyc5xKS9ptzfDxxzeFQPPeiWQhLnauBAG08XujDjrVjfSGRydsvrvDb32J6HuTyKchVCM4Kqqg9XC1rWJzxApMKf-aIB55_czv3rArMQIDKsy57qVK7dUbM0/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/bloggingSection" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh27x6p4biK0JQj2TZh5Nxe99temztk1s7JHR8FGEgoxRWC9Vd3Ywubt9kfKKYjXlC9wCAaUrMFMtVO2KKc3gW0ouEh_ZlsbuKGXERr52MPbftOoqGhsaox4W_24vqgD3AgvnqWz9VbAgY/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/bloggingSection" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDQYbsr90i9a2hvNbXrn5kZGlXmtlNZR04_xJQh39iMxM0XxWrSLzIw3m_C2Yx5EQtYDN8R8ykRMjpT92qQhK5pV5lGsNNaivj6Hv7aG2DW04U8drBKZcQvEfrFsNbMqp9GDCPKP2bx70/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/AVvXsEiiPv_fJbJpfJ-z26GDzvMe_Zfv5Ahh8594y1sY651P7mkN37hcFKTWozKx9JC-zBP-o_8ZvHf7oG1ljUITTgaxz-ZcFOddQ-eOs3HRZoKS_TZnVVfMisI5nuiThz1SrruJwdhxe9v-N2g/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 MrOmkarSingh with your twitter profile 
Replace BloggingSection with your facebook profile 
Replace BloggingSection with your feedburner profile 
Replace Username with your linkedin profile 

7. Now save your HTML/Javascript'.

    You are done...