Adicionar Widget de Redes Sociais com Caixa de Pesquisa

Adicione botões de redes sociais (Facebook, Twitter, Google+ e RSS) práticos e bonitos ao seu blog em um simples widget, fácil e rápido.

Vamos lá?

1 - Copie o código abaixo:

<style>
.mok-metro-social{
width:300px;
}
.mok-metro-social li{
position:relative;
cursor:pointer;
padding:0;
list-style:none;
}
.mok-metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{
z-index:7;
float:left;
margin:2.5px;
position:relative;
display:block;
}
.mok-metro-social .tw{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZpNxgPlyMzXq0vw-x5bAlrgn2FnlFc4ikPFlwodKprExUBm1nfCKkwYQ2nQRqA9Ld0BQN1gBbK5YdZB213tbJ-BD4TTh0vjdYDH50ED0CbMR81eqnaBwWiqjeC7yoBVZUsMtQhO4Gnqs/h120/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.mok-metro-social .fb{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWoS5TTbc9eXZ7riVbcrhwPB2aPkMX7xCqClAMUdQ6S8M0csTGUgKkGstBoS4f5InWQANze9y1t3s7kKAPq1Okz1XJl36szDdqSz0vd29v4pMWxEV35rdCZQ4YbLUClT_ndNZiSNEVXkg/h120/facebookf.png.png) no-repeat center center #1f69b3;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.mok-metro-social .gp{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkh7gXi6RBb1hsF7F3F6l6ptp-7pyiCWGwlMXwkhmNj9NKK1-5ngIMEvXEgZf924jky3cSYjyOu0qTRihbCM94o9pHWFk561k3s491PdR65QBdseUP2FZqYcC4Menq8Sh7fThIaNCM1zc/h120/google+plus.png) no-repeat center center #da4a38;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.mok-metro-social .fd{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9-sDwwVUpzPO8ttk_LocJm8X9Ni-mePjttNmdpCpExJEseEzUJQ7Uol6_AYhVIK6s5AMM9dbBw76uwhDCJcTpUnax8NBknGgDyRrCwycRwrEQrSEehy8SB4XIuNmvw8GhH27Paj6Y0zc/h120/feed.png) no-repeat center center #e9a01c;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.mok-metro-social li:hover .fb{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlMgZXpM0I4RDK3MnJIzUhQCvt1m7jQcdoBl0ir6GYSoRbEBu0xzALe2T0twXU9UeRT1Zd3gMfmvnrOc3wxUjoSEb_QlSdoNL4Iw1FlweSHlbPT2CzS-7ZrkYijJ_b9dVMxMK73hFC5j4/h120/facebookfh.png) no-repeat center center #1f69b3;
 box-shadow:0px 0px 6px 3px #217BC0;
-webkit-box-shadow:0px 0px 6px 3px #217BC0;
-moz-box-shadow:0px 0px 6px 3px #217BC0;
-o-box-shadow:0px 0px 6px 3px #217BC0;
-ms-box-shadow:0px 0px 6px 3px #217BC0;
}
.mok-metro-social li:hover .tw{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWBrFqtFRP9XaUisNQEHW9JrU_UwDlkUatEde4EYhV485yskFFEMnIQM7tC7rhex9cHKPZaXuG-Zlo5NBUI_MNTFs7633C_BUmcsTc_e9-UFQjkTyHKrQIGIwxPzlQGH5mveJAeaUgyBE/h120/twitter-bird-dark-bgsx.png) no-repeat center center #43b3e5;
 box-shadow:0px 0px 6px 3px #38D1F7;
-webkit-box-shadow:0px 0px 6px 3px #38D1F7;
-moz-box-shadow:0px 0px 6px 3px #38D1F7;
-o-box-shadow:0px 0px 6px 3px #38D1F7;
-ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.mok-metro-social li:hover .gp{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqF6j9C2v_Xpvl8d-xQrz9mqmt-yg74QMlwh7XcCaC9LTYyWp7Lq4I2N22gDop8yU85KuY0JZElbDgcrzUWTyk8xomNCJSVx3tndg1QqZCyfBh78CvJdSZiAhedfMP7iAEEZkKgDk-OjQ/h120/google+plush.png) no-repeat center center #da4a38;
 box-shadow:0px 0px 6px 3px #F43431;
-webkit-box-shadow:0px 0px 6px 3px #F43431;
-moz-box-shadow:0px 0px 6px 3px #F43431;
-o-box-shadow:0px 0px 6px 3px #F43431;
-ms-box-shadow:0px 0px 6px 3px #F43431;
}
.mok-metro-social li:hover .fd{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgchXLWJRKHmjkXOCAV2m2HkgdlHZjzyxyjKPL5y3mNo7qBfy6a3FoU611_zItYJhL4XMVBW279gmjLa6e0vLjgN3sxaDkZdF4JNDroB5NF8M8UOOLEuN_2Pd6H4paD6unCgP5ZY8ZYoPQ/h120/feedh.png) no-repeat center center #e9a01c;
 box-shadow:0px 0px 6px 3px #e9a01c;
-webkit-box-shadow:0px 0px 6px 3px #e9a01c;
-moz-box-shadow:0px 0px 6px 3px #e9a01c;
-o-box-shadow:0px 0px 6px 3px #e9a01c;
-ms-box-shadow:0px 0px 6px 3px #e9a01c;
}
.cf:before, .cf:after{
    content:"";
    display:table;
}
.cf:after{
    clear:both;
}
.cf{
    zoom:1;
} 
/* Form wrapper styling */
.form-wrapper {
    width: 280px;
}
/* Form text input */
.form-wrapper input {
    width: 215px;
    height: 20px;
    padding: 10px 5px;
    float: left; 
    font: bold 12px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 0;
box-shadow: 0 0 6px rgba(0,0,0,.3) inset;
webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    border-color: #51a7e8;
   box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}
.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
} 
/* Form submit button */
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 75px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjZQ910IxnZOYLG4tfByVBKNxqsl-AbLrv5RwWi17QCuS1EvDgrwFo67SToZpTY7JyLjjuCPyudVRRbPJ1x-aRtsN36XU1wIdWjG5UVhyphenhyphenhDtatyvwBr7_lvQ6UyUt0xt47YlvB9p_DnwY/h120/1367665345_search.png) no-repeat center center #5bcfe7;
    border-radius: 0 0 0 0;   
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.form-wrapper button:hover{ 
      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjZQ910IxnZOYLG4tfByVBKNxqsl-AbLrv5RwWi17QCuS1EvDgrwFo67SToZpTY7JyLjjuCPyudVRRbPJ1x-aRtsN36XU1wIdWjG5UVhyphenhyphenhDtatyvwBr7_lvQ6UyUt0xt47YlvB9p_DnwY/h120/1367665345_search.png) no-repeat center center #5bcfe7;
box-shadow:0px 0px 6px 3px #5bcfe7;
-webkit-box-shadow:0px 0px 6px 3px #5bcfe7;
-moz-box-shadow:0px 0px 6px 3px #5bcfe7;
-o-box-shadow:0px 0px 6px 3px #5bcfe7;
-ms-box-shadow:0px 0px 6px 3px #5bcfe7;
}
.form-wrapper button:active,
.form-wrapper button:focus{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjZQ910IxnZOYLG4tfByVBKNxqsl-AbLrv5RwWi17QCuS1EvDgrwFo67SToZpTY7JyLjjuCPyudVRRbPJ1x-aRtsN36XU1wIdWjG5UVhyphenhyphenhDtatyvwBr7_lvQ6UyUt0xt47YlvB9p_DnwY/h120/1367665345_search.png) no-repeat center center #5bcfe7;
    outline: 0;
}
.form-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #5bcfe7 transparent;
    top: 12px;
    left: -6px;
}
.form-wrapper button:hover:before{
    border-right-color: #5bcfe7;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
        border-right-color: #5bcfe7;
}   
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
} 
</style>
<div class="mok-metro-social">
<li><a class="fb" href="SEU-FACE-AQUI" target="_blank"></a></li>
<li><a class="tw" href="SEU-TWITTER-AQUI" target="_blank"></a></li>
<li><a class="gp" href="SEU-GOOGLE+-AQUI" target="_blank"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/SEU-FEED-AQUI" target="_blank"></a></li>
<form action="/search" class="form-wrapper cf" id="searchthis" method="get" style="display: inline;">
<input id="form-wrapper input" name="q" placeholder="  Buscar.. " required="" type="text" />
<button type="submit"></button>
</form>
</div>

2 - No seu blog clique em Layout » Adicionar Widget » Html/Javascrip:

3 - Adicione o código copiado.

4 - No final do código você irá ver essas frases:
SEU-FACE-AQUI / SEU-TWITTER-AQUI / SEU-GOOGLE+-AQUI / SEU-FEED-AQUI

5 - Substitua-os pelas suas redes sociais.

6 - Salve e Posicione.

Gostou do post? Comente!