Botones de redes sociales para tu blogger

Hoy en día, esto de las redes sociales está por encima de todo en la red, y son muchísimos usuarios los que están enganchados a las mismas. Por eso es casi imprescindible tener en nuestras bitácoras, blogs, webs o como quiera que se llame, esos botones con nuestras redes sociales más utilizadas, parta que la gente pueda visitarnos.

Hoy os enseñare, a los que todavía no tenéis estos botones o iconos, a ponerlos en vuestros blogger, con el estilo que yo utilizo en este blog.


Si eres de los que entras en la plantilla y te da depresión, te dejo esta forma fácil de instalación para torpones, en la que lo encuentras casi todo hecho.

Paso 1

Entra al panel de control de blogger, ve a Diseño, abre un elemento HTML en la parte donde quieras mostrarlo y pega el siguiente código completo.


<style type="text/css">
ul#botones-reinajj{margin:18px 0 0 10px; padding:0; width:280px; height:66px}
ul#botones-reinajj li{list-style:none; margin:4px; padding:0; float:left; border:none}
ul#botones-reinajj 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}
ul#botones-reinajj li a.twitter{background-position:0 0}
ul#botones-reinajj li a.facebook{background-position:-48px 0}
ul#botones-reinajj li a.google{background-position:-96px 0}
ul#botones-reinajj li a.youtube{background-position:-144px 0}
ul#botones-reinajj li a.rss{background-position:-192px 0}
ul#botones-reinajj li a.twitter:hover{background-position:0 -48px}
ul#botones-reinajj li a.facebook:hover{background-position:-48px -48px}
ul#botones-reinajj li a.google:hover{background-position:-96px -48px}
ul#botones-reinajj li a.youtube:hover{background-position:-144px -48px}
ul#botones-reinajj li a.rss:hover{background-position:-192px -48px}
ul#botones-reinajj 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}
ul#botones-reinajj li a:hover span{opacity:.8; filter:alpha(opacity=80); top:-24px}
</style>
<ul id="botones-reinajj">
<li><a class="twitter" href="https://twitter.com/ReinaFdz"><span style="border: 0pt none;">Twitter</span></a></li>
<li><a class="facebook" href="http://www.facebook.com/ReinaFdz"><span style="border: 0pt none;">Facebook</span></a></li>
<li><a class="google" href="https://plus.google.com/u/0/me/posts"><span style="border: 0pt none;">Google+</span></a></li>
<li><a class="youtube" href="http://www.loquemesaledelospeones.blogspot.com/"><span style="border: 0pt none;">YouTube</span></a></li>
<li><a class="rss" href="http://www.loquemesaledelospeones.blogspot.com/feeds/posts/default"><span style="border: 0pt none;">Suscripción</span></a></li>
</ul>

Paso 2

Edita la última parte del código, que es la del HTML, escribiendo la dirección web de la red social, donde está la almohadilla (#).

Por ejemplo, esta es la línea de código en el HTML, del botón de Facebook:

<li><a class="facebook" href="#"><span>Facebook</span></a></li>

Donde esta la almohadilla (#), pones la dirección url de tu cuenta de Facebook. La almohadilla se debe quitar, sólo debes dejar la dirección url y cuidado con no borrar las comillas antes y después. También puedes editar el texto del tooltip que en este caso, dice: Facebook.

Paso 3

Con el código ya editado para todos los botones, guarda los cambios y listo, ya lo tienes.
Fácil verdad! Pues nada, ya tienes los botones de Lo que me sale de los peones, en tu blog.

El resultado:




Visto en Compartidisimo

2 comentarios:

Con la tecnología de Blogger.