ICONOS SOCIALES CON EFECTO HOVER

by Blogs Famag - noviembre 22, 2020

ICONOS SOCIALES CON EFECTO HOVER.

Los iconos sociales cada día cobran mas importancia y es por ello que se ha hecho casi indispensable que todo sitio web tenga un pack de iconos sociales con sus diferentes redes sociales. Es por ello que hoy en Mil Trucos Blogger te presentamos un pack de iconos sociales con efecto hover, al pasar el cursor sobre ellos dejan su forma redonda y se vuelven cuadrados. Los iconos sociales son los siguientes:

Para agregar estos botones en tu blog pega el siguiente código CSS antes de ]]></b:skin> :

Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:

1 Un clic en “Plantilla”

2 Un clic en “Editar HTML”

Ahora se te abrirá el Editor HTML de tu plantilla

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,

debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,

3 Busca el siguiente código

]></b:skin>

Cuando lo hayas Encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste

/* BOTONONES SOCIALES */

.fb-icon, .gp-icon, .t-icon, .rss-icon {

-moz-transition: all 300ms ease-in-out 0s;

-webkit-transition: all 300ms ease-in-out 0s;

-o-transition: all 300ms ease-in-out 0s;

transition: all 300ms ease-in-out 0s;

border: 3px solid #FFFFFF;

border-radius: 40px;

float: left;

height: 40px;

margin: 0 7px 0 0;

opacity: 0.8;

width: 40px;

}

.fb-icon:hover, .gp-icon:hover, .t-icon:hover, .rss-icon:hover {

border-radius: 0;

opacity: 1;

}

.fb-icon{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK2nwGFsuVQK0_1Y8i4f9Sc-vlpTF0Fj9ejCRSctVbQhVO2ttrn8YRbN09vu-hLL6ibDqNqIcyraxgH3OhupbhZQjA4PFTsab2EKtYtXnkOv1A7sM2L0iZqeiuf5f4dId8hVPdsTlma1zn/h120/f-logo.jpg") no-repeat scroll 0 0 transparent}

.gp-icon{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRCsITz-waHXo5VS3nVuGSfsfRqbJq5FNGKrIAfKq13B0q2BxFp0rj4BUaHW2EBFkGiNWT7HupLHX5S6hvgVPzfw9EiZ-fk4AAKKhyXV9yy1-hyBG-9lTJxXltfz0UU_6Ym7Af9_xFvwBF/h120/g-logo.jpg") no-repeat scroll 0 0 transparent}

.t-icon{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHvh2-iAhtS91ameK1lNjh3BPH5eQRLFVJ5gPWEmYUDJzneUzEmOad7PbP_hKrQk0_g4cUgcXpnTLVNBnYAnk9mFgXqTw2P3Org2AJ9SHthyphenhyphen08NMj3JSMZc_-IT5xUVqL1okCcVczVBEfL/h120/t-logo.jpg") no-repeat scroll 0 0 transparent}

.rss-icon{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXVxP8JMXVuzG8tik6QejMtO5jI1TVZxeblYLFAHPqM_-puET7mfv7nqs49RiIwEN4DovAL_c6hBGhnmcZ7SW-sychppoQVhu6elafZb8sollCLfebyXQBdmWdSU3K6M8rk7zj8qrww_O8/h120/rss-logo.jpg") no-repeat scroll 0 0 transparent}

Ahora ve a Diseño, Añadir gadget, HTML/JavaScript y pega lo siguiente:

Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:

Ir a Blogger

1-Un clic en “Diseño”