Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
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(http://1.bp.blogspot.com/-zwwVtRuWDEQ/Um6dnBY4DsI/AAAAAAAABcQ/nW5sg5sAaMs/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
- - 1 Comentarios
Tag

Comentarios (1)

  1. Nice blog right here! Also your site quite a bit up very fast!
    What host are you the usage of? Can I get your associate hyperlink in your host?
    I want my website loaded up as quickly as yours lol

    My site; Hugegenic male enhancer (www.ekiblog.com)

    ResponderEliminar
:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar