Staff en línea
Últimos temas
[widget]  Iconos sociales con tooltip circular - Página 2 Origin10[html]Menú de enlaces simple
por Lelu Jue Nov 28, 2019 6:30 am

[widget]  Iconos sociales con tooltip circular - Página 2 Origin10[html]Menú dinámico
por Lelu Jue Nov 28, 2019 6:11 am

[widget]  Iconos sociales con tooltip circular - Página 2 Origin10[html]Escaparate de imágenes sencillo
por Lelu Jue Nov 28, 2019 6:02 am

[widget]  Iconos sociales con tooltip circular - Página 2 Origin10[Duda] ModernBB vale la pena?
por mrsrz Miér Nov 27, 2019 9:57 am

[widget]  Iconos sociales con tooltip circular - Página 2 Origin10[Ocio] Contemos hasta el 5000
por Fibo Miér Nov 27, 2019 9:19 am

Página 2 de 2. Precedente  1, 2

[widget] Iconos sociales con tooltip circular
Tema iniciado por y Añadir a favoritos

[widget] Iconos sociales con tooltip circular 
el Jue Ene 01, 2015 7:41 pm
staff
Recuerdo del primer mensaje :

[codebox][widget]  Iconos sociales con tooltip circular - Página 2 GSET4Mq

¿Que son los tooltips? Un tooltip (tambien llamada descripcion emergente) es una herramienta de ayuda visual, que funciona al situar el cursor sobre algun elemento grafico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra. Pues en este caso, esta aplicado mediante CSS3 a estos tres iconos (Google+, Twitter y Facebook) para que les de un efecto circular al pasar el cursor sobre ellos. Ya puedes ponerlos en la sidebar de tu blog (o donde quieras) para que enlacen con tus redes sociales.

Para ponerlo en tu blog o web, tan solo tienes que copiar este codigo y añadirlo a un widget.

Probado por: Dosh
Función: Destacar redes sociales
Fuente: Aqui.[/codebox]

[hidecode]
Código:
<ul class="md2-wrapper">
<li><a target="_blank" class="md2-gplus" href="URL GOOGLE+"><span>Google+</span></a></li>
<li><a target="_blank"class="md2-twitter" href="URL TWITTER"><span>Twitter</span></a></li>
<li><a target="_blank"class="md2-facebook" href="URL FACEBOOK"><span>Facebook</span></a></li>
</ul>


<style type="text/css">.md-wrapper{padding:0;width:435px;height:70px;margin:80px auto 30px auto;}.md-wrapper li{float:center;}.md-wrapper ol,ul{list-style:none;}.md-wrapper li a{display:block;width:68px;height:70px;margin:0 2px;outline:none;background:transparent url(http://2.bp.blogspot.com/-l81k5DdhS4c/TztjSugibrI/AAAAAAAACn0/8TZqmQbHxg0/s1600/%255Bwww.gj37765.blogspot.com%255D_social_gunman_icons.png) no-repeat top left;text-indent:-9000px;position:relative;}.md-wrapper li .md-gplus{background-position:0px 0px;}.md-wrapper li .md-twitter{background-position:-68px 0px;}.md-wrapper li .md-facebook{background-position:-204px 0px;}.md-wrapper li a span{width:100px;height:auto;line-height:20px;padding:10px;left:50%;margin-left:-64px;font-family:'Alegreya SC', Georgia, serif;font-weight:400;font-style:italic;font-size:14px;color:#719DAB;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);text-align:center;border:4px solid #fff;background:rgba(255,255,255,0.3);text-indent:0px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;pointer-events:none;bottom:100px;opacity:0;/*box-shadow*/-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.1);box-shadow:1px 1px 2px rgba(0,0,0,0.1);/*transition*/-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}.md-wrapper li a span:before,.md-wrapper li a span:after{content:'';position:absolute;bottom:-15px;left:50%;margin-left:-9px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(0,0,0,0.1);}.md-wrapper li a span:after{bottom:-14px;margin-left:-10px;border-top:10px solid #fff;}.md-wrapper li a:hover span{opacity:0.9;bottom:70px;}.md2-wrapper{padding:0;width:230px;height:70px;margin:80px auto 30px auto;}.md2-wrapper li{float:left;}.md2-wrapper ol,ul{list-style:none;}.md2-wrapper li a{display:block;width:68px;height:70px;margin:0 2px;outline:none;position:relative;z-index:2;background:transparent url(http://2.bp.blogspot.com/-l81k5DdhS4c/TztjSugibrI/AAAAAAAACn0/8TZqmQbHxg0/s1600/%255Bwww.gj37765.blogspot.com%255D_social_gunman_icons.png) no-repeat top left;text-indent:-9000px;}.md2-wrapper li .tt-gplus{background-position:0px 0px;}.md2-wrapper li .md2-twitter{background-position:-68px 0px;}.md2-wrapper li .md2-facebook{background-position:-204px 0px;}.md2-wrapper li a span{width:80px;height:80px;line-height:80px;padding:10px;left:50%;margin-left:-55px;font-family:'Alegreya SC', Georgia, serif;font-weight:400;font-style:italic;font-size:14px;color:#719DAB;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);text-align:center;border:5px solid #fff;background:rgba(255,255,255,0.5);text-indent:0px;position:absolute;pointer-events:none;/*border-radius*/-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;bottom:-40px;opacity:0;/*box-shadow*/-webkit-box-shadow:0px 3px 8px rgba(0,0,0,0.1);-moz-box-shadow:0px 3px 8px rgba(0,0,0,0.1);box-shadow:0px 3px 8px rgba(0,0,0,0.1);/*transform*/-webkit-transform:scale(0.2);-moz-transform:scale(0.2);-ms-transform:scale(0.2);-o-transform:scale(0.2);transform:scale(0.2);/*transition*/-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}.md2-wrapper li a:hover span{opacity:0.9;bottom:50px;/*transform*/-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);}.md3-wrapper{padding:0;width:435px;height:70px;margin:80px auto 30px auto;}.md3-wrapper li{float:left;}.md3-wrapper ol,ul{list-style:none;}.md3-wrapper li a{display:block;width:68px;height:70px;margin:0 2px;outline:none;position:relative;z-index:2;background:transparent url(http://2.bp.blogspot.com/-l81k5DdhS4c/TztjSugibrI/AAAAAAAACn0/8TZqmQbHxg0/s1600/%255Bwww.gj37765.blogspot.com%255D_social_gunman_icons.png) no-repeat top left;text-indent:-9000px;}.md3-wrapper li .md3-gplus{background-position:0px 0px;}.md3-wrapper li .md3-twitter{background-position:-68px 0px;}.md3-wrapper li .md3-facebook{background-position:-204px 0px;}.md3-wrapper li a span{width:80px;height:auto;padding:10px;left:50%;margin-left:-55px;font-family:'Alegreya SC', Georgia, serif;font-weight:400;font-style:italic;font-size:14px;color:#719DAB;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);text-align:center;border:5px solid #fff;background:rgba(255,255,255,0.5);text-indent:0px;position:absolute;pointer-events:none;bottom:-40px;opacity:0;/*box-shadow*/-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.1);box-shadow:0px 1px 2px rgba(0,0,0,0.1);/*transition*/-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;/*transform*/-webkit-transform:rotate(0deg) scale(0);-moz-transform:rotate(0deg) scale(0);-ms-transform:rotate(0deg) scale(0);-o-transform:rotate(0deg) scale(0);transform:rotate(0deg) scale(0);}.md3-wrapper li a:hover span{opacity:0.9;bottom:100px;/*transform*/-webkit-transform:rotate(-90deg) scale(1);-moz-transform:rotate(-90deg) scale(1);-ms-transform:rotate(-90deg) scale(1);-o-transform:rotate(-90deg) scale(1);transform:rotate(-90deg) scale(1);}.md4-wrapper{padding:0;width:435px;height:70px;margin:80px auto 30px auto;}.md4-wrapper li{float:left;}.md-wrapper ol,ul{list-style:none;}.md4-wrapper li a{display:block;width:68px;height:70px;margin:0 2px;outline:none;background:transparent url(http://2.bp.blogspot.com/-l81k5DdhS4c/TztjSugibrI/AAAAAAAACn0/8TZqmQbHxg0/s1600/%255Bwww.gj37765.blogspot.com%255D_social_gunman_icons.png) no-repeat top left;text-indent:-9000px;position:relative;}.md4-wrapper li .md4-gplus{background-position:0px 0px;}.md4-wrapper li .md4-twitter{background-position:-68px 0px;}.md4-wrapper li .md4-facebook{background-position:-204px 0px;}.md4-wrapper li a span{width:100px;height:auto;line-height:20px;padding:10px;left:50%;margin-left:-64px;font-family:'Alegreya SC', Georgia, serif;font-weight:400;font-style:italic;font-size:14px;color:#719DAB;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);text-align:center;border:4px solid #fff;background:rgba(255,255,255,0.3);text-indent:0px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;bottom:70px;opacity:0;visibility:visible;pointer-events:none;/*box-shadow*/-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.1);box-shadow:1px 1px 2px rgba(0,0,0,0.1);/*transform*/-webkit-transform:translate(35px) rotate(25deg) scale(1.5);-moz-transform:translate(35px) rotate(25deg) scale(1.5);-ms-transform:translate(35px) rotate(25deg) scale(1.5);-o-transform:translate(35px) rotate(25deg) scale(1.5);transform:translate(35px) rotate(25deg) scale(1.5);/*transition*/-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}.md4-wrapper li a span:before,.md4-wrapper li a span:after{content:'';position:absolute;bottom:-15px;left:50%;margin-left:-9px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(0,0,0,0.1);}.md4-wrapper li a span:after{bottom:-14px;margin-left:-10px;border-top:10px solid #fff;}.md4-wrapper li a:hover span{visibility:visible;opacity:0.9;/*transform*/-webkit-transform:translate(0px) rotate(0deg) scale(1);-moz-transform:translate(0px) rotate(0deg) scale(1);-ms-transform:translate(0px) rotate(0deg) scale(1);-o-transform:translate(0px) rotate(0deg) scale(1);transform:translate(0px) rotate(0deg) scale(1);}</style>
[/hidecode]
Dosh
Dosh

¿Que estoy pensando? :

Vuelve el hijo prodigo... [table class=fecha_up][td]Se modifico:1/010/18 - 15:59 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/JdnysKr.png


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

1698


Puntos :

2458


Me gusta :

468


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


http://www.telefoneros.com/

Volver arriba Ir abajo

Gracias por las aclaraciones; Pauu-, AlvaroX y Dosh.

Por lo pronto me conformaré con poner una frase bajo el avatar y a la derecha una "barra de votación".
Tao
Tao

¿Que estoy pensando? :

La cuarta dimensión [table class=fecha_up][td]Se modifico:8/09/16 - 23:52 hrs.[/td][/table]


Banner en temas :

http://coverjunction.s3.amazonaws.com/2012/131/6a42e7a0-25f2-4bac-8398-5a75a0eaf17f.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #333


Mensajes :

271


Puntos :

347


Me gusta :

54


ingreso :

04/01/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


http://lacuartadimension.foroactivo.com/

Volver arriba Ir abajo

Ooh voy a verlo si [widget]  Iconos sociales con tooltip circular - Página 2 953422333
july
july

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://4.bp.blogspot.com/-IsO0oLsCIOM/UbK9UmlI26I/AAAAAAAAAwk/5KdfinCXZT8/s1600/VioGirlTiFbCoverPic.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

12


Puntos :

14


Me gusta :

2


ingreso :

25/06/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

Ooh voy a verlo si [widget]  Iconos sociales con tooltip circular - Página 2 953422333
july
july

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://4.bp.blogspot.com/-IsO0oLsCIOM/UbK9UmlI26I/AAAAAAAAAwk/5KdfinCXZT8/s1600/VioGirlTiFbCoverPic.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

12


Puntos :

14


Me gusta :

2


ingreso :

25/06/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo


es bueno porque las redes ocupan bastante espacio
muykay
muykay

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

https://2img.net/h/oi64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

67


Puntos :

70


Me gusta :

3


ingreso :

07/09/2017


Sexo :

Masculino

Plataforma :

punBB


Navegador :

Chrome


Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.