Tutoriales Sobre Blogger: Agregar información en una imagen para 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzDcbswTcNozJgHgw2fmHn9ksGfDRvUp61dOFi5M1XrSTpgvb8ou8Y9cl_ywXAYvy3lzhkQTntVHppmLfzwMWa1UBAvdCBS5lMUbWFOzAEwp8MhHwBBMfKXRgrIKY17NbR2cDcMTSc_kY/s1600/Caja+de+Comentarios+de+Google++en+Blogger.png" />
</div>

Nota:-  Solo debemos lo que esta en Rojo por la información de la imagen
Nota:-  Cambia lo que esta en Rojo por las URL de la imagen