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

En este tutorial veremos como agregar nuestros perfiles de Google, Facebook y Twitter en nuestro blog, no son exactamente iguales pero si muy similares, podemos utilizarlos en un gadget como así también en una entrada.

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

.gplus {
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  margin: 20px auto 0;
  position: relative;
  width: 240px; Ancho de la caja
}
.gplus > * {
  font: normal 13px Roboto,arial,sans-serif;
}
.gplus .minicover {
  height: 150px; Ancho de la Imagen
  overflow: hidden;
  position: relative;
  width: 240px; Ancho de la imagen
}
.gplus .dp {
  margin-bottom: -40px;
  position: relative;
  text-align: center;
  top: -40px;

}
.gplus .dp img {
  border: 5px solid #fff;
  border-radius: 50%;
  height: 80px;
  transition: all .65s ease-in-out;
  width: 80px;
}
.gplus .dp img:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}
.gplus .overlay {
  background-color: black;
  filter: alpha(opacity=18);
  height: 135px;
  left: 0;
  opacity: .18;
  position: absolute;
  right: 0;
  top: 0;
}
.gplus .info {
  padding: 4px 8px 10px;
  text-align: center;
}
.gplus .info .fn {
  color: #262626;
  font-size: 24px;
  margin-bottom: 4px;
}
.gplus .info .fn a {
  color: #262626;
  text-decoration: none;
  transition-duration:.218s;
}
.gplus .info .fn a:hover {
  text-decoration: underline;
}
.gplus:hover .info .fn a {
  color: #427FED;
  cursor: pointer;
}
.gplus .info p {
  color: #737373;
  font-size: 12px;
  line-height: 25px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

• Paso 4: Guardamos los cambios realizados en la plantilla 

Ahora agregaremos nuestro perfil de Google + en una entrada o Gadget HTML/Javascript

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

<section class="gplus">
  <img class="minicover" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik9aRxiPYwvzYgaHq9ufnN7VieYtEvMHq0OCCqNfwg_37UFJWlP8LjTrnNBWeYmvrm8kOjIaUSvo3EAmgQQkq3nGzEhMMMRpqtfeZEYgLvRyr2vtFk-HecQW7DoyWKB-UPsiritmzYaaU/s1600/Google.png" alt="Tutoriales-Blogger.info" />
  <div class="overlay"></div>
  <div class="dp">
    <a href="https://plus.google.com/u/0/102309934171768207604" target="_blank">
      <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash1/373016_528329323844286_1604877010_q.jpg" />
    </a>
  </div>
  <div class="info">
    <p class="fn">
      <a href="https://plus.google.com/u/0/102309934171768207604" target="_blank">Tutoriales Blogger</a>
      <nobr></nobr>
    </p>
    <p class="bio">
      <nobr>Tips y Tutoriales para blogger</nobr>
    </p>
    <p class="location"><nobr>Siguenos en Google+</nobr></p>
  </div>
</section>

• Paso 6: Ya tendriamos nuestro perfil de Google+ en nuestro blog

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 Google+