Como adicionar um widget de feed e das mídias sociais personalizado

A pedido da minha cola Edilene, trouxe esse tutorial que mostra como personalizar sua sidebar. Apesar de simples essa é uma ótima forma de customizar os logo tipos das mídias sociais e também conseguir mais assinates de feed.

Vamos lá.

Primeiro adicione o código abaixo antes da tag: </head>

<style type='text/css'>

#hsection{
border:px outset #993300; /* Espessura, estilo e cor da borda*/
background:#FFFFFF;
margin-top:30px;
margin-bottom: 10px;
padding:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}


#hsection:hover{
border:px outset #993300; /*Cor da borda ao passar o mouse*/
background-color:#F3E6E0; /*Cor de fundo ao passar o mouse*/
margin-top: 30px;
margin-bottom: 10px;
padding:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}


#sectionmy .sectionmy2 h2.subscription {
border:0;
margin:0;
padding:20px 0 0 55px;
height:45px;
font-size:13px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;font-weight:bold;
}

#sectionmy .sectionmy2 h2.rss { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjszZpwoU7vPUJAjocX8R2YYSSBCUyZ8NGkFycVYEiQZfKNgcN0ydpdiqeXsedJEHOqjPDJ0Yn3LPfIktU64hE18ZX0oeSOgisWcZGH0D6fOymsD35yx60S2Y74_T5IMZQyNR2b_AjCs51W/s320/rss-cube.png) no-repeat top left;
}
#sectionmy .sectionmy2 h2.email { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizupoU_u7nP31RzclQ3FjROsaT8xWsw0vxciURwj_FjpNjSJwroWj4dHbMp6bc01UbmWiBlSwZlKctUOX-8NsECESTGbSrDTTyqq6r7wqt1E6Qi6j7dVB33pshZA14sLvkmctC1RD1ClQr/s320/mail-square.png) no-repeat top left;
}
#sectionmy .sectionmy2 h2.twitter { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKHfuFgB8PMpBC2M-HlAtRMd88XKiPsBp_pkEZmO_agiI5yTR-lM7eyiuG0GZJYRPm2dqENj1eoGvKOdOusE1g1Vgtf7QhJbIUBJUEslhVrM8F8h3JdtPMXcxPeUVzLFHDUPrMw3rHDfLh/s320/twitter-bird3-square.png) no-repeat top left;
}
#sectionmy .sectionmy2 h2.facebook { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIL6IR1jKXSPnmtZAVkxLNvZHlIYau3hNs-Vbo0Zk7fNvsIKnf_aHBObdr6hfcbPSRgAI3PHXqfdI6MQTdeebYLrjYjL3cBVoz3xdWu7j7uOU5hfD2FCTcxYARCFV7STK_3BDEg2ecYYKC/s320/facebook-logo-square.png) no-repeat top left;
}
#sectionmy .sectionmy2 h2.linkedin { background:url(http://i9.photobucket.com/albums/a65/mamanunes/linkedin-logo-square2.png) no-repeat top left; }




#sectionmy .sectionmy2 .subscription a {
color:#000000;
text-decoration:none;
}
#sectionmy .sectionmy2 .subscription a:hover{
color:#993300;
text-decoration:underline;
}

</style>

Para configurar é muito simples, primeiro para trocar as imagnes basta substituir os links que estão em negrito. Para configurar as cores do widget basta alterar os códigos indicados em vermelho.

Segundo passo: você irá adicionar um gadget conforme a foto abaixo, o local fica a gosto do blogueiro no lugar que preferir no seu layout.

E adicione o seguinte código:

<div id='hsection'><div id='sectionmy'>
<div class='sectionmy2'>
<h2 class='subscription rss'>
<a href='http://feeds.feedburner.com/DicasParaBlogger'>Assine este Feed</a></h2>
<h2 class='subscription email'>
<a href='http://feedburner.google.com/&loc=pt_BR'>Dicas via email</a></h2>
<h2 class='subscription twitter'>
<a href='http://www.twitter.com/'>Siga-me no Twitter</a></h2>
<h2 class='subscription facebook'>
<a href='http://www.facebook.com/'>Siga-me no Facebook</a></h2>
<h2 class='subscription linkedin'>

<a href='http://br.linkedin.com/'>Siga-me no LinkedIn</a></h2>
</div></div></div>

Pronto, agora se tiverem alguma dúvida basta entrar em contato.