Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
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

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="http://2.bp.blogspot.com/-y8C2wJ0z5Uo/UMZgU_ACVOI/AAAAAAAAAPs/2VZ_jiujsqU/s330/Tutoriales%2BBlogger1.png" height="204" src="http://2.bp.blogspot.com/-y8C2wJ0z5Uo/UMZgU_ACVOI/AAAAAAAAAPs/2VZ_jiujsqU/s640/Tutoriales%2BBlogger1.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. http://2.bp.blogspot.com/-y8C2wJ0z5Uo/UMZgU_ACVOI/AAAAAAAAAPs/2VZ_jiujsqU/s330/Tutoriales%2BBlogger1.png por la imagen a mostrar
- - 0 Comentarios
Tag

Comentarios (0)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar