Tutoriales Sobre Blogger: Agregar información en el pie de Una Imagen con Enlace

En este tutorial veremos como agregarles informacion adicional en el pie de una imagen con CSS. Muchas veces utilizamos tooltips  para agregar una información a una imagen pequeña, pero para una imagen
demasiado grande no es normal agregarle un tooltips. Para ello agregaremos información sobre el pie de la imagen.


Antes de comenzar veremos una demostración

Demostración

Comencemos:

• Paso 1: Vamos a Blogger>>Plantilla>> Edición HTML>>
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

• Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente código CSS 

.imgteaser {
    margin: 0;
    overflow: hidden;
    float: left;
    position: relative;
}
.imgteaser a {
    text-decoration: none;
    float: left;
}
.imgteaser a:hover {
    cursor: pointer;
}
.imgteaser a img {
    float: left;
    margin: 0;
    border: none;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
}
.imgteaser a .more {
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 1.2em;
    color: #fff;
    background: #000;
    padding: 5px 10px;
    filter:alpha(opacity=65);
    opacity:.65;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}
.imgteaser a:hover .desc{
    display: block;
    font-size: 1.2em;
    padding: 10px 0;
    background: #111;
    filter:alpha(opacity=75);
    opacity:.75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
    color: #fff;
    position: absolute;
    bottom: 11px;
    left: 11px;
    padding: 10px;
    margin: 0;
    width: 566px;
    border-top: 1px solid #999;
}
.imgteaser a:hover .desc strong {
    display: block;
    margin-bottom: 5px;
    font-size:1.5em;
}
.imgteaser a .desc {    display: none; }
.imgteaser a:hover .more { visibility: hidden;}

• Paso 4: Guardamos los cambios efectuados en la plantilla  

Ahora queda agregar la información en una entrada 

• Paso 5: Agregaremos el codigo HTML en una entrada 

<div class="imgteaser">
<a href="#">
    <img alt="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ6fQrZmwxbwVRnT1S8zYrkbC4k6vo78ZVknGBb2MV0T2ooUN-_NbjS9DXCrZNPf57s_FSEkGCd0vXDUTULe7DmBNn-BIjiBQsL0ndGR-H-8xfTaLVj2wvuvSOJPk6fswDGpYPY_o-RTw/s330/Tutoriales+Blogger1.png" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ6fQrZmwxbwVRnT1S8zYrkbC4k6vo78ZVknGBb2MV0T2ooUN-_NbjS9DXCrZNPf57s_FSEkGCd0vXDUTULe7DmBNn-BIjiBQsL0ndGR-H-8xfTaLVj2wvuvSOJPk6fswDGpYPY_o-RTw/s640/Tutoriales+Blogger1.png" width="640" />
    <span class="more">» Leer Mas</span>
    <span class="desc">
        <strong>Lorem ipsum</strong>
        Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.
    </span>
</a>
</div>

• Paso 6: Listo ya tendremos nuestra imagen con  información adicional 

Nota:- Nota solo deberás de cambiar #  por enlace a dicha imagen. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ6fQrZmwxbwVRnT1S8zYrkbC4k6vo78ZVknGBb2MV0T2ooUN-_NbjS9DXCrZNPf57s_FSEkGCd0vXDUTULe7DmBNn-BIjiBQsL0ndGR-H-8xfTaLVj2wvuvSOJPk6fswDGpYPY_o-RTw/s330/Tutoriales+Blogger1.png por la imagen a mostrar