domingo, 17 de abril de 2011

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(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;
}

</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.

2 comentários:

edilene - amor disse...

valeu
amigao!
obrigada!!
genio!!!

edilene - amor disse...

seja membro e apareça nas buscas,
veja mais:

http://envialinks.com/links/newtechsound-como-adicionar-um-widget-de-feed-e-das-m%C3%ADdias-sociais-personalizado-2112771149/admin/link-avatar

Postar um comentário

divulque

Blogoteca

Boas matérias

 

NewTechSound

Amazing Counters
Toshiba Satellite Laptops