Os voy a enseñar una manera original de presentar imagenes en vuestro blog. Es un codigo muy cortito en el que he utilizado CSS para 'cuadrar' la imagen que queramos mostrar y que aparecera en el interior de un monitor.
Lo primero que nos hace falta es la imagen de dicho monitor. En este caso he utilizado esta que veis aqui debajo en formato png, a la que le he 'quitado' la pantalla con un editor y la he dejado transparente para que muestre la instantanea que nos interese.
La url de esta imagen ya la he incluido en el codigo, pero podeis descargarosla haciendo click en ella.
A continuacion podeis ver el codigo, donde debeis sustituir lo que esta en color azul por la url de vuestra imagen que debe tener 480px de ancho X 300px de alto que es la Imagen que esta puesta para que la cosa quede bien.
Tambien podeis redimensionarla de tamaño para adaptarla a vuestras necesidades, modificando un poco el CSS de dicho codigo, claro.
<div align="center"><div style="background:url(AQUI LA URL DE TU IMAGEN);width:480px;height:300px;border-radius:20px;">
<img style="position:relative;top:-5px;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJoIzPEvmsx_cI2oF0cIlREZG2nkCThFlPQq7THo2agFdO4OEBoR8EuHbDECTRHSTLDpJ0WWwaf6YgnuvCZ_I-AiKWFlNlOjAR3ArMUwMQWKJ0E7o-ulmp7YiTIFfBx6jB3FCuy28VhK4/s1600/monitor.png" />
</div></div>
<img style="position:relative;top:-5px;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJoIzPEvmsx_cI2oF0cIlREZG2nkCThFlPQq7THo2agFdO4OEBoR8EuHbDECTRHSTLDpJ0WWwaf6YgnuvCZ_I-AiKWFlNlOjAR3ArMUwMQWKJ0E7o-ulmp7YiTIFfBx6jB3FCuy28VhK4/s1600/monitor.png" />
</div></div>
Fecha de la Publicación;31-07-2019
Fuente; redeando
Publicado por;
0 Comments