Como adicionar um widget de feed e das mídias sociais personalizado
Autor: Tunados.net | Publicado: 2011-04-17T09:40:00-07:00

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: &lt;/head&gt;&lt;style type='text/css'&gt;#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(http://3.bp.blogspot.com/_DCJ4PAWLOdE/S4-yn1FCYcI/AAAAAAAADsY/LT4BXVzKmq4/s320/rss-cube.png) no-repeat top left;}#sectionmy .sectionmy2 h2.email { background:url(http://3.bp.blogspot.com/_DCJ4PAWLOdE/S4-y_EKtmgI/AAAAAAAADsg/v7L-jIlM5hA/s320/mail-square.png) no-repeat top left;}#sectionmy .sectionmy2 h2.twitter { background:url(http://4.bp.blogspot.com/_DCJ4PAWLOdE/S4-ySVvNX7I/AAAAAAAADsA/Dd9bO5678lQ/s320/twitter-bird3-square.png) no-repeat top left;}#sectionmy .sectionmy2 h2.facebook { background:url(http://4.bp.blogspot.com/_DCJ4PAWLOdE/S4-yXIEGojI/AAAAAAAADsI/pklgjL0MElo/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;}&lt;/style&gt;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:&lt;div id='hsection'&gt;&lt;div id='sectionmy'&gt;&lt;div class='sectionmy2'&gt;&lt;h2 class='subscription rss'&gt;&lt;a href='http://feeds.feedburner.com/DicasParaBlogger'&gt;Assine este Feed&lt;/a&gt;&lt;/h2&gt;&lt;h2 class='subscription email'&gt;&lt;a href='http://feedburner.google.com/&amp;loc=pt_BR'&gt;Dicas via email&lt;/a&gt;&lt;/h2&gt;&lt;h2 class='subscription twitter'&gt;&lt;a href='http://www.twitter.com/'&gt;Siga-me no Twitter&lt;/a&gt;&lt;/h2&gt;&lt;h2 class='subscription facebook'&gt;&lt;a href='http://www.facebook.com/'&gt;Siga-me no Facebook&lt;/a&gt;&lt;/h2&gt;&lt;h2 class='subscription linkedin'&gt;&lt;a href='http://br.linkedin.com/'&gt;Siga-me no LinkedIn&lt;/a&gt;&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;Pronto, agora se tiverem alguma dúvida basta entrar em contato.