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

Ya vimos nuestras Redes Sociales mas utilizadas como Facebook, Google+ y Twitter y dije ¿por que no Youtube?, aunque no es una Red Social muchos quisieran tener suscriptores para sus vídeos. OK aquí el tutorial de Youtube.

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 

.youtube {
  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: 450px;
}
.youtube > * {
  font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
}
.youtube .minicover {
  background-color: #3B5998;
  height: 200px;
  overflow: hidden;
  position: relative;
  width: 450px;
}
.youtube .minicover img {
  bottom: 0;
  left: ;
  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: 200px;
  position: absolute;
  width: 450px;
}
.youtube .info {
  left: 300px;
  line-height: 1.2;
  max-width: 300px;
  min-height: 37px;
  position: absolute;
  top: 120px;
}
.youtube .info span {
  display: block;
}
.youtube .info span a {
  color: #fff;
  padding-bottom: 1px;
  text-decoration: none;
  text-shadow: 1px 1px 0px #000;
}
.youtube .info span a:hover {
  text-decoration: underline;
}
.youtube .fn {
  font-size: 14px;
  font-weight: bold;
}
.youtube .seguidores {
  font-size: 11px;
}
.youtube .dp {
  display: ;
  margin: -200px 10px 5px;
  position: relative;
}
.youtube .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;
}
.youtube .dp:hover, .fb .dp img:hover {
  border-radius: 50%;
}

• Paso 4: Guardamos los cambios realizados en la plantilla.

Ahora agregaremos nuestro Perfil de Youtube en un gadget o una entrada.

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

<section class="youtube">
  <div class="minicover">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbithpJjdmJpJo_afDUqfuIbtrwAse5o1fUc6cfaRi3E4kKTYig1Y9hpRsX0WBo1TMdrTjfEh4IRWPM_93s0yXe75mPUBnqa2C8UutV_x278sIKxuNkv2mSgDaNAl7W5D4UoVDOMdKGnE/s1600/Youtube.png" alt="Tutoriales Blogger" />
    <div class="gradient-shadow"></div>
  </div>
  <div class="info">
    <span class="fb">
     <script src="https://apis.google.com/js/plusone.js"></script>
<div class="g-ytsubscribe" data-channel="ID de Youtube" data-layout="default"></div>
    </span>
  </div>
  <div class="dp">
    <a href="URL DE SUSBCRIPCION YOUTUBE">
      <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash1/373016_528329323844286_1604877010_q.jpg" />
      </a>
  </div>
</section>

• Paso 6: Ya estariamos disfrutando de nuestro perfil de Youtube 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 suscripción de Youtube y la ID de Youtube