Adblock Detectado

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

He desactivado Adblock

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="http://4.bp.blogspot.com/-punWDiCj8KQ/UnBF6RR1mlI/AAAAAAAABeA/F5khy81bP9I/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
- - 0 Comentarios
Tag

Comentarios (0)

:))
:((
: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