¿Qué vamos a hacer?
Vamos a crear botones para que nuestros usuarios puedan seguirnos por las redes sociales. Se pueden colocar al principio de una entrada en donde prefieramos (en la cabecera del menú, en una barra lateral, en el pié del Blog...).
¿Qué tienen de especial los botones que vamos a utilizar?
Se trata de botones que no utilizan scripts de ninguna clase y que además están realizados con la técnica del CSS Sprite, lo que les confiere un rendimiento superior para no bloquear en ningún momento el dibujado de tu Blog.
¿Cómo son los botones para que nos sigan por las redes sociales que vamos a utilizar?
Esta es la botonera de iconos para que tus usuarios puedan seguirte por las redes sociales. Cuenta con Google+, Posibilidad de crear un Hangout, Facebook, tu Feed (RSS) y Twitter.
Paso a paso:
1) Realiza una copia de seguridad de tu Blog.
2) Dentro de Blogger, en el menú de la izquierda, dirígete a la opción "Plantilla" y selecciona el botón "Personalizar". He marcado con reborde rojo el botón para personalizar plantilla.
3) En la página de personalización de plantilla, en el menú superior izquierdo selecciona la opción "Avanzado". La he marcado en naranja en la pantalla inferior.
4) Al pulsar en avanzado nos aparece la página de personalización avanzada de plantilla. Si bajas el "scroll" del menú que ha salido tras pulsar "Avanzado" te aparecerá una última opción llamada "Añadir .css". Pulsa sobre dicha opción. En la pantalla inferior está marcada en naranja.
5) Pega el código que te muestro a continuación (creo el contenedor de la imagen al que llamo "a" con la URL donde he almacenado la imagen que me creó la herramienta generadora de srpites css).
#contenedor a{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrZprK1cDt_l_1c7eL20H4FwRqeUlL5z0bRwfpDp5F6r57XgbWYTl63zjEh4rvlYTXXHGnoVS1yD0rWC6R7qNBubDVUDJdB2cEHtNRss39GRzYzkmlUV7HAAJV9LEvM0JUlAKvCW-_ng/s1600/csg-51d9ccc792cc0+(1).png') no-repeat top left; position: absolute}
#contenedor a{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrZprK1cDt_l_1c7eL20H4FwRqeUlL5z0bRwfpDp5F6r57XgbWYTl63zjEh4rvlYTXXHGnoVS1yD0rWC6R7qNBubDVUDJdB2cEHtNRss39GRzYzkmlUV7HAAJV9LEvM0JUlAKvCW-_ng/s1600/csg-51d9ccc792cc0+(1).png') no-repeat top left; position: absolute}
#contenedor a.sprite-GooglePlus512SquareGlossRedCustom{ background-position: 0 0; width: 28px; height: 28px; margin: 10; padding: 0;}
#contenedor a.sprite-descarga {background-position: -56px 0; width: 28px; height: 28px; margin-left:26px; border:none; }
#contenedor a.sprite-facebook_1Custom{ background-position: -112px 0; width: 28px; height: 28px; margin-left:50px; border:none;}
#contenedor a.sprite-rss_1Custom{ background-position: -168px 0; width: 28px; height: 28px; margin-left:81px; border:none;}
#contenedor a.sprite-twitter_1Custom{ background-position: -224px 0; width: 28px; height: 28px; margin-left:108px; border:none;}
#contenedor a.sprite-descarga {background-position: -56px 0; width: 28px; height: 28px; margin-left:26px; border:none; }
#contenedor a.sprite-facebook_1Custom{ background-position: -112px 0; width: 28px; height: 28px; margin-left:50px; border:none;}
#contenedor a.sprite-rss_1Custom{ background-position: -168px 0; width: 28px; height: 28px; margin-left:81px; border:none;}
#contenedor a.sprite-twitter_1Custom{ background-position: -224px 0; width: 28px; height: 28px; margin-left:108px; border:none;}
Pulsa "Aplicar al Blog" para que la css quede sobreescrita con tu propio contenido. Esto es como meterla en el código fuente de tu plantilla entre <b:skin> y </b:skin> .
6) Ahora queda hacer que se dibujen los iconos en la zona del Blog que prefiramos. Desde la vista de diseño de Blogger selecciona "Añadir Gadget" donde quieras que se dibujen los botones. Ahora selecciona el "Gadget" Blogger de los de tipo "HTML/Javascript":
- Dentro de Blogger, en el menú de la izquierda haz "click" sobre la opción "Diseño"
- A continuación pulsa "Añadir un Gadget" de la zona donde desees y selecciona el Gadget "HTML/Javascript"
<div id="contenedor">
- Dentro de la pantalla de configuración del Gadget HTML/Javascript copia y pega el código que te pongo a continuación y luego te explico:
- El código:
<a class="sprite-GooglePlus512SquareGlossRedCustom" width="28" height="28" href="https://plus.google.com/TU_DIRECCIÓN_GOOGLE+" ></a>,<a class="sprite-descarga" width="28" height="28" href="https://plus.google.com/hangouts/_?gid=ID_PARA_HANGOUT"></a>,<a class="sprite-facebook_1Custom" width="28" height="28" href="TU_DIRECCIÓN_FACEBOOK">,<a class="sprite-rss_1Custom" width="28" height="28" href="http://feeds.feedburner.com/NOMBRE_DE_TU_FEED"></a>,
<a class="sprite-twitter_1Custom" width="28" height="28" href="https://twitter.com/NOMBRE_TWITTER"></a></a></div>
- Recuerda copiar y pegar el código fuente en la pantalla de configuración del gadget HMTL/Javascript sin que haya retornos de carro (enter) o espacios en blanco añadidos.
- Este código es sencillo y mucho más rápido que cualquier "script" de cualquier añadido que nos bajemos de Internet para dibujarnos los iconos de acceso a las redes sociales:
¿Quieres colocarlo al principio de tus entradas?
Realiza los pasos 1, 2, 3, 4 y 5 y ahora en lugar de añadirlo a un gadget HTML/Javascript lo puedes poner al comienzo de tus entradas.
1) Realiza una copia de seguridad antes de cualquier cambios para poder volver atrás en caso de error.
2) Dentro de Blogger, dirígete a "Plantilla" y pulsa el botón "Editar HTML" para realizar los siguientes pasos.
3) Pulsa CONTROL + F dentro del recuadro de código y busca: <b:includable id='post' var='post'>
justo debajo de esa línea se encuentra la parte superior de cualquier entrada de tu Blog. Es a partir de esta zona donde vamos a añadir los botones para redes sociales que precisemos.
Pega debajo del código <b:includable id='post' var='post'> el código para dibujar los iconos para que te puedan seguir por las redes sociales:
<div id="contenedor">
<a class="sprite-GooglePlus512SquareGlossRedCustom" width="28" height="28" href="https://plus.google.com/TU_DIRECCIÓN_GOOGLE+" ></a>,<a class="sprite-descarga" width="28" height="28" href="https://plus.google.com/hangouts/_?gid=ID_PARA_HANGOUT"></a>,<a class="sprite-facebook_1Custom" width="28" height="28" href="TU_DIRECCIÓN_FACEBOOK">,<a class="sprite-rss_1Custom" width="28" height="28" href="http://feeds.feedburner.com/NOMBRE_DE_TU_FEED"></a>,
<a class="sprite-twitter_1Custom" width="28" height="28" href="https://twitter.com/NOMBRE_TWITTER"></a></a></div>
¡Ya lo tienes!, dos formas de poder colocar los botones para que puedan seguirte por las redes sociales sin problemas.
2) Dentro de Blogger, dirígete a "Plantilla" y pulsa el botón "Editar HTML" para realizar los siguientes pasos.
justo debajo de esa línea se encuentra la parte superior de cualquier entrada de tu Blog. Es a partir de esta zona donde vamos a añadir los botones para redes sociales que precisemos.
Pega debajo del código <b:includable id='post' var='post'> el código para dibujar los iconos para que te puedan seguir por las redes sociales:
<div id="contenedor">
<a class="sprite-GooglePlus512SquareGlossRedCustom" width="28" height="28" href="https://plus.google.com/TU_DIRECCIÓN_GOOGLE+" ></a>,<a class="sprite-descarga" width="28" height="28" href="https://plus.google.com/hangouts/_?gid=ID_PARA_HANGOUT"></a>,<a class="sprite-facebook_1Custom" width="28" height="28" href="TU_DIRECCIÓN_FACEBOOK">,<a class="sprite-rss_1Custom" width="28" height="28" href="http://feeds.feedburner.com/NOMBRE_DE_TU_FEED"></a>,
<a class="sprite-twitter_1Custom" width="28" height="28" href="https://twitter.com/NOMBRE_TWITTER"></a></a></div>
¡Ya lo tienes!, dos formas de poder colocar los botones para que puedan seguirte por las redes sociales sin problemas.
Muy interesante...
ResponderEliminarMe alegro que te haya servido. Cualquier cosa aquí estoy. Un saludo.
EliminarMiguel yo quería añadir pinterest y Flickr también ¿Este tutorial no me vale?
ResponderEliminarSaludos
Hola Elia, no.puse botones Pinterest y Flickr, pero en una próxima versión lo pongo ;)
EliminarEs que para que no quiten un ápice de rendimiento están hechos con un sprite de imágenes y es un poquito más complicado añadir esos iconos, pero tomo nota y prepararé nueva versión.
Saludos!!!
Hola Miguel, a la hora de poner , no me sale. ¿Que ocurre?
ResponderEliminarHola miguel, a la hora de poner b:includable id: 'post' var: 'post', no me sale. ¿Que ocurre?
ResponderEliminarHola Carlos,
Eliminarquizás usas una plantilla personalizada que lo muestra de otra manera. No te preocupes. Mándame la URL de tu Blog y luego chequeamos con la plantilla (esa me la mandas por la opción de menú "Contacto") cuál es el sitio exacto. De todas formas, recuerda que la búsqueda se hace dentro de EDITAR HTML y dentro del propio código de blogger pulsando CONTROL + F (no por el navegador, sino dentro del propio editor de Blogger), por si estuvieras haciendo la búsqueda donde no es.
Un saludo!!
He hecho todo lo que pone, y en el blog sale esto """, donde debería estar el icono de rede social.
ResponderEliminarAl darle a eso, sale a una página en la que pone Error 404. ¿Qué pasa?
Puede que tengas algo mal porque no debería darte un 404, eso significa "Recurso no encontrado), que no localiza algo.
EliminarMira, te recomiendo mejor esta entrada que te vendrá genial para lo mismo: http://www.diariosdelanube.com/2014/12/como-anadir-botones-para-redes-sociales.html
Cualquier cosa, aquí me tienes.
Un saludo y muchas gracias.
Hola me salen los iconos para las redes sociales pero al clicar sobre ellos, en el de facebook por ejemplo, me redirige al blog y no a la pagina del facebook. ¿ Como lo puedo solucionar? Gracias
ResponderEliminarFíjate en la dirección que has puesto en el icono que te manda al blog. Pondrá la dirección a tu blog en lugar de tu dirección de Facebook.
EliminarUn saludo!