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!
Anterior
Siguiente »

22 ¡

Pulsa aquí para dejar tu comentario ¡
18 de mayo de 2013, 8:48 ×

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

Reply
avatar
albanta
admin
18 de mayo de 2013, 9:21 ×

Una entrada muy útil. Muchas gracias.

Reply
avatar
18 de mayo de 2013, 10:04 ×

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

Reply
avatar
Carax
admin
18 de mayo de 2013, 11:06 ×

Me gustan mucho este tipo de entradas
Besos

Reply
avatar
Tizire
admin
18 de mayo de 2013, 12:13 ×

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

Reply
avatar
Carmina
admin
18 de mayo de 2013, 13:07 ×

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

Reply
avatar
Aydita
admin
18 de mayo de 2013, 16:32 ×

Muy buena información! besos

Reply
avatar
Margari
admin
18 de mayo de 2013, 17:13 ×

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

Reply
avatar
Anónimo
admin
18 de mayo de 2013, 19:42 ×

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

Reply
avatar
Teresa
admin
18 de mayo de 2013, 20:04 ×

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

Reply
avatar
Margaramon
admin
19 de mayo de 2013, 15:00 ×

Muy interesante. Gracias por la información.
Besos

Reply
avatar
Nuemiel
admin
19 de mayo de 2013, 17:38 ×

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 ;)

Reply
avatar
Isa
admin
19 de mayo de 2013, 18:06 ×

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.

Reply
avatar
19 de mayo de 2013, 18:19 ×

¡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/

Reply
avatar
20 de mayo de 2013, 6:41 ×

Gracias por el tutorial. Me lo quedo

Reply
avatar
dsdmona
admin
20 de mayo de 2013, 13:35 ×

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

Reply
avatar
dsdmona
admin
20 de mayo de 2013, 13:47 ×

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

Reply
avatar
20 de mayo de 2013, 20:52 ×

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

Reply
avatar
20 de mayo de 2013, 20:53 ×

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

Reply
avatar
20 de mayo de 2013, 20:53 ×

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

Reply
avatar
dsdmona
admin
20 de mayo de 2013, 21:23 ×

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.

Reply
avatar

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