curso SEO Local
Grupo SEO TELEGRAM [Click Aquí]
Resultados 1 al 3 de 3
Tema:

Botones de YouTube CSS3.

  1. #1
    Avatar de trabajosweb
    trabajosweb está desconectado Registrado

    User Info Menu

    Predeterminado Botones de YouTube CSS3.


    Los botones de YouTube CSS3, lo puedes colocar en cualquier tipo de página que tengas y de temática, que le quieras dar un mejor aspecto y profesionalidad a tu sitio. Como está en la sección de Blogger, lo haré para los Bloggers.

    Los botones de YouTube CSS3, son exactamente, como se ven en la imagen, que se puede apreciar más arriba.

    El código CSS que tienes que colocar en el blog, para que funcione estos botones, es el siguiente:

    Código:
    #soywebmaster {
    background: url("http://2.bp.blogspot.com/-k8j0QxpWR8c/UAVqTxMHNqI/AAAAAAAAFBs/AV5L070keK4/s400/boton-youtube-ajmrdesign.png");
    margin: 0;
    padding: 0;
    height:30px;
    line-height:30px;
    width: 120px;
    color:#ffffff;
    font-size: 15px;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    border-top: 1px solid #3c6c32;
    border-left: 1px solid #3c6c32;
    border-right: 1px solid #3c6c32;
    border-bottom: 1px solid #000000;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0px 0px 3px #cacaca;
    -webkit-box-shadow: 0px 0px 3px #cacaca;
    box-shadow: 0px 0px 3px #cacaca;
    }
    #soywebmaster:hover {
    background: url("http://2.bp.blogspot.com/-k8j0QxpWR8c/UAVqTxMHNqI/AAAAAAAAFBs/AV5L070keK4/s400/boton-youtube-ajmrdesign.png") 0% 100%;
    -moz-box-shadow: 0px 0px 3px #6b6969;
    -webkit-box-shadow: 0px 0px 3px #6b6969;
    box-shadow: 0px 0px 3px #6b6969;
    }
    #soywebmaster a, #soywebmaster a:hover {
    color:#ffffff !important;
    }
    
    #soywebmaster2 {
    background: url("http://2.bp.blogspot.com/-JlCaA50AxwI/UAVqTsjg3PI/AAAAAAAAFBg/yg5TYZII2TI/s400/boton2-youtube-ajmrdesign.png");
    margin: 0;
    padding: 0;
    height:30px;
    line-height:30px;
    width: 120px;
    color:#ffffff;
    font-size: 15px;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    border-top: 1px solid #0053a6;
    border-left: 1px solid #0053a6;
    border-right: 1px solid #0053a6;
    border-bottom: 1px solid #000000;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0px 0px 3px #cacaca;
    -webkit-box-shadow: 0px 0px 3px #cacaca;
    box-shadow: 0px 0px 3px #cacaca;
    }
    #soywebmaster2:hover {
    background: url("http://2.bp.blogspot.com/-JlCaA50AxwI/UAVqTsjg3PI/AAAAAAAAFBg/yg5TYZII2TI/s400/boton2-youtube-ajmrdesign.png") 0% 100%;
    -moz-box-shadow: 0px 0px 3px #6b6969;
    -webkit-box-shadow: 0px 0px 3px #6b6969;
    box-shadow: 0px 0px 3px #6b6969;
    }
    #soywebmaster2 a, #soywebmaster2 a:hover {
    color:#ffffff !important;
    }
    Si eres muy, muy, principiante y no sabes donde colocar este código, sólo entra en la edición de HTML de tu blog, al cual le quieres agregar los botones de YouTube CSS3 y antes de ]]></b:skin> pegas el CSS mencionado anteriormente.

    Cuando quieras y en donde quieras que aparezcan los botones debes de colocar lo siguiente:

    Código HTML:
    1.1 - Color verde - <div id="soywebmaster">Ejemplo de SoyWebmaster</div>
    
    1.2 - Color azul - <div id="soywebmaster2">Ejemplo de SoyWebmaster</div>
    Y cambias el texto que dice Ejemplo de SoyWebmaster, y colocas el texto que quieras que aparezca en el botón. Claramente puedes ver que el primer botón es de color Verde, osea el primer código sólo es para colocar el botón Verde, y el segundo para colocar el color azul.

    Saludos amigos y espero que les sirva este pequeño Tutorial de Botones de YouTube CSS3.

  2. #2
    Avatar de pedrosocialmedia
    pedrosocialmedia está desconectado Registrado
    Rango: Soy accionista de Google!!

    User Info Menu

    Predeterminado

    Una vez más, darte las gracias por este gran aporte. Muy interesante.

  3. #3
    Avatar de trabajosweb
    trabajosweb está desconectado Registrado

    User Info Menu

    Predeterminado

    Cita Iniciado por pedrosocialmedia Ver Mensaje
    Una vez más, darte las gracias por este gran aporte. Muy interesante.
    Gracias a ti hermano, a mí me gusta también el aporte, son excelentes los botones.

Temas Similares

  1. Fade álbum V2, efecto con CSS3 para blogger
    Por trabajosweb en el foro Blogger
    Respuestas: 4
    Último Mensaje: 23/08/2013, 00:21
  2. insertar botones flash por medio de un include
    Por reeld en el foro General SoyWebmaster
    Respuestas: 1
    Último Mensaje: 20/10/2012, 07:09
  3. Buscador de YouTube CSS3 para Blogger
    Por trabajosweb en el foro Blogger
    Respuestas: 0
    Último Mensaje: 29/09/2012, 22:07
  4. CSS3 Playground - Generador de CSS3
    Por trabajosweb en el foro General SoyWebmaster
    Respuestas: 0
    Último Mensaje: 12/09/2012, 00:50
  5. Botones del PHPBB en PSD
    Por xavierx en el foro Webmasters Porno
    Respuestas: 0
    Último Mensaje: 13/01/2007, 14:09

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •  
Has visto el post " Botones de YouTube CSS3." que está en esta URL y ha sido creado por el usuario trabajosweb. Esperamos que te haya sido de utilidad el artículo " Botones de YouTube CSS3." que inició el usuario trabajosweb de Soywebmaster.com.

Otros Foros de Interés

Curso SEO - Foro SEO - Foro Programacion - Foro Diseño Web - Intercambio de Enlaces - Negocios por Internet - Como Ganar Dinero - Foro Hosting - Foro Apuestas Deportivas

ÚLTIMOS ARTÍCULOS DEL BLOG SEO DE DAVID AYALA

El Curso de SEO Local que estabas esperando
SEO para Webs de Adultos
MÉTODOS EFICACES para Indexar Enlaces en Google
Webinar: Keyword Research (Con Emilio García)
Usamos cookies que analizan hábitos de comportamiento y navegación que aceptas al navegar aquí. Política de privacidad | Cookies | Aviso legal