Widget profesional con redes sociales para Blogger

En este tutorial veremos como implementar un excelente y bello widget con redes sociales como Facebook, Twitter, Google+ y linkedin para nuestro blog de Blogger.

Ademas de tener un aspecto bonito es muy útil para promover nuestro sitio web en las  redes sociales ya que al implementarlo le daremos un empujón a nuestros usuarios para que nos sigan en las diversas redes sociales.Ya que como lo he dicho anteriormente cada vez son mas importante las redes sociales y son mejor vistas por los motores de búsqueda, por lo que al tener un mayor impacto social tendrás un mejor SEO social.

 Como añadir este widget a Blogger

Para instalarlo de manera correcta hay que seguir los siguientes pasos (Es muy sencillo):

Vamos a nuestra cuenta de Blogger e iniciamos sesión (Si no estamos logeados)

Luego seleccionamos nuestro blog y nos dirigimos a: Diseño >> Añadir Widget >> HTML y Javascript

A continuación en el widget que acabamos de crear pegamos el siguiente código:

<div class="btnt-chronicl-social"><ul><li><a class="rss" href="http://feeds.feedburner.com/TuUsuario">Suscribete a nuestro Feed</a></li> <li><a class="twitter" href="https://twitter.com/UsuarioTwitter">Siguenos en Twitter</a></li> <li><a class="facebook" href="https://www.facebook.com/TuPagina">Encuentranos en Facebook</a></li> <li><a class="google" href="https://plus.google.com/100090854666031755159" rel="author">Síguenos en Google+</a></li> <li><a class="linkedin" href="http://in.linkedin.com/UsuarioLinkedin">Conectate con nosotros en LinkedIn</a></li> <li><a class="youtube" href="http://www.youtube.com/user/Usuario">Miranos en Youtube</a></li> </ul></div><style type="text/css">.btnt-chronicl-social { width: 100%; } .btnt-chronicl-social ul { border: 1px solid #CCCCCC; margin: 0; padding: 0; } .btnt-chronicl-social ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #FFFFFF; } .btnt-chronicl-social ul li:first-child { border-top: 0 none; } .btnt-chronicl-social ul li:last-child { border-bottom: 0 none; } .btnt-chronicl-social ul li a { background-color: #F2F2F2 !important; color: #404040; display:block; } .btnt-chronicl-social ul li a:hover { background-color: #fafafa !important; } .btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; } .btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;} .btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; } .btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; } .btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; padding: 17.5px 60px; } .btnt-chronicl-social ul li .youtube { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Youtube-1.png") no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; } .social-about { display: none; }</style>

Una vez pegado el código anterior, debemos personalizarlo, es decir cambiar las urls por las de tus redes sociales que están  en color rojo, las partes en color azul también las podemos modificar por el texto que deseemos mostrar ya en la vista de nuestro widget. ya que si quieres un poco mas personalizado tu widget podrías cambiar el link de la imagen de cada red social cambiado las partes de color morado.

Recomendaciones a la hora de cambiar el icono

1. Que la imagen sea en formato .PNG.
2. La dimension de la imagen debe ser de 40x40. 
3. Subirlas a un hosting.