Aqui eu de novo trazendo uma partilha de box semáforo de redes sociais.
Pode vêr na imagem acima o resultado final ,é uma box com efeito hover ás cores .
Com icones simples e hover nos botôes e texto...
Visualize esta box online:  ENTRE AQUI...

Agora entre em esquema do seu blog e adicione um gadget html/javascript e cole o meu código:


<style type="text/css">
.rssboxb-t{background:#fbc8d1;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:250px}
.rssboxb-t:hover{background:#fd482f;border:1px solid #92aed1}
.rssboxb-t a{color:#262f38;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssboxb-t a:hover{color:#fcfcfc;text-decoration:none}
.emailsboxb-t{background:#fbc8d1;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:250px}
.emailsboxb-t:hover{background:#e1e001;border:1px solid #92aed1}
.emailsboxb-t a{color:#262f38;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsboxb-t a:hover{color:#fcfcfc;text-decoration:none}
.twitterboxb-t{background:#fbc8d1;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:250px}
.twitterboxb-t:hover{background:#856088;border:1px solid #92aed1}
.twitterboxb-t a{color:#262f38;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterboxb-t a:hover{color:#fcfcfc;text-decoration:none}
.facebookboxb-t{background:#fbc8d1;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:250px}
.facebookboxb-t:hover{background:#2fe4fd;border:1px solid #92aed1}
.facebookboxb-t a{color:#262f38;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookboxb-t a:hover{color:#fcfcfc;text-decoration:none}
</style>
<td><div class="rssboxb-t">
<a href="http://feeds.feedburner.com/SEU ID FEEDBURNER" target="_blank" rel="nofollow"><img src="http://i.imgur.com/eg1EdlI.png"  alt="FEED RSS" title="FEED RSS" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feeds.feedburner.com/SEU ID FEEDBURNER" target="_blank" rel="nofollow">FEED RSS</a>
</div></td>
<td><div class="emailsboxb-t">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=SEU ID FEEDBURNER" target="_blank" rel="nofollow"><img src="http://i.imgur.com/IBwPnXg.png"  alt="FEED EMAIL" title="FEED EMAIL" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=SEU ID FEEDBURNER" target="_blank" rel="nofollow">FEED EMAIL</a>
</div></td>
<tr>
<td><div class="twitterboxb-t">
<a href="http://twitter.com/SEU NOME TWITTER" target="_blank" rel="nofollow"><img src="http://i.imgur.com/9q4AExO.png"  alt="TWITTER" title="TWITTER" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://twitter.com/SEU NOME TWITTER" target="_blank" rel="nofollow">TWITTER</a>
</div></td>
<td><div class="facebookboxb-t">
<a href="http://www.facebook.com/SEU NOME FACEBOOK" target="_blank" rel="nofollow"><img src="http://i.imgur.com/6TjdpQ0.png"  alt="FACEBOOK" title="FACEBOOK" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://www.facebook.com/SEU NOME FACEBOOK" target="_blank" rel="nofollow">FACEBOOK</a>
</div></td>
</tr>
</div>
Feito isso vamos concluir
Procure isto  width:250px serâo 4 e troque pela medida de sua sidebar...
Procure isto  SEU ID FEEDBURNER e troque pelo seu id do feed...
Procure isto  SEU NOME TWITTER e troque pelo seu nome de twitter...
Procure isto   SEU NOME FACEBOOK e troque pelo seu nome do facebook...

E já está espero que lhe seja útil alguma dúvida disponha,até mais...

 
 
Back to top

Estatísticas

  • Postagens
  • Comentários
  • Visualizações
🔗 Contato✔ Apoio 🔗
Reservado © 2016 ❝ Autôr