Box Elegante com Várias Redes Sociais e Caixa de Busca

Nesta postagem compartilho com vocês esta box super elegante.

Para coloca-la em seu blog...

Entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código:

<style>
.social-wrap { 
margin:0 auto; 
padding:0px; 
text-decoration: none; 
}
.social-wrap ul li { 
list-style-type: none; 
border-bottom:none; 
margin:0 auto; 
background: none; 
padding:0px; 
line-height: 0!important; 
}
.social-wrap li a { 
margin:5px 0px 5px 0px !important; 
padding:0px; 
width:49px; 
height:49px; 
text-indent:-99999px; 
float:left;
} 
.social-wrap li a.facebook1 { 
background: #314d91 url(http://2.bp.blogspot.com/-ZTBPQPw0jQs/Uw-xfj63w3I/AAAAAAAACDo/erLFTLUib2I/s1600/social_sprites.png) no-repeat 0px 0px;
-webkit-transition:All 0.3s ease-out; 
-moz-transition:All 0.3s ease-out; 
-o-transition:All 0.3s ease-out; 
} 
.social-wrap li a.facebook1:hover { 
background: #314d91 url(http://2.bp.blogspot.com/-ZTBPQPw0jQs/Uw-xfj63w3I/AAAAAAAACDo/erLFTLUib2I/s1600/social_sprites.png) no-repeat 0px -73px; 
} 
.social-wrap li a.twitter1 { 
background: #07beed url(http://2.bp.blogspot.com/-ZTBPQPw0jQs/Uw-xfj63w3I/AAAAAAAACDo/erLFTLUib2I/s1600/social_sprites.png) no-repeat 0px -127px; 
-webkit-transition:All 0.3s ease-out; 
-moz-transition:All 0.3s ease-out; 
-o-transition:All 0.3s ease-out; 
} 
.social-wrap li a.twitter1:hover { 
background: #07beed url(http://2.bp.blogspot.com/-ZTBPQPw0jQs/Uw-xfj63w3I/AAAAAAAACDo/erLFTLUib2I/s1600/social_sprites.png) no-repeat 0px -204px; 
} 
.social-wrap li a.google-p1 { 
background:#a7291b url(http://2.bp.blogspot.com/-ZTBPQPw0jQs/Uw-xfj63w3I/AAAAAAAACDo/erLFTLUib2I/s1600/social_sprites.png) no-repeat 0px -254px; 
-webkit-transition:All 0.3s ease-out; 
-moz-transition:All 0.3s ease-out; 
-o-transition:All 0.3s ease-out; 
} 
.social-wrap li a.google-p1:hover { 
background: #a7291b url(http://2.bp.blogspot.com/-ZTBPQPw0jQs/Uw-xfj63w3I/AAAAAAAACDo/erLFTLUib2I/s1600/social_sprites.png) no-repeat 0px -330px; 
} 
.social-wrap li a.rss1 { 
background:#ffaa31 url(http://2.bp.blogspot.com/-ZTBPQPw0jQs/Uw-xfj63w3I/AAAAAAAACDo/erLFTLUib2I/s1600/social_sprites.png) no-repeat 0px -381px; 
-webkit-transition:All 0.3s ease-out; 
-moz-transition:All 0.3s ease-out; 
-o-transition:All 0.3s ease-out; 
} 
.social-wrap li a.rss1:hover { 
background: #ffaa31 url(http://2.bp.blogspot.com/-ZTBPQPw0jQs/Uw-xfj63w3I/AAAAAAAACDo/erLFTLUib2I/s1600/social_sprites.png) no-repeat 0px -454px; 
}
.social-wrap li a.pinit1 { 
background:#cb2027 url(http://2.bp.blogspot.com/-ZTBPQPw0jQs/Uw-xfj63w3I/AAAAAAAACDo/erLFTLUib2I/s1600/social_sprites.png) no-repeat 0px -508px; 
-webkit-transition:All 0.3s ease-out; 
-moz-transition:All 0.3s ease-out; 
-o-transition:All 0.3s ease-out; 
} 
.social-wrap li a.pinit1:hover { 
background: #cb2027 url(http://2.bp.blogspot.com/-ZTBPQPw0jQs/Uw-xfj63w3I/AAAAAAAACDo/erLFTLUib2I/s1600/social_sprites.png) no-repeat 0px -580px; 
}
.social-wrap li a.linkdin1 { 
background:#1698E3 url(http://2.bp.blogspot.com/-ZTBPQPw0jQs/Uw-xfj63w3I/AAAAAAAACDo/erLFTLUib2I/s1600/social_sprites.png) no-repeat 0px -635px; 
-webkit-transition:All 0.3s ease-out; 
-moz-transition:All 0.3s ease-out; 
-o-transition:All 0.3s ease-out; 
} 
.social-wrap li a.linkdin1:hover { 
background: #1698e3 url(http://2.bp.blogspot.com/-ZTBPQPw0jQs/Uw-xfj63w3I/AAAAAAAACDo/erLFTLUib2I/s1600/social_sprites.png) no-repeat 0px -711px; 
}

</style>
<div class="social-wrap"> 
<ul> 
<li><a class="facebook1" href="http://www.facebook.com/" target="_blank" title="Facebook" rel="nofollow"></a></li> 
<li><a class="twitter1" href="http://twitter.com/" target="_blank" title="Twitter" rel="nofollow"></a></li> 
<li><a class="google-p1" href="https://plus.google.com/" target="_blank" title="Google Plus" rel="nofollow"></a></li> 
<li><a class="rss1" href="http://feeds.feedburner.com/" target="_blaank" title="RSS Feed" rel="nofollow"></a></li> 
<li><a class="pinit1" href="http://www.pinterest.com/" target="_blank" title="Pinterest" rel="nofollow"></a></li> 
<li><a class="linkdin1" href="http://www.linkedin.com/" target="_blank" title="Linkedin" rel="nofollow"></a></li> 
</ul> 
</div>

<style>
#MBBOldSearch {
display: block;
clear: both;
margin: 5px 0;
padding:5px;
}
#MBBOldSearch #MBBSinput {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcaNCpJanZkDMDcRcLPJCvV39NNMJF1cUq88SlLaiqHZ5ppSRqTeH2lgRuS-c450RqS1rxL8q5Vlc9J-nHYPjZ1OGPVewuwqQfuckv9kn5GOmXG3GVmBLRX5TNTN4vp0RvBuxs52h4pL-F/s20/Search-icon.png") no-repeat scroll 8px center transparent !important;
padding: 7px 15px 7px 35px !important;
color: #444;
border:1px solid #f2f2f2;
font-weight: 400;
text-decoration: none;
width: 52%;
}
#MBBOldSearch #MBBSsubmit {
color: #fff;
border:none;
background: #0ca2a4;
font-weight: bold;
text-decoration: none;
padding: 6px 15px;
cursor: pointer;
transition:all 0.3s ease 0s;
}
#MBBOldSearch #MBBSsubmit:hover {
background: #de5034;
}
</style>
<div id="MBBOldSearch">
    <form action="/search">
        <input name="q" id="MBBSinput" type="text" />
        <input value="Buscar" id="MBBSsubmit" type="submit" />
    </form>
</div>

Tendo colado o código, substitua a parte destacada de Azul pelo seu nome Feed Burner. 

Tendo feito isto, está pronto!!!