01 marzo 2012

3 Nuevas opciones de botones de redes sociales para que sigan tu blog (widgets)

iconos sociales

Así como ocurre en los programas de series, este post es la continuación del anterior, donde compartía contigo cuatro opciones de iconos sociales, listos para que los pongas en tu blog. En esta ocasión he preparado otras tres opciones, para que tengas más posibilidades de que alguna se adapte al diseño de tu blog, y al igual que la vez anterior, también usan solo una imagen.

Y por si fuera poco, para que sea todavía más fácil, en este caso, vas a poner todo el código (CSS+HTML), en un gadget, eligiendo la opción HTML/Javascript, solo vas a llevarte el código completo de los botones que más te gusten, y vas a editar lo que resalté con rojo, al final del código.

Cómo poner los botones, paso a paso

Paso 1. Ve a Diseño, o elementos de la página de la vieja interfaz, y pon el código completo de los botones que te gustaron, en un gadget HTML/Javascript.

Paso 2. Luego, edita la última parte del código, que es la del HTML y resalté de azul,  escribiendo la dirección web de la red social, donde está la almohadilla (#). Es fácil saber a que red corresponde cada almohadilla, ya que antes verás la clase (class), que lleva el nombre de la red.

Por ejemplo, esta es la linea de código en el HTML, del botón de Twitter:

<li><a class="twitter" href="#"><span>Twitter</span></a></li>

Ahí donde esta la almohadilla o signo de número  (#), pones la dirección web de tu cuenta de Twitter. El gatito se debe de quitar, solo debe de llevar la dirección web, cuidado con no borrar las comillas antes y después.También puedes editar el texto del tooltip y que en este caso, dice: Twitter.

Paso 3. Ya que editaste el código para todos los botones, guarda los cambios y listo ;)



(ver opciones 5,6, y 7)
Opción 5

botones sociales





 Código (CSS + HTML) 

<style type="text/css">
#m-soc5{width:220px;height:60px;margin:19px 0 0 10px;padding:0}
#m-soc5 li{list-style:none;float:left;border:none;margin:4px;padding:0}
#m-soc5 li a{background:url(http://4.bp.blogspot.com/-1YYmedL6FPU/T07hV-ToTII/AAAAAAAAI9k/HmWnlcM_Vno/s400/sprite5-compartidisimo.png) no-repeat 0 0;display:block;position:relative;width:33px;height:33px;overflow:visible;margin:0;padding:0}
#m-soc5 li a.twitter{background-position:0 0}
#m-soc5 li a.facebook{background-position:-33px 0}
#m-soc5 li a.google{background-position:-66px 0}
#m-soc5 li a.youtube{background-position:-99px 0}
#m-soc5 li a.rss{background-position:-132px 0}
#m-soc5 li a span{background:#555;position:absolute;top:-5px;left:-10px;width:auto;opacity:0;text-align:left;color:#fff;filter:alpha(opacity=0);white-space:nowrap;text-decoration:none;border-radius:3px;font-size:12px;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;-ms-transition:all .25s ease-in-out;transition:all .25s ease-in-out;padding:3px}
#m-soc5 li a:hover{text-decoration:none}
#m-soc5 li a:hover span{opacity:.7;filter:alpha(opacity=70);top:-28px}
</style>

<ul id="m-soc5">
<li><a class="twitter" href="#"><span>Twitter</span></a></li><li><a class="facebook" href="#"><span>Facebook</span></a></li><li><a class="google" href="#"><span>Google+</span></a></li><li><a class="youtube" href="#"><span>Youtube</span></a></li><li><a class="rss" href="#"><span>Suscríbete</span></a></li>
</ul>


Opción 6 

iconos






 Código (CSS + HTML) 
<style type="text/css">
#m-soc6{  margin:19px 0 0 10px; padding:0; width:190px; height:55px}
#m-soc6 li{list-style:none; margin:4px; padding:0; float:left; border:none}
#m-soc6 li a{background:url(http://1.bp.blogspot.com/-vYskmSEl_Tk/T08Sg9aQHAI/AAAAAAAAI-Q/n_v8UN14hVk/s400/sprite6-compartidisimo.png) no-repeat 0 0; margin:0; padding:0; display:block; position:relative; width:32px; height:32px; overflow:visible}
#m-soc6 li a.twitter{background-position:0 0}
#m-soc6 li a.facebook{background-position:-32px 0}
#m-soc6 li a.google{background-position:-64px 0}
#m-soc6 li a.rss{background-position:-96px 0}
#m-soc6 li a.twitter:hover{background-position: 0 -32px;}
#m-soc6 li a.facebook:hover{background-position: -32px -32px;}
#m-soc6 li a.google:hover{background-position:-64px -32px;}
#m-soc6 li a.rss:hover{background-position:-96px -32px;}
#m-soc6 li a span{background:#555; position:absolute; top:-5px; left:-10px; width:auto;opacity:0; padding:3px; text-align:left; color:#fff; filter:alpha(opacity=0); white-space:nowrap;text-decoration:none; border-radius:3px; font-size:12px; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; -ms-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out}
#m-soc6 li a:hover{text-decoration:none}#m-soc6 li a:hover span{opacity:.7; filter:alpha(opacity=70); top:-27px}
</style>


<ul id="m-soc6"><li><a class="twitter" href="#"><span>Twitter</span></a></li><li><a class="facebook" href="#"><span>Facebook</span></a></li><li><a class="google" href="#"><span>Google+</span></a></li><li><a class="rss" href="#"><span>Suscríbete</span></a></li></ul>


Opción 7

Iconos






 Código (CSS + HTML) 
<style type="text/css">
#m-soc7{margin:18px 0 0 10px; padding:0; width:280px; height:66px}
#m-soc7 li{list-style:none; margin:4px; padding:0; float:left; border:none}
#m-soc7 li a{background:url(http://4.bp.blogspot.com/-v0Jxd5TF70E/T08jevEc7cI/AAAAAAAAI_I/gpY05eghZe8/s400/sprite7-compartidisimo.png) no-repeat 0 0; margin:0; padding:0; display:block; position:relative; width:48px; height:48px; overflow:visible}
#m-soc7 li a.twitter{background-position:0 0}
#m-soc7 li a.facebook{background-position:-48px 0}
#m-soc7 li a.google{background-position:-96px 0}
#m-soc7 li a.youtube{background-position:-144px 0}
#m-soc7 li a.rss{background-position:-192px 0}
#m-soc7 li a.twitter:hover{background-position:0 -48px}
#m-soc7 li a.facebook:hover{background-position:-48px -48px}
#m-soc7 li a.google:hover{background-position:-96px -48px}
#m-soc7 li a.youtube:hover{background-position:-144px -48px}
#m-soc7 li a.rss:hover{background-position:-192px -48px}
#m-soc7 li a span{background:#555; position:absolute; top:-10px; width:auto; left:0;opacity:0; padding:3px; text-align:left;text-decoration:none; color:#fff; filter:alpha(opacity=0); white-space:nowrap; border-radius:3px; font-size:12px; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; -ms-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out}#m-soc7 li a:hover{text-decoration:none}
#m-soc7 li a:hover span{opacity:.8; filter:alpha(opacity=80); top:-24px}
</style>
<ul id="m-soc7"><li><a class="twitter" href="#"><span>Twitter</span></a></li><li><a class="facebook" href="#"><span>Facebook</span></a></li><li><a class="google" href="#"><span>Google+</span></a></li><li><a class="youtube" href="#"><span style="border:0;">YouTube</span></a></li><li><a class="rss" href="#"><span style="border:0;">Suscripción</span></a></li></ul>

Nota: Puse la URL de la imagen, de cualquier modo, te recomiendo que la alojes por tu propia cuenta en Blogger, para luego sustituirla, así evitas cualquier problema.

Actualización, 20/marzo/2012: Agregué una linea de código en el CSS, para que no se subraye el texto del tooltip; ésto ocurre solo en las plantillas que tienen una regla que hace que se subrayen todos los textos de los enlaces en la plantilla, al poner el puntero del ratón sobre un enlace.

Nota: Si bien la agregar el CSS junto el HTML resulta más práctico y fácil, es mejor agregar todo el CSS en la parte superior del código tu blog. Ésto lo consigues desde el diseñador de plantillas en la opción Añadir CSS. De ese modo, es más fácil para el navegador mostrar de forma más rápida los resultados. No es para preocuparse demasiado, tal vez la diferencia no se aprecie a simple vista pero, si puedes agregar el CSS desde el diseñador de plantillas mejor.

Para ello, quita toda esta parte del código que facilito:

<style type="text/css">
Aquí dentro está el CSS que deberás copiar y poner en el diseñador de plantillas
</style>

Y copia el código (CSS) que aparece dentro de la etiqueta style. Luego, vas a Plantilla> Personalizar > Avanzado> Añadir CSS, y lo agregas ahí, luego, guardas el cambio en Aplicar al blog.

Cualquier duda, no dejes de comentarla con confianza ;)


Créditos por los botones:
awicons
Ca-creation

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.