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 500px de ancho 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/AVvXsEgwE_6v9hBCQ3_zcLTRuf6RkEx773MUnOAtVEpZBvmV_E8WyOqfooqcIESQYv8NwvPcEzxcgL-UU3rNjqz1LQ1xMZtvYW_Y18uTblau3LRF4qkZzsVe67kdSwKjUJU5Dpw4zd6oWvY1QiI/s1600/monitor.png" />
</div></div>
Y el resultado lo teneis aqui. Podeis poner tanto imagenes estaticas o en movimiento en formato gif.
