DESAYUNO CON GADGETS: blogger

Mis blogs

ICONOS DE SUSCRIPCIÓN CON EFECTODE BORDES REDONDEADOS.

Haciendo uso nuevamente de la propiedad img class=»redondeado» expuesta por El Potro tiempo atrás hoy he creado unos iconos de suscripciones con bordes redondeados que al pasar el cursor sobre ellos despliegan un bello efecto.

A continuacion una imagen de como funciona el truco.

Para agregar este truco a tu blog pega antes de ]]></b:skin> el siguiente codigo:

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>

.redondeado {

border-radius: 50%; /* Borde redondeado */

box-shadow: 0px 0px 15px #000; /* Sombra */

padding:0;

border:0;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

.redondeado:hover {

box-shadow: 0; /* Con esto eliminamos la sombra */

border-radius: 0; /* Con esto eliminamos el borde redondeado */

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

cursor:pointer;

}

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

Ahora en un elemento HTML/JavaScript pega lo siguiente :

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

Ir a Blogger

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo

4-Coloca el siguiente codigo en el interior

</div>

Despues de haber insertado el código, un clic en "Guardar"

Fecha de la Publicación; 22/11/2020

Fuente miltrucosblogger.

Publicado por:

noviembre 22, 2020 No comentarios

ICONOS DE SUSCRIPCIÓN QUE GIRAN AL PASAR EL CURSOR.

Hacía ya mucho tiempo que no dedicaba tiempo a diseñar nuevos trucos de botones sociales, así que hoy que he tenido algo de tiempo libre decidí hacer unos iconos de suscripción para Blogger (también sirven para Wordpres ) que con un pequeño efecto CSS giran cuando se pasa el cursor por encima de ellos.

Para agregar este truco a tu blog de Blogger, ve a Diseño, Añadir Gadget, HTML/JavaScript, estando allí pega lo siguiente:

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

Ir a Blogger

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo

4-Coloca el siguiente codigo en el interior

<style>

#socialicons img{

-moz-transition: all 0.8s ease-in-out;

-webkit-transition: all 0.8s ease-in-out;

-o-transition: all 0.8s ease-in-out;

-ms-transition: all 0.8s ease-in-out;

transition: all 0.8s ease-in-out;}

#socialicons img:hover{

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg);}

</style>

Despues de haber insertado el código, un clic en "Guardar"

Fecha de la Publicación; 22/11/2020

Fuente miltrucosblogger.

Publicado por:

noviembre 22, 2020 No comentarios

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”

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo

4-Coloca el siguiente codigo en el interior

</a></a></a></a></div>

Para finalizar reemplaza lo que esta resaltado en color azul por lo que se indica en cada caso y guarda los cambios.

Despues de haber insertado el código, un clic en "Guardar"

Fecha de la Publicación; 22/11/2020

Fuente miltrucosblogger.

Publicado por:

noviembre 22, 2020 No comentarios

IMAGEN CON TEXTO SOBREPUESTO EN BLOGGER.

En esta oportunidad les traigo un genial truco que consta de una imagen con texto sobrepuesto en Blogger:

Para agregar este truco ve a la Edición HTML de tu blog y antes de ]]></b:skin> agrega lo siguiente:

ara 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

.imagen-con-historia {

position: relative;

display: block;

padding:0;

width: 500px;

margin: 0 auto;

}

.imagen-con-historia img {

max-width:500px;

max-height:auto;

z-index:1;

border:none;

margin:0;

padding:0;

}

.imagen-con-historia span {

background: #111;

opacity:0;

margin:0;

-moz-transition: 400ms;

-webkit-transition: 400ms;

-o-transition:400ms;

transition: 400ms;

color: #fff;

position: absolute;

top: 0;

left: 0;

width: 480px;

padding: 10px;

border-top: 1px solid #999;

z-index:10;

}

.imagen-con-historia span:hover {

opacity:.55;

}

Guardas los cambios.

Ahora cada vez que quieras utilizar una imagen con texto ve a la Edición HTML de la entrada y pega el siguiente código:

<span>

Escribe el texto que contendrá la imagen acá

</span>

</div>

Fecha de la Publicación; 22/11/2020

Fuente miltrucosblogger.

Publicado por:

noviembre 22, 2020 No comentarios

Older Posts

Mis blogs

Buscar en este blog

Sobre Mi

Datos personales

Etiquetas

Posts Recientes

Archivos del blog

Mis Blogs de Blogger