Íconos que crecen con Efecto CSS

Íconos que crecen con Efecto CSS.

Hacer crecer los íconos que tengamos en nuestra página es algo que se puede hacer muy fácilmente a través de un efecto CSS y un Gadget HTML/Javascript, solo debemos colocar el siguiente estilo CSS en la plantilla por encima de la etiqueta </head> de la siguiente manera;




Vamos a "Plantilla"
                                                                 

Abre "Editar HTLM"

                                                                       

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,
a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

Y colocas dentro este codigo </head> y le das un Enter para que lo busque.

Una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste antes:

<style type="text/css">

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}

.bubblewrap li img{
width: 64px; /*Ancho de cada imagen*/
height: 64px; /*Alto de cada imagen*/
border:0;
margin-right: 1px; /*Espacio entre cada imagen al crecer*/
-moz-transition:-moz-transform 0.1s ease-in;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
-ms-transition:-o-transform 0.1s ease-in;
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*Escala en la que crece la imagen 1.8x*/
-webkit-transform:scale(1.8); /*Escala en la que crece la imagen 1.8x*/
-o-transform:scale(1.8); /*Escala en la que crece la imagen 1.8x*/
-ms-transform:scale(1.8); /*Escala en la que crece la imagen 1.8x*/
}

</style>

Luego debemos crear un Gadget HTML/Javascript de la siguiente manera:

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

                                                                       

<ul class="bubblewrap">
<li><a href="URL que redirecciona 1"><img src="URL del ícono 1 .png" title="Título de la página 1" /></a></li><li><a href="URL que redirecciona 2"><img src="URL del ícono 2 .png" title="Título de la página 2" /></a></li><li><a href="URL que redirecciona 3"><img src="URL del ícono 3 .png" title="Título de la página 3" /></a></li><li><a href="URL que redirecciona 4"><img src="URL del ícono 4 .png" title="Título de la página 4" /></a></li><li><a href="URL que redirecciona 5"><img src="URL del ícono 5 .png" title="Título de la página 5" /></a></li>
</ul>

RECOMENDACIONES: El alto y ancho de cada ícono lo da el estilo, se recomienda que el tamaño original de la imagen al subirla a la red sea el apróximado al tamaño que tendrá el ícono al crecer, por ejemplo, si se va a dejar el tamaño de ejemplo 64px X 64px lo ideal sería que el ícono original tuviera unas medidas de 128px X 128px ya que la resolución que se toma cuando el ícono crece es la original de la imagen, y si se sube una imagen de 64px X 64px al hacerla crecer se podría ver un poco borrosa.

La distancia entre cada ícono que sale en el estilo es de 1px y se aplica con los íconos en su mayor tamaño, es decir, cuando se visualiza el efecto, entonces, si se piensa dejar el gadget en una columna se recomienda hacerlo con no más de tres íconos, o si se piensan dejar varios íconos, es mejor hacerlo con unas medidas por ejemplo de 30px X 30px.

Es recomendable no cambiar la escala (1.8) en el estilo, ya que es algo que su autor dejó como medida ideal luego de haber realizado varias pruebas.

Importante: El procedimiento se puede realizar también en una entrada, lógicamente en modo HTML, pero es importante que nunca se pase a modo Redactar o se perderá el efecto, se separaría el contenido del código y sería mejor volverlo a agregar en modo HTML y reemplazar su contenido con nuestra información.

Si quieren que los enlaces se abran en otra pestaña o ventana, visiten la siguiente ENTRADA para que conozcan la forma de hacerlo directamente desde la plantilla, o agregándole un código target="_blank" a cada enlace en dado caso de que esta sea la primera vez que aplican un tutorial de Charkleons.com para Blogger.

 Fecha de la Publicación; 30-12-2018

 Fuente;

 Publicado por;