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

OK! Terminaremos con los tutoriales de como agregar los Perfiles de tus Redes Sociales tales como Facebook, Google+ y ahora Twitter. Sin mas rodeos seguiremos con el tutorial



Antes de comenzar veremos una demostracion:
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. 

.twitter {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVYZ2-0EVWiztlDtCnMVGrnd8EWbs8RYKa-X9iT_R8pgNf9KgEZM-Ghrhyphenhyphen6t0Uh6WO0-GV5-tomTNGgMHgox3s4WsNeWxCyQCvydmPhyphenhyphenwaFdiUhHTn-uw2OYpb7DST5IEQ6hPYurRGiDA/s1600/Twitter.png);
  border-radius: 5px;
  color: #fff;
  font-family: "Helvetica Neue", Arial, sans-serif;
  height: 260px;
  margin: 20px auto 0;
  position: relative;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0,0,0,.7);
  width: 520px;
}
.twitter .overlay {
  background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0.55) 100%);
  border-radius: 5px;
  height: 260px;
  position: absolute;
  width: 520px;
}
.twitter .inner {
  margin: auto;
  padding: 10px;
  position: relative;
  width: 85%;
}
.twitter .dp-a {
  display: inline-block;
  margin: 10px auto;
}
.twitter .dp {
  background-color: #fff;
  border: 4px solid #fff;
  border-radius: 5px;
  box-shadow: 0 1px 1px rgba(0,0,0,.25);
  height: 73px;
  width: 73px
}
.twitter h1, .twitter h2, .twitter p {
  margin: 6px 0;
}
.twitter a {
  color: #fff;
  text-decoration: none;
}
.twitter a:hover {
  text-decoration: underline;
}
.twitter .fn {
  font-size: 24px;
  line-height: 1;
}
.twitter s {
  text-decoration: none;
}
.twitter .username {
  font-size: 18px;
  font-weight: normal;
  line-height: 24px;
}
.twitter .bio {
  font-size: 14px;
  line-height: 18px;
}
.twitter .location, .twitter .url {
  font-size: 14px;
}
.twitter .divider {
  padding: 0 2px;
}

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

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

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

<section class="twitter">
  <div class="overlay"></div>
  <div class="inner" data-screen-name="merroski" data-user-id="258131416">
    <a class="dp-a" href="https://twitter.com/TutorialesBlogg" target="_blank">
      <img class="dp" src="https://pbs.twimg.com/profile_images/378800000619005054/6c192715aba7584487c444bc1328cd30_bigger.jpeg" alt="Imron fhatoni" />
    </a>
    <h1 class="fn">Blogger Tutoriales</h1>
    <h2 class="username"><s>@</s>TutorialesBlogg</h2>
    <p class="bio" lang="es">Tutoriales para blogger, CSS, HTML, Javascript, JQuery, Monetizar nuestro blog, SEO, Tips y Tutoriales</p>
    <p class="location-and-url">
      <span class="siguenos">Visitanos en:</span>
  <span class="divider"></span>
      <span class="url">
        <a target="_blank" rel="me nofollow" href="https://twitter.com/TutorialesBlogg" title="@TutorialesBlogg">
          Tutoriales-Blogger.info
        </a>
      </span>
    </p>
  </div>
</section>

• Paso 6: Ya estaríamos disfrutando de nuestro perfil de Twitter 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 Twitter