Tutoriales sobre Blogger

En este tutorial veremos como agregarles información a una imagen con solo CSS. Muchas veces queremos agregarles una breve descripción a una imagen y no sabemos como, lo único que se me ocurre en este momento es agregarle informació
n con un tooltip. Pero un tooltip no es el único método para agregarles información a una imagen, con este tutorial veremos que es mucho mas fácil agregarles información a una imagen.

Antes de comenzar veremos una demostracion:

Comencemos:

Demostración

Paso 1: Vamos a Blogger>> Plantilla>> Edicion 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.

.w{
margin:0 auto;
margin-top:10%;
width:300px;
height:300px;
position:relative;
border:1px solid rgba(0,0,0,.1);
border-radius:1px;
background:white;
box-shadow:0 0 22px 1px rgba(0,0,0,.3);
}
.w:after{
content:"";
width:70%;
left:15%;
bottom:10px;
z-index:-1;
height:40px;
position:absolute;
border-radius:150px/0px 0px 25px 25px;
box-shadow:0 3px 75px rgba(0,0,0,.6),0 6px 45px rgba(0,0,0,.6),0 0 65px rgba(0,0,0,.6);
}
.glass{
width:100%;
height:100%;
position:absolute;
background:linear-gradient(135deg ,rgba(255,255,255,.8) 0px, rgba(255,255,255,.2) 200px, rgba(255,255,255,.0) 201px, rgba(255,255,255,.0) 300px);
}
.glass:before{
content:"";
width:100%;
height:1px;
position:absolute;
background:rgba(255,255,255,.5);
margin-top:0px;
}
.Titulo{
text-shadow:1px 1px 2px rgba(0,0,0,.9);
z-index:1;
background:rgba(0,0,0,.6);
color:white;
display:inline-block;
position:absolute;
top:0;
left:0;
padding:5px 0px 5px 10px;
font:28px Myriad Pro;
margin-top:20px;
max-width:250px;
}
.Titulo:before{
content:"";
position:absolute;
width:10px;
height:100%;
box-sizing:border-box;
margin-top:-5px;
margin-right:-15px;
right:0;
border-left:15px solid rgba(0,0,0,.6);
border-top:15px solid rgba(0,0,0,.6);
border-bottom:15px solid rgba(0,0,0,0);
}
.descripcion{
text-shadow:1px 1px 2px rgba(0,0,0,.9);
font:11px Verdana;
background:rgba(0,0,0,.6);
color:white;
display:inline-block;
position:absolute;
bottom:0;
right:0;
max-width:250px;
margin-bottom:20px;
min-height:19px;
padding:5px 10px 5px 0px;
}
.descripcion:before{
content:"";
position:absolute;
width:10px;
height:100%;
box-sizing:border-box;
margin-top:-5px;
margin-left:-15px;
left:0;
border-right:15px solid rgba(0,0,0,.6);
border-top:15px solid rgba(0,0,0,.6);
border-bottom:15px solid rgba(0,0,0,0);
}

Paso 4: Dentro de una entrada pegamos el siguiente código HTML

<div class="w">
<div class="Titulo">
FERNANDO SALAS</div>
<div class="descripcion">
Administrador de Tutoriales-Blogger.info</div>
<div class="glass">
</div>
<img src="http://2.bp.blogspot.com/-8fPHadAh2e0/UXRFmU5CUpI/AAAAAAAAA9U/bP8YRqLmXuM/s1600/Caja+de+Comentarios+de+Google++en+Blogger.png" />
</div>