Instalar botones de redes sociales con tooltips

Comparteme :

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. De todos modos puedes modificar los iconos de las redes sociales, por las que más interese, veamos, ahora sí, la demostración que verás seguidamente, pasa el cursor por encima del botón.

Demostración

Pasos a seguir:

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}
}

Siguiente paso es la instalación del 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>

Comparteme :

Author : Bloguero Tutorial

Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?

Instalar botones de redes sociales con tooltips.

Comparte

BLOGUERO TUTORIAL