Últimas publicaciones

Tutorial Redes Sociales

Todos los que nos movemos en el mundo de los blogs y trabajamos para que nuestras publicaciones lleguen al mayor número de personas posibles, sabemos de la importancia que tienen las Redes Sociales, que cada día cobran más fuerza y nos permiten acercar y difundir con mayor facilidad.

Para ello hoy os queremos mostrar cómo crear un Gadget en el que agrupar Facebook, Twitter, Google+, Pinterest e Email.

Los botones que se crean traen un efecto hover expansible, lo que hace que al pasar el cursor se despliegue el botón hacia la derecha, dando un efecto dinámico interesante.

Aquí tenéis en resultado:


¿Os gusta? Pues venga, vamos con el tutorial

La instalación es sencilla: Ve a Blogger.com - Diseño - Añadir un gadget - HTML/Javascript y pega allí el siguiente código:


<style>
#tbsose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbsose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbsose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbsose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbsose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
#tbsose .icon{overflow:hidden; color:#fafafa;}
#tbsose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbsose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbsose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbsose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbsose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbsose li:hover .icon,
.touch #tbsose li .icon{width:210px;}
.touch #tbsose li .facebook, #tbsose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbsose li .twitter, #tbsose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbsose li .googleplus, #tbsose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbsose li .pinterest, #tbsose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbsose li .rss, #tbsose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="tbsose">
<li data-alt="Síguenos en Facebook"><a class="icon facebook" href="http://www.facebook.com/TU_USUARIO_FACEBOOK" target='_blank'>Síguenos en Facebook</a></li>
<li data-alt="Síguenos en Twitter"><a class="icon twitter" href="http://www.twitter.com/TU_USUARIO_TWITTER">Síguenos en Twitter</a></li>
<li data-alt="Síguenos en Google+"><a class="icon googleplus" href="https://plus.google.com/TU_USUARIO_GOOGLE" target='_blank'>Síguenos en Google+</a></li>
<li data-alt="Síguenos en Pinterest"><a class="icon pinterest" href="http://pinterest.com/TU_USUARIO_PINTEREST" target='_blank'>Síguenos en Pinterest</a></li>
<li data-alt="LQVL por Email"><a class="icon rss" href="http://feedburner.google.com/fb/a/mailverify?uri=TU_USUARIO_FEEDBURNER" target='_blank'>Suscribete vía Email</a></li>
</ul>

Ahora sólo queda reemplazar el texto que está en verde por cada una de tus cuentas en las redes sociales y feedburner respectivamente.

Para conocer el usuario en las redes sociales, vas a cada una de tus cuentas y en la URL de la barra de direcciones se mostrara el nombre de usuario.

Para saber el usuario de feedburner, te diriges a http://feedburner.google.com/. Elige tu feed y das un clic en "Edit Feed Details…" (Esta bajo el titulo de tu feed). Ahora en "Feed Address:" dentro un recuadro esta el Usuario de tu Feedburner

Fácil, ¿verdad?

El próximo día os contaremos cómo funciona Adsense como método para monetizar tu blog y la importancia del SEO para el mismo.

Esperamos vuestros comentarios

¡Saludos!

22 comentarios:

  1. Muchas gracias por la información! Estaré atenta al siguiente también ;)
    Besos y feliz finde!

    ResponderEliminar
  2. Una entrada muy útil. Muchas gracias.

    ResponderEliminar
  3. Una entrada muy interesantee,besotess y que paseis buen finde!!

    ResponderEliminar
  4. Me gustan mucho este tipo de entradas
    Besos

    ResponderEliminar
  5. Gracias por el tutorial, siempre son de agradecer para ir mejorando. 1beso!

    ResponderEliminar
  6. muy muy util pero creo que yo todavia no he tomado constancia de la importancia de las redes sociales para m,i blog y así me va, viendo los resultados que a ti te esta dando

    ResponderEliminar
  7. Gracias por este tutorial! Está muy bien explicado, muy sencillito. Estaré atenta a la próxima entrada también, que me interesa.
    Besotes!!!

    ResponderEliminar
  8. The rooms should certainly be chosen according to
    individual desires and demands. Europeans who normally
    consider a Spanish holiday are watching and
    as well as waiting.

    Feel free to surf to my web site - adwokat warszawa

    ResponderEliminar
  9. Una entrada muy interesante, creo que lo voy a hacer. Muchas gracias por la información!

    ResponderEliminar
  10. Muy interesante. Gracias por la información.
    Besos

    ResponderEliminar
  11. Hola, chicos! Vuestros tutoriales son muy claros y me ayudan mucho.

    Tengo un problema que no está relacionado con esta entrada, pero tal vez sepáis algo:
    tengo un par de Carrusel en mi blog para anunciar los sorteos, pero desde hace unos días funcionan mal. Creo que la culpa es de blogger que habrán toqueteado algo. ¿Sabéis si existe algún método actualizado para poner los carrusel? Estoy buscando por internet, pero no hay nada nuevo al respecto.

    Muchas gracias y saludos ;)

    ResponderEliminar
    Respuestas
    1. Echaré una ojeada... blogger está toquiteando demasiadas cosas últimamente

      Eliminar
  12. Me gustan los tutoriales, aunque a este no le voy a dar mucho uso ya que no me manejo mucho en las redes sociales. Aprovecho para pedir uno para crear un banner, que no hay manera de que me salga. Gracias.

    ResponderEliminar
    Respuestas
    1. ¿Qué tipo de banner? ¿Para sorteos y demás? Nosotros los hacemos con photoshop.

      Eliminar
  13. ¡Hola!
    Hace poco yo también he hecho un blog literario.
    Busco seguidores y afiliados, ¿te apuntas?.
    Pasaté y comenta.
    Un beso.
    http://aventurasdetinta.blogspot.com.es/

    ResponderEliminar
  14. Me ha gustado mucho el tutorial y me lo he llevado al blog, como hay redes que no utilizo lo he tuneado un poco y tengo el problema que al añadir Instagram en vez de Pinterest me queda el color de esta red social y el rectángulo se queda fijo en vez de expandirse. He estado intentando arreglarlo pero o sé exactamente como. ¿puedes ayudarme?

    Gracias

    ResponderEliminar
    Respuestas
    1. Ya he conseguido que tenga el mismo aspecto que el resto pero con el icono de pinterest... ya no soy capaz de más XD

      Eliminar
    2. El problema es que todo está almacenado en una librería no modificable, de ahí que no puedas cambiar el icono de pinterest..

      Eliminar
    3. ok, gracias, aunque el icono sea distinto como cambié el enlace y el nombre re dirige a lo que quiero lo dejaré de esta manera hasta que encuentre alguna solución

      D.

      Eliminar

Recuerda visitar nuestra política de privacidad. Esperamos tus comentarios