Botones flotantes de Twitter, Facebook y Google+ en tu blog

Aunque ya he publicado varias opciones para poder implementar los botones sociales en el blog de forma normal y otra con css y efecto hover, tambien es cierto que ninguna de ellas permanece flotante en la pantalla; por ello aquí les traigo unos botones flotantes para que quienes visitan tu blog puedan convertirse en seguidores de tu página en las redes sociales. Son tres botones (además del botón de Twitter y Facebook he incluido el de Google+) y puedes elegir si ponerlo a la derecha o a la izquierda de tu pantalla. El ejemplo pueden verlo aquí mismo a la izquierda de esta entrada.

Para implementarlo en las plantillas del Diseñador de Plantillas de Blogger solo entra en Diseño, Añadir gadget, Html-javascript y pega en siguiente código:

<a href='https://www.facebook.com/pages/Bloger-Bloger/149171335193313' target='_blank' title='Sígueme en Facebook'><img src='https://lh4.googleusercontent.com/--RfOANn0MtM/T3LnLDlJApI/AAAAAAAAAWs/qbebHgtrFnQ/s48/facebook.png' style='display:scroll;position:fixed;bottom:120px;left:10px;' alt="" /></a>

<a target="blank" href="http://twitter.com/twitter" title="Sígueme en Twitter"><img border="0" style="position:fixed;bottom:180px; left:0px; display:scroll;" src="https://lh5.googleusercontent.com/-p27BX-olgO8/T3QN39zRpCI/AAAAAAAAAYI/RfOk1he5VQc/s55/botontwitter-byb.png"/></a>

<a href='https://plus.google.com/' target='_blank' title='Sígueme en Goolge+'><img src='https://lh6.googleusercontent.com/-Htp5J9w8gro/T3Nrbo9s7yI/AAAAAAAAAX0/QA6VQR1SAAg/s55/google_plus-150x150byb.png' style='display:scroll;position:fixed;bottom:40px;left:0px' alt="" /></a>

Para las plantillas personalizadas pega el código antes de </head>

Cambia lo que está en naranja con la url de tus cuentas tanto en Twitter como en Facebook y Google+. 

Si los botones los quieres al lado derecho de tu sidebar solo cambia left por right. También puedes poner tus propias imágenes de botones, reemplazando lo que esta en rojo, pero ten en cuenta que tus imágenes no deberán exceder de 55x55px para que el bloque de imágenes no se distorcione. Das en vista previa, y si todo está como debe estar pones guardar.

Y eso es todo. Ahí tienes los tres botones de redes sociales más famosos hasta ahora flotando en tu blog.

Integrar Twitter en el blog

Integrar nuestros últimos twitts de Twitter a nuestro blog es muy sencillo, lo primero que hay que hacer es ir a la página principal de Twitter y al final de la página de tu cuenta elegir la opción “extras”, widgets  para mi web, widget de perfil, personalizar mi widget de perfil. Allí se te muestran varias opciones para personalizar el widget tales como cuántos twitts mostrar, el ancho y alto, etc. Una vez personalizado das en finalizar y copiar código, y lo agregas en el sidebar personalmente o si lo prefieres, allí mismo te da la opción de “añadir automáticamente a blogger” por si lo otro te parece complicado. 

Pero, si todo esto te pareció muy abrumador, intenta de esta manera. Entra en Diseño, Añadir gadget, html-javascript y copia este código:  

<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>

<script>

new TWTR.Widget({

  version: 2,

  type: 'profile',

  rpp: 8,

  interval: 30000,

  width: 290,

  height: 300,

  theme: {

    shell: {

      background: '#ffffff',

      color: '#f0a905'

    },

    tweets: {

      background: '#ffffff',

      color: '#1f1c1c',

      links: '#0915f0'

    }

  },

  features: {

    scrollbar: false,

    loop: false,

    live: false,

    behavior: 'all'

  }

}).render().setUser('twitter').start();

</script>

Cambia twitter por el nombre de tu usuario (sin el @) y listo. Puedes cambiar los valores en ancho (width) y en alto (height) de este gadget para que se acomode a la medida de tu blog. También puedes personalizar los colores de fondo y las letras en background #ffffff de acuerdo a tu preferencia

Luego das en vista previa, chequeas que todo esté bien, y das en guardar.

Como puedes ver es tan sencillo que es imposible que te pierdas.

Imagen al final de las entradas como sello personal

Este truco permite añadirle una imagen al final de las entradas, a manera de “sello personal” del autor parecido (no igual) al de “acerca del autor” que utilizan los blogs alojados en Wordpress, y que viene por defecto en esa misma plataforma.

Aquie tienes una imagen para tengas una idea de lo que quiero decir:

 

Para agregar este truco solo busca en tu plantilla, sin expandir artilugios, lo siguiente:

.post-footer {
margin: .75em 0;
color:$sidebarcolor; }

O también puede ser que lo encuentras así:

.post-footer{margin:5px 0;}

De cualquier forma, siempre busca el inicio del corchete y el final del mismo { }

Para que nos permita poner una imagen allí, tendremos que añadirle los siguientes atributos:

padding:36px 4px 2px 4px;
background: url(https://lh3.googleusercontent.com/-75ufgnUBmCo/T1w4Qz0zReI/AAAAAAAAAMo/mE7SBe9I7Gs/s94/bloger%2520%2526%2520bloger%25203.jpg) no-repeat top right;}

De manera que los estilos nos quedarían así:

 

.post-footer {
margin: .75em 0;
color:$sidebarcolor;

padding:36px 4px 2px 4px;
background: url(https://lh3.googleusercontent.com/-75ufgnUBmCo/T1w4Qz0zReI/AAAAAAAAAMo/mE7SBe9I7Gs/s94/bloger%2520%2526%2520bloger%25203.jpg) no-repeat top right;}

Nótese que lo que hemos añadido va al final de los estilos del post footer y antes del cierre de los corchetes. Deberás cambiar donde dice url de la imagen por la tuya, y lo que está en rojo es el tamaño donde irá la imagen, que puedes modificar para que se muestre la tuya sin problemas, teniendo en cuenta que la altura de la imagen no deberá exceder de 90px para que guarde proporción con relación al pie de las entradas. Donde dice right puedes cambiar para que no se muestre a la derecha poniendo left para izquierda o center si lo quieres en el centro.