Tecnología

Diarios de la nube Idea guardada 1 veces
Sé la primera persona en valorar esta idea Valorar

Cómo poner botones para que te sigan en las redes sociales en Blogger



Poner botones para redes sociales con los que tus usuarios puedan seguirte te ayudará a incrementar la presencia de tus contenidos en Internet. Si bien muchas veces preferimos utilizar botones al final de nuestra entradas para que nuestros usuarios compartan si lo desean nuestras entradas, es importante también que puedan seguirnos por las redes sociales si así lo desean. Qué mejor sitio para que puedan seguirnos que el comienzo de nuestras entradas o en alguna parte del Blog donde deseemos.¿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("http://3.bp.blogspot.com/-2kFceIe-1Y4/UdnNIglf41I/AAAAAAAAEGo/bOueoCLv_0Q/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;} 

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"


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:

<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>
 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.

Fuente: este post proviene de Diarios de la nube, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Envía una notificación de una presunta infracción de derechos. También puedes hacerlo a través de nuestro formulario de contacto.
Etiquetas: generalsocial
¿Qué te ha parecido esta idea?

Recomendamos

¡No te pierdas nuestra selección diaria!

Suscríbete y recibirás en tu correo nuestras mejores ideas

Suscríbete ahora

Relacionado

general social

Cómo poner botones para redes sociales al final de tus entradas

Muchos Bloggers prefieren añadir botones para redes sociales al pie de sus entradas para que los usuarios puedan compartir el contenido que ha sido de su agrado.Vamos a aprender a colocar en el pie de entradas botones para compartir en Facebook, Twitter y Google+ nuestras creaciones.¿Qué son los botones para las redes sociales en un Blog?: Los componentes oficiales o no oficiales de las distintas ...

icono botón redes sociales ...

Cómo insertar botones de Redes Sociales en Blogger

Hoy les traigo el Tutorial de cómo insertar los botones de las Redes Sociales en Blogger.Lo primero que vamos a hacer es Descargarnos los Botones que más nos gusten y alojarlos en hosting (hay muchos gratuitos), pero yo uso el Google Drive, que me parece más sencillo y más completo.Una vez tengamos las imágenes subidas a Google Drive, tenemos que averiguar su URL, (si no sabes cómo hacerlo, te lo ...

Cómo Saber Si Las Redes Sociales Están Perjudicando Tu Vida

Cómo Saber Si Las Redes Sociales Están Perjudicando Tu Vida(Photo : Flickr Creative The Commons / Marcos Gasparutti )Para una gran parte de la población mundial hoy en día es casi imposible concebir sus vidas sin el uso de redes sociales.Las distintas plataformas de interacción se han convertido parte de la vida cotidiana de las personas y es común que sus dispositivos móviles sean considerados he ...

internet blog básico ...

Cómo poner botones interactivos en tu blog

¿Te has fijado en los botones que uso en todos mis blogs de blogger? Como los que puedes ver en la barra lateral de este blog anunciando mis cursos y ebooks para bloggers y diseñadores. Son botones interactivos, yo elijo los colores y escribo el texto, el resto lo hace solito blogger gracias al código que tengo instalado en mi plantilla.Y eso es lo que voy a compartir contigo hoy. ¡Verás que es mu ...

general social

Cómo añadir botones para redes sociales y marketing de contenidos a tu Blog.

Te presento la manera más sencilla y rápida de añadir botones para redes sociales a tu blog, tu página web o cualquier contenido que tengas en Internet. Utilizaremos el servicio AddThis que recientemente ha actualizado su presentación y ha simplificado enormemente la creación de botones para compartir contenido en redes sociales.¿Qué son los botones para compartir en redes sociales?Hoy día no bast ...

acuarelas diseño watercolour ...

Iconos de Redes Sociales

Hola!!!Hace unas semanas estuve ocupada haciendo estos pequeños iconos de varias redes sociales para colocar el gadget de sígueme en el blog, que ya hacía tiempo que lo tenía en mente, pero un día por otro lo había dejado pasar.Os los podéis descargar desde este enlace. Están preparados en dos tamaños, 48x48 y 32x32, para que uséis el que os vaya mejor.Os voy a explicar también como los he puesto ...

BLOG blogging intermedio ...

Instalar los iconos de redes sociales en el header y sidebar de blogger

En una entrada anterior te conté cómo instalar una fuente llamada fontawesome para utilizar iconos en tus listas, páginas y entradas de blogger, para darles ese toque diferente y original que las haga especiales y visualmente atractivas. Puedes volver a revisar la entrada e instalar la fuente que te digo en el siguiente botón:CÓMO INSTALAR ICONOS EN BLOGGERHoy, vamos a utilizar nuestros iconos par ...

informática sass report control parental ...

SASS Report, ¿Que hacen tus hijos en las redes sociales?

¿Sabes que hacen tus hijos en las redes sociales? Muchos padres no saben realmente con quien hablan sus hijos, si son acosados o están accediendo a lugares peligrosos y por estos motivos se ha desarrollado la herramienta SASS report que permite un seguimiento de la navegación realizada por los menores y está destinado a supervisar lo que realizan en las redes sociales Facebook, Tuenti y Twitter. ...

desde0

Cómo crear un menú con submenús en Blogger sin tener experiencia en informática o programación

Crear un menú en cualquier Blog es algo fundamental para organizar nuestros contenidos de manera que podamos presentarlos a nuestros usuarios de una manera estructurada y sencilla.Hemos tratado con anterioridad cómo crear un menú sencillo en Blogger sin tener ninguna experiencia en programación, con simples opciones que agrupan entradas bajo las etiquetas de tu Blog y que se puede poner con suma f ...

internet blog intermedio ...

Cómo poner la fecha debajo del título en Blogger

Si has visitado mi página de Cursos para Bloggers puede que te hayas fijado en la posición de la fecha de las entadas del blog, centrada debajo del título. Me han llegado varios emails preguntándome una manera sencilla de mover la fecha en Blogger... Y bueno, no sé si será la más sencilla de todas, pero es la que he usado yo y puedo asegurarte que funciona.Mover la fecha debajo del título1.- Abrim ...