IMAGEN CON TEXTO SOBREPUESTO EN BLOGGER

by - noviembre 22, 2020

IMAGEN CON TEXTO SOBREPUESTO EN BLOGGER.


 



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:



ara instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:




1 Un clic en “Plantilla”                                        





   2 Un clic en “Editar HTML”                                          




  Ahora se te abrirá el Editor HTML de tu plantilla





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, 



3 Busca el siguiente código



]></b:skin> 


Cuando lo hayas Encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste






.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>





 Fecha de la Publicación;  22/11/2020





Publicado por:                                               
Tags : , ,

You May Also Like

0 comentarios

Created with by ThemeXpose