Vamos a darle un toque diferente a nuestros enlaces e imagenes utilizando CSS. Este efecto lo que hara es desplazar el enlace o imagen hacia la derecha al pasar el cursor por encima.
Para añadir este efecto en nustro blog o web, primero ponemos el codigo CSS en nuestra plantilla antes de </body> y guardamos.
Un clic en “Plantilla”
Un clic en “Editar HTML
Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación
En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, 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 le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.
Busca este código
</body>
Ingresa el siguiente código justo arriba del código que encontraste.
<style>.desplazamiento {-moz-transition: all 0.4s ease-out;-o-transition: all 0.4s ease-out; -webkit-transition: all 0.4s ease-out;-ms-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }.desplazamiento:hover {margin-left: 25px;padding-left: 5px;}</style>
Una vez hecho esto, cada vez que queramos mostrar un enlace de Texto, ponemos este codigo, modificando lo que esta en Azul:
<a class="desplazamiento" href="URL ENLACE">TEXTO</a>
Y cada vez que queramos mostrar una imagen, ponemos esto:
<a class="desplazamiento" href="URL ENLACE"><img height="200" src="URL IMAGEN" width="200" /></a>
Data de la Publicación; 02-09-2019
Fuente; redeando
Publicado por;
0 comentarios: