Os voy a mostrar como implementar en vuestro blog o web unos iconos para que os sigan en las principales redes, por el feed y por correo. Como veis, tienen una forma circular muy elegante, creados con CSS y una sola imagen 'sprite'(los sprites son imagenes destinadas a ahorrarte tiempo de carga a la hora de llamar las imagenes en tu sitio web, cada sprite esta compuesto por un conjunto de pequeñas imagenes). Cuando pasas el cursor sobre ellos (efecto 'hover') estos cambian a sus respectivos colores. Ademas de todo esto, como estan realizados con una imagen png transparente, podemos cambiar el fondo del contenedor y el simbolo del color que queramos, para que se ajuste al tono de nuestra pagina. Para que veais de que os hablo, aqui teneis tres ejemplos, cada uno de un color.
Para ponerlo en tu blog o web, tan solo tienes que copiar el siguiente codigo y añadirlo en un gadget HTML. Donde esta indicado en color rojo, lo sustituyes por las respectivas urls de tus redes sociales, del feed y tu identidad de Feedburner para el correo. Para cambiar el color, sustituyes lo que esta en color azul por el color hexadecimal que quieras. Para ver codigos de colores entra en el probador de color aqui.
ver/ocultar codigo
<center><div class="socialicons"><a class="twitter" href="https://twitter.com/NOMBRETWITTER" target="_blank"></a><a class="facebook" href="http://www.facebook.com/" target="_blank"></a><a class="googleplus" href="https://plus.google.com/" target="_blank"></a><a class="rss" href="http://feeds.feedburner.com/NOMBREFEEDBURNER" target="_blank"></a><a class="email" href="http://feedburner.google.com/fb/a/mailverify?uri=NOMBREFEEDBURNER&loc=es_ES" target="_blank"></a></div></center>
<style>
.socialicons {
background: none repeat scroll 0 0 #000000;-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
height: 47px;
margin: 0 0 20px -20px;
padding: 13px 20px 10px;
width: 275px;
}
#footer-subscribe .socialicons {
background: none repeat scroll 0 0 transparent;
margin: 0 0 20px;
padding: 0;
}
.socialicons a {
display: block;
float: left;
height: 45px;
margin: 0 10px 0 0;
text-indent: -9999px;
width: 45px;
}
.socialicons .rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxwwbJDT-knB2rI_HTCaSle8hk5iyaWUTmZyDxFvSUpeHqZ-98cIYShACy_x6u6PnXFeA2QUWX_QEhRmROx1xoJOXEXV-NY38iviRL7onitjrt4W4fjukbakRwyWyDumICk1FhWACR5R0/s225/iconos%2520sprite%2520circulares%2520-%2520REDEANDO.png") repeat scroll 135px 45px transparent;
}
.socialicons .rss:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxwwbJDT-knB2rI_HTCaSle8hk5iyaWUTmZyDxFvSUpeHqZ-98cIYShACy_x6u6PnXFeA2QUWX_QEhRmROx1xoJOXEXV-NY38iviRL7onitjrt4W4fjukbakRwyWyDumICk1FhWACR5R0/s225/iconos%2520sprite%2520circulares%2520-%2520REDEANDO.png") repeat scroll 135px 0 transparent;
}
.socialicons .twitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxwwbJDT-knB2rI_HTCaSle8hk5iyaWUTmZyDxFvSUpeHqZ-98cIYShACy_x6u6PnXFeA2QUWX_QEhRmROx1xoJOXEXV-NY38iviRL7onitjrt4W4fjukbakRwyWyDumICk1FhWACR5R0/s225/iconos%2520sprite%2520circulares%2520-%2520REDEANDO.png") repeat scroll 180px 45px transparent;
}
.socialicons .twitter:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxwwbJDT-knB2rI_HTCaSle8hk5iyaWUTmZyDxFvSUpeHqZ-98cIYShACy_x6u6PnXFeA2QUWX_QEhRmROx1xoJOXEXV-NY38iviRL7onitjrt4W4fjukbakRwyWyDumICk1FhWACR5R0/s225/iconos%2520sprite%2520circulares%2520-%2520REDEANDO.png") repeat scroll 180px 0 transparent;
}
.socialicons .email {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxwwbJDT-knB2rI_HTCaSle8hk5iyaWUTmZyDxFvSUpeHqZ-98cIYShACy_x6u6PnXFeA2QUWX_QEhRmROx1xoJOXEXV-NY38iviRL7onitjrt4W4fjukbakRwyWyDumICk1FhWACR5R0/s225/iconos%2520sprite%2520circulares%2520-%2520REDEANDO.png") repeat scroll 90px 45px transparent;
}
.socialicons .email:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxwwbJDT-knB2rI_HTCaSle8hk5iyaWUTmZyDxFvSUpeHqZ-98cIYShACy_x6u6PnXFeA2QUWX_QEhRmROx1xoJOXEXV-NY38iviRL7onitjrt4W4fjukbakRwyWyDumICk1FhWACR5R0/s225/iconos%2520sprite%2520circulares%2520-%2520REDEANDO.png") repeat scroll 90px 0 transparent;
}
.socialicons .facebook {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxwwbJDT-knB2rI_HTCaSle8hk5iyaWUTmZyDxFvSUpeHqZ-98cIYShACy_x6u6PnXFeA2QUWX_QEhRmROx1xoJOXEXV-NY38iviRL7onitjrt4W4fjukbakRwyWyDumICk1FhWACR5R0/s225/iconos%2520sprite%2520circulares%2520-%2520REDEANDO.png") repeat scroll 0 45px transparent;
}
.socialicons .facebook:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxwwbJDT-knB2rI_HTCaSle8hk5iyaWUTmZyDxFvSUpeHqZ-98cIYShACy_x6u6PnXFeA2QUWX_QEhRmROx1xoJOXEXV-NY38iviRL7onitjrt4W4fjukbakRwyWyDumICk1FhWACR5R0/s225/iconos%2520sprite%2520circulares%2520-%2520REDEANDO.png") repeat scroll 0 0 transparent;
}
.socialicons .googleplus {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxwwbJDT-knB2rI_HTCaSle8hk5iyaWUTmZyDxFvSUpeHqZ-98cIYShACy_x6u6PnXFeA2QUWX_QEhRmROx1xoJOXEXV-NY38iviRL7onitjrt4W4fjukbakRwyWyDumICk1FhWACR5R0/s225/iconos%2520sprite%2520circulares%2520-%2520REDEANDO.png") repeat scroll 45px 45px transparent;
}
.socialicons .googleplus:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxwwbJDT-knB2rI_HTCaSle8hk5iyaWUTmZyDxFvSUpeHqZ-98cIYShACy_x6u6PnXFeA2QUWX_QEhRmROx1xoJOXEXV-NY38iviRL7onitjrt4W4fjukbakRwyWyDumICk1FhWACR5R0/s225/iconos%2520sprite%2520circulares%2520-%2520REDEANDO.png") repeat scroll 45px 0 transparent;
}
</style>
