Staff en línea
Últimos temas
[widget] Iconos Sociales que giran y cambian de color al pasar el cursor Origin10[widget] Crear mp
por citrato Mar Jul 21, 2020 5:05 am

[widget] Iconos Sociales que giran y cambian de color al pasar el cursor Origin10[widget] Aviso flotante
por citrato Lun Jul 20, 2020 8:14 am

[widget] Iconos Sociales que giran y cambian de color al pasar el cursor Origin10[recursos] Pack Rangos
por PeruxD Miér Jul 15, 2020 4:37 am

[widget] Iconos Sociales que giran y cambian de color al pasar el cursor
Tema iniciado por y Añadir a favoritos

staff
[codebox]
[widget] Iconos Sociales que giran y cambian de color al pasar el cursor QUvyzVC

hola amigos en este dia los dejare con unos codigos para colocar sus redes sociales de una forma diferente a las conocidas esto se puede colocar en anuncios, widgets, etc.
[/codebox]
Creador: Jonathan Lozano
Probado por: Dosh
Función: Widget de redes sociales
Fuente: Aqui.

[hidecode]
Código:
<style type="text/css">
.MilTrucosBlogger-Social img{
border-radius: 50%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.Facebook-Social{
-webkit-filter: grayscale(100%);
}
.Facebook-Social:hover{
-webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.Twitter-Social{
-webkit-filter: grayscale(100%);
}
.Twitter-Social:hover{
-webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.GooglePlus-Social{
-webkit-filter: grayscale(100%);
}
.GooglePlus-Social:hover{
-webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.YouTube-Social{
-webkit-filter: grayscale(100%);
}
.YouTube-Social:hover{
-webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.RSS-Social{
-webkit-filter: grayscale(100%);
}
.RSS-Social:hover{
-webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
<div class="MilTrucosBlogger-Social">
<!--Facebook--><a href="URL FACEBOOK" target="_blank"><img class="Facebook-Social" src="http://4.bp.blogspot.com/-1KHbJBKyVGE/UfWZ7_7srVI/AAAAAAAADxI/HoWoYzJ6IWY/s1600/Facebook.png" width="48" height="48"></a>
<!--Twitter--><a href="URL TWITTER" target="_blank"><img class="Twitter-Social" src="http://3.bp.blogspot.com/-CVGXUXWGXFs/UfWZ8k9WTbI/AAAAAAAADxg/fbB7j-gifFM/s1600/Twitter.png" width="48" height="48"></a>
<!--Google Plus--><a href="URL GOOGLE PLUS" target="_blank"><img class="GooglePlus-Social" src="http://1.bp.blogspot.com/-UepQee72j4s/UfWZ71vJycI/AAAAAAAADxU/Hjqb7S3JHMQ/s1600/Google-plus.png" width="48" height="48"></a>
<!--Youtube--><a href="URL YOUTUBE" target="_blank"><img class="YouTube-Social" src="http://1.bp.blogspot.com/-cyIL3xcJOZQ/UfWZ80FdsNI/AAAAAAAADxs/W8dHT-kO5C0/s1600/Youtube.png" width="48" height="48"></a>
<!--RSS--><a href="URL RSS" target="_blank"><img class="RSS-Social" src="http://2.bp.blogspot.com/-sc0wZAPZEVI/UfWZ8CqDvnI/AAAAAAAADxY/KIXCFRzqO3Q/s1600/RSS.png" width="48" height="48"></a>
</div>
[/hidecode]

- En esta parte del codigo deben colocar la url de sus redes sociales.

[widget] Iconos Sociales que giran y cambian de color al pasar el cursor RqRTCoV

- En caso de no tener alguna de estas redes es solo cosa de borrar un par de códigos por ejemplo todos los que aparecen en el cuadrado rojo.

- Por ultimo si les quedan cargados para algún lado es cosa de marcar todo el código y luego centrarlo obvio..

- Si quieren algo parecido al widget de foro activo les recomiendo usar estas imágenes: Aqui.
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 :

1700


Puntos :

2460


Me gusta :

468


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


http://www.telefoneros.com/

Volver arriba Ir abajo

 En la misma categoria


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