google-site-verification: googlef94a841391369fbf.html ...voce ja viu? kdvc?ADSBLEBbeleza1receitas3xdicasbloggerrpatricinhasdinheiroAmormensagensdiversificadas anunciosoaartesanatoedeuquemfizassuntosnomomentotrocadebannerspyxyenvialinksdicas de tuudokissesdatas especiaischineloclinicadosblogso que eo que efacebook/facebook/edihittmeuspagerankMensagens Diversificadas... fonte:olobloggerPERSONALIZAR LOS BOTONES PARA COMPARTIR DE BLOGGERNo hace mucho comente lo de la incorporacion del boton Pinterest en el gadget de botones socialesde Blogger y en aquel momento recorde que tenia pendiente (entre otras muchas cosas), explicaros la manera en que se pueden personalizar esos botones para cambiar un poco su aspecto.Los botones originales estan construidos mediante CSS sprites y por eso tecnicamente es facil cambiarlos mediante la simple sustitucion de esa imagen que sirve de base. No obstante, como Blogger aplica automaticamente su propio CSS, tambien sera necesario ajustar un poco esas reglas.Por otra parte esta el boton +1 que se anade de manera distinta, por lo que veremos asimismo como cambiar su codigo para que esteticamente sea del mismo estilo que los otros.Veamos paso a paso todo esto y al final el codigo para hacerlo de una sola vez.Disenar una imagen con los nuevos botonesEsta es la parte en la que la mana de cada cual marcara el resultado final. Se trata de construir una sola imagen que contenga de forma ordenada las imagenes individuales de todos los botones.En un principio lo mas comodo seria tomar la imagen de la izquierda que es la que usa Blogger, cambiar su contenido respetando los limites para cada boton y por ultimo, sustituir la original por la nuestra. Este es el caso sencillo, pero para ver mas casos ya voy a empezar a destrozar cosas.De entrada no las voy a hacer de 18px como las originales, sino de 24px. Tendran fondo transparente y en lugar de tres imagenes por boton voy a usar solo dos, una para el estado normal en tonos de gris y otra a color para cuando se pase el puntero por encima.Lo basico es ser cuidadosos y que todas las imagenes esten ubicadas exactamente dentro de un cuadrado imaginario de 24x24px (en este ejemplo) y que cada uno este bien acoplado con sus adyacentes sin dejar ni un pixel de mas o de menos.Para mas informacion ver este otro articulo sobre como hacerRollover con CSS y sprites y este otro sobre Generadores de sprites.Que de momento no quereis calentaros la cabeza con esto? Pues nada, usad esta imagen de la izquierda que es la que yo voy a utilizar en el ejemplo.Anadir estilo para sobreescribir el de BloggerPara el estilo de sus botones, Blogger mete automaticamente CSS cuando carga cada pagina, razon por la que no es visible en la plantilla y no lo podemos modificar, pero lo que si podemos hacer es anadir nuestro propio CSS e incluir !importantdonde sea necesario para que nuestras reglas tengan prioridad.Hay muchas que no hay que modificar y como al final del post incluyo las necesarias, no voy a hacer aqui una relacion exhaustiva y solo voy a destacar la que incorpora el sprite. Es esta y ya incluye la nueva imagen que os mostre antes:.share-button {width: 24px !important;height: 24px !important;background: url(http://4.bp.blogspot.com/-UKVaH5Nkc2s/UwizNGFng1I/AAAAAAAAOgc/69D47XdF9NA/s1600/sprite-redes24.png) no-repeat left !important;overflow: hidden;margin: 2px !important;position: relative;}Notese que he tenido que redimensionar a 24px y