IMÁGENES CON EFECTO ZOOM EN BLOGGER

by - noviembre 22, 2020

IMAGENES CON EFECTO ZOOM EN BLOGGER.


 


En esta oportunidad les compartire un gran truco en el cual las imagenes del blog quedan con un genial efecto zoom al pasar el cursor sobre ellas, este genial truco se logra mediante CSS.


Para agregar este truco pega el siguiente 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




/* Contenedor general y reset de margin y padding */
.expandir * {
margin: 0;
padding: 0;
}
.expandir {
font-family:Arial, Helvetica, sans-serif;
line-height:normal;
margin:20px auto 30px;
height:80px;
width:530px;
}
/* Las imágenes irán en forma de lista */
.expandir ul {
padding-top:10px;
margin-left:10px;
}
/* Se hacen flotar los elementos para que queden en línea y se elimina el estilo que podría haber predefinido para listas */
.expandir ul li {
float:left;
list-style-type:none;
}
/* Anulamos estilo predifinido para enlaces en listas */
.expandir ul li a {
text-decoration:none;
}
/* Estilo de cada imagen en situación inicial y transición suave */
.expandir ul li a img {
width:32px; /* Ancho inicial imagénes. 50% real */
height:32px; /* Alto inicial imagénes. 50% real */
border:none;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
transition: all .3s ease-in;
}
/* El texto que acompaña a las imágenes no se ve inicialmente */
.expandir ul li a span {
display:none;
}
/* Mostramos el texto al hacer hover */
.expandir ul li:hover a span {
display:block;
font-size:14px;
text-align:center;
color:#000;
}
/* Agrandamos la imagen al hacer hover */
.expandir ul li:hover a img {
width:64px;
height:64px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

En el anterior codigo vienen incluidas algunas lineas para explicar un poco el contenido del CSS.

Ahora agrega el siguiente HTML en la parte que quieras (puede ser un elemento HTML/JavaScript)

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 class=»expandir»>
<ul>
<li><a href=»URL_Destino1«><img src=»IMAGEN1«/><span>TEXTO1</span></a></li>
<li><a href=»URL_Destino2«><img src=»IMAGEN2«/><span>TEXTO2</span></a></li>
<li><a href=»URL_Destino3«><img src=»IMAGEN3«/><span>TEXTO3</span></a></li>
</ul>
</div>





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




Lo que se indica en verde corresponde a la URL del destino,a la URL de la imagen y el texto a mostrar.

Para agregar otras imagenes solo debes añadir la siguiente estructura (antes de </ul>)



<li><a href=»URL_Destino«><img src=»IMAGEN«/><span>TEXTO</span></a></li>








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





Publicado por:                                                  
Tags : , ,

You May Also Like

0 comentarios

Created with by ThemeXpose