Tutoriales Sobre Blogger: Agregar perfiles de Facebook, Google+ y Twitter en nuestro blog (Hoy Facebook)

Siguiendo con los tutoriales sobre como agregar perfil de Facebook, Google+ y Twitter, hoy seguimos con Facebook, como eh dicho en la entrada anterior no son idénticas pero si muy parecidas



Antes de comenzar veremos una demostración:
Demo

Comencemos:

• 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 código  CSS  

.fb {
  border: 1px solid #777;
  border: 1px solid rgba(0, 0, 0, .45);
  border-bottom: 1px solid #777;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
  margin: 10px auto;
  position: relative;
  width: 370px;
}
.fb > * {
  font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
}
.fb .minicover {
  background-color: #3B5998;
  height: 200px;
  overflow: hidden;
  position: relative;
  width: 370px;
}
.fb .minicover img {
  bottom: 0;
  left: 0;
  position: absolute;
  width: px;
}
.gradient-shadow {
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,.75) 100%);
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);
  background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);
  background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);
  bottom: 0;
  height: 80px;
  position: absolute;
  width: 370px;
}
.fb .info {
  left: 110px;
  line-height: 1.2;
  max-width: 250px;
  min-height: 37px;
  position: absolute;
  top: 150px;
}
.fb .info span {
  display: block;
}
.fb .info span a {
  color: #fff;
  padding-bottom: 1px;
  text-decoration: none;
  text-shadow: 1px 1px 0px #000;
}
.fb .info span a:hover {
  text-decoration: underline;
}
.fb .fn {
  font-size: 14px;
  font-weight: bold;
}
.fb .seguidores {
  font-size: 11px;
}
.fb .dp {
  display: inline-block;
  margin: -62px 10px 5px;
  position: relative;
}
.fb .dp img {
  border: 3px solid #fff;
  border-radius: 2%;
  box-shadow:#ddd;
  display: block;
  width: 80px;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}
.fb .dp:hover, .fb .dp img:hover {
  border-radius: 50%;
}

• Paso 4: Guardamos los cambios realizados en la plantilla

Ahora agregaremos nuestro perfil de facebook en un gadget HTML/Javascript o en una entrada 

• Paso 5: Dentro de un gadget HTML/Javascript o una entrada pegamos el siguiente código HTML

<section class="fb">
  <div class="minicover">
    <img src="http://3.bp.blogspot.com/-FekFa4rzJRc/Um6dmWtPq7I/AAAAAAAABcI/Vce0EWjBHq4/s1600/Fecebook.png" alt="imron fhatoni cover" />
    <div class="gradient-shadow"></div>
  </div>
  <div class="info">
    <span class="fn">
      <a href="https://www.facebook.com/TutorialesBlogger">Tutoriales-Blogger.info</a>
    </span>
    <span class="seguidores">
      <a href="https://www.facebook.com/TutorialesBlogger"><br>A 61 personas les gusta esta pagina</a>
    </span>
  </div>
  <div class="dp">
      <a href="https://www.facebook.com/TutorialesBlogger">
      <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash1/373016_528329323844286_1604877010_q.jpg" />
      </a>
  </div>
</section>

• Paso 6: Ya tendriamos nuestro perfil de Facebook en una entrada o gadget

Nota:-  Solo debemos cambiar lo que esta en Rojo por URL de tus imágenes
Nota:- Cambia lo que esta Oojo por el la URL de tu Perfil de Facebook