En esta oportunidad les traigo un genial truco que consta de una imagen con texto sobrepuesto en Blogger:


Para agregar este truco ve a la Edición HTML de tu blog y antes de ]]></b:skin> agrega lo siguiente:

.imagen-con-historia {
    position: relative;
    display: block;  
    padding:0;
    width: 500px;
    margin: 0 auto;
}
.imagen-con-historia img {
    max-width:500px;
    max-height:auto;
    z-index:1;
    border:none;
    margin:0;
    padding:0;
}
.imagen-con-historia span {
    background: #111;
    opacity:0;
    margin:0;
    -moz-transition: 400ms;
    -webkit-transition: 400ms;
    -o-transition:400ms;
    transition: 400ms;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 480px;
    padding: 10px;
    border-top: 1px solid #999;
    z-index:10;
}
.imagen-con-historia span:hover {
    opacity:.55;
}

Guardas los cambios.

Ahora cada vez que quieras utilizar una imagen con texto ve a la Edición HTML de la entrada y pega el siguiente código:

<div class="imagen-con-historia">
<img src="URL-IMAGEN" />
<span>
Escribe el texto que contendrá la imagen acá
</span>
</div>

Vía/Ayuda Bloggers 

Categorías: Trucos Blogger

8 comentarios

Merlina · enero 29, 2012 a las 12:33 am

Hola! Yo no veo más ke el texto en negro pero la imagen no sale :-S… parece buenísimo pero no sé ké pasa ke no aparece =(

    Juvinao · enero 29, 2012 a las 8:49 pm

    Merlina eso depende del navegador que uses,yo uso Google Chrome y lo veo muy bien.

Juan Gonzalez · enero 29, 2012 a las 10:05 am

Hola Juvinao!

Estoy haciendo unas cuántas modificaciones en la plantilla de mi blog, y necesito tu banner de 128×128. Por favor, no me pases el de 125×125 ya que si coloco de 125125 la sidebar se me desfigura completamente, y no sé por qué.

P.D: Buen post, yo ya lo tenía colocado en mi blog! xD

Saludos Juvinao ! 😉

Merlina · enero 30, 2012 a las 3:26 am

Ah ok, es ke como no lo informas en el post pensé ke funcionaba con cualkier navegador =P.

    Juvinao · enero 30, 2012 a las 5:07 pm

    Si se me paso por alto,gracias por comentar 😀

Juan · febrero 4, 2012 a las 9:27 pm

Esta bueno este codigo pero lo malo
es que si la imagen es mas grande o mas chica el cuadro de texto no sera igual en todas la imagenes, sino que estara o mas chico o mas grande.
Tienes que modificar el «width: 480px;» pero se modificara en todas la imagenes q tengas y sera el mismo problema nuevamente.

Hay otra forma de hacerlo para que quede bien el cuadro de texto en cualquier tamaño de imagen??

Pero para hacerlo en una sola imagen esta bien. Gracias por el codigo xD

    Juvinao · febrero 5, 2012 a las 12:54 am

    Juan voy a mirar que se puede hacer para arreglar este pequeño problema con el codigo.Saludos 😛

Deja una respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *