En está ocasión me gustaría compartir otra forma o método de agregar botones de redes sociales, con el efecto denominado tooltip, usando CSS3, cómo hemos visto en las otras entradas anteriores, explicando qué son y para que sirven, pero en está coyuntura, he encontrado otra configuración diferente, a la vista en otras circunstancias, pero tampoco muy diferente. Estos tooltips están desarrollados por Alessio Atzeni. He recreado a mi manera, modificando los iconos y el tooltip, cambiando colores, y los botones de las redes sociales más importantes hoy en día, según mi criterio, para un blog o web. De todos modos podéis modificar los iconos de las redes sociales, por las que más os intersese, a vosotros, veamos, ahora sí, la demostración que verás seguidamente, pasa el cursor por encima del botón.
- Hazte Fan!
- Perfil de stumble!
- Seguir en twitter!
- Canal de youtube!
- Cuenta en Instagram!
- Tablero Pinterest!
- Seguir en Google+!
Ahora añadiremos estos botones de redes sociales, en Blogger!
- Entra en Blogger.
- Y ahora ves a Plantilla & Editar HTML.
- Copia y pega los siguientes CSS.
- Una vez copiado el CSS, busca con Ctrl+F la etiqueta ]]></b:skin>:
- Y antes de dicha etiqueta añade los siguientes estilos.
#masterpanel{margin-left:40px}
#masterpanel ul{padding:0; margin:0; list-style:none}
#masterpanel ul li{padding:0; margin:0; position:relative}
#masterpanel ul li a{background-color:transparent; background-repeat:no-repeat; background-position:50% 0; padding:0 10px; margin:0 5px; float:left; height:64px; width:64px; text-decoration:none; position:relative}
a.tfacebook{background-image:url(https://lh4.googleusercontent.com/jleBWStjR4utzPxIrw987WZt6ygHTGheiZM-skAleXM8=s64-no)}
a.tstumble{background-image:url(https://lh5.googleusercontent.com/XZl4YsnAtfMANehobtC1QM8lFgWDhAzOWEDSooALoqwp=s64-no)}
a.ttwitter{background-image:url(https://lh5.googleusercontent.com/-ygAelYpbxKc/U5dI81gGAaI/AAAAAAAAUis/vGswwURBEQc/s64-no/1402441057_Twitter.png)}
a.tyoutube{background-image:url(https://lh3.googleusercontent.com/-Mas51ujMhdA/U5dJqrGR7xI/AAAAAAAAUjU/owv4mlk2au4/s64-no/1402441143_YouTube.png)}
a.tinstagram{background-image:url(https://lh5.googleusercontent.com/-M6bwv_ZXFk8/U5dK0N6pmeI/AAAAAAAAUko/sBMmeUhVWw8/s64-no/1402441098_Instagram.png)}
a.tpinterest{background-image:url(https://lh6.googleusercontent.com/-h9IBD-G306o/U5dJ6vPcdTI/AAAAAAAAUjo/EeRtSTZ5AU0/s64-no/1402441109_pinterest.png)}
a.tgoogle{background-image:url(https://lh6.googleusercontent.com/--Jlsq6a1BpI/U5dKkTj91lI/AAAAAAAAUkU/PbNrzuRMfgY/s64-no/1402441071_GooglePlus.png)}
#masterpanel a small{background-color:Black; border-radius:10px; color:#FFF; display:none; font-family:Consolas,sans-serif; font-size:11px; font-weight:normal; -moz-box-shadow:0 5px 10px #666; -webkit-box-shadow:0 5px 10px #666; box-shadow:0 5px 20px #666; width:80px; padding:5px; line-height:1; text-align:center}
#masterpanel a:hover small{display:block; position:absolute; top:0px; left:0; margin-top:-35px; z-index:9999; -moz-animation:mymove .25s linear; -webkit-animation:mymove .25s linear}
@-moz-keyframes mymove{0%{-moz-transform:scale(0,0); opacity:0}
50%{-moz-transform:scale(1.2,1.2); opacity:0.3}
75%{-moz-transform:scale(0.9,0.9); opacity:0.7}
100%{-moz-transform:scale(1,1); opacity:1}
}
@-webkit-keyframes mymove{0%{-webkit-transform:scale(0,0); opacity:0}
50%{-webkit-transform:scale(1.2,1.2); opacity:0.3}
75%{-webkit-transform:scale(0.9,0.9); opacity:0.7}
100%{-webkit-transform:scale(1,1); opacity:1}
}Ahora añadiremos el HTML de los botones con Tooltips!
- Estando en plantilla; busca con Ctrl+F la etiqueta </body>.
- Una vez encontrada dicha etiqueta, añades el HTML antes de </body>
- También el HTML, lo puedes colocar entrando en Diseño and HTML/JAVASCRIPT.
- Recuerda que debes de remplazar todas la "#" por las URL de tu red social.
<div id="masterpanel"><ul id="mainpanel"><li><a href="#" class="tfacebook"><small>Hazte Fan!</small></a></li> <li><a href="#" class="tstumble"><small>Perfil de stumble!</small></a></li> <li><a href="#" class="ttwitter"><small>Seguir en twitter!</small></a></li> <li><a href="#" class="tyoutube"><small>Canal de youtube!</small></a></li> <li><a href="#" class="tinstagram"><small>Cuenta en Instagram!</small></a></li> <li><a href="#" class="tpinterest"><small>Tablero Pinterest!</small></a></li> <li><a href="#" class="tgoogle"><small>Seguir en Google+!</small></a></li> </ul></div>
En el código HTML, debes de remplazar todas las "#" por la ruta de las distintas redes sociales, puedes modificar, las imágenes de los iconos de la redes sociales, por las que desees tú, puedes quitar o añadir más redes sociales a tu antojo, eliminando o añadiendo, en la lista ordenada por los DIV id="masterpanel" eliminando la línea <li> y </li> que quieres eliminar o añadir. En el código CSS, debes de eliminar, si no quieres una red social, esto, por ejemplo: a.tpinterest{background-image:url(https://lh6.googleusercontent.com/-h9IBD-G306o/U5dJ6vPcdTI/AAAAAAAAUjo/EeRtSTZ5AU0/s64-no/1402441109_pinterest.png)}; eliminando está línea del código CSS, eliminaríamos el botón Pinterest, igualmente deberíamos de hacer lo mismo en el código HTML, es decir, eliminaríamos esto: <li><a href="#" class="tpinterest"><small>Tablero Pinterest!</small></a></li>. Bueno, espero que guste.
Alessio Atzeni
Get free premium widgets for your blog and website.