23 de septiembre de 2013

Aprende informática con... Añadir una barra de iconos sociales al blog


Después de haber aprendido cómo guardar el contenido del blog (entradas y comentarios) y el diseño del mismo, os traigo una entrada que nos va a ayudar a sumar seguidores en nuestros blogs.

Hoy os voy a explicar cómo poner una barra de iconos sociales en la columna lateral del blog.

Lo primero que tenemos que hacer, que a veces es lo más difícil, es elegir los iconos que queremos poner en nuestro blog. Si no sabemos diseñar unos, en internet podemos encontrar miles de iconos que gratuitamente podemos añadir.

Aquí os voy a dejar la selección de iconos que voy a utilizar para explicaros paso a paso cómo ir añadiéndolos:


<a href='Aquí tu URL de Facebook' target='_blank'><img alt=”facebook” src='https://sites.google.com/site/blogmispatitosyyo/facebook blog.png' width= '48px' title='Facebook' /></a>

 <a href='Aquí tu URL de Twitter' target='_blank'><img alt=”Twitter” src='https://sites.google.com/site/blogmispatitosyyo/twitter blog.png' width= '48px' title='Twitter' /></a>

  <a href='Aquí tu URL de Google Plus' target='_blank'><img alt=”Google +” src='https://sites.google.com/site/blogmispatitosyyo/google plus blog.png' width= '48px' title='Google +' /></a>

 <a href='Aquí tu URL de Pinterest' target='_blank'><img alt=”Pinterest” src='https://sites.google.com/site/blogmispatitosyyo/pinterest blog.png' width= '48px' title='Pinterest' /></a>

 <a href='Aquí tu URL de Instagram' target='_blank'><img alt=”Instagram” src='https://sites.google.com/site/blogmispatitosyyo/instagram blog.png' width= '48px' title='Instagram' /></a>


  <a href='Aquí tu URL de Bloglovin' target='_blank'><img alt=”Bloglovin” src='https://sites.google.com/site/blogmispatitosyyo/bloglovin blog.png' width= '48px' title='Bloglovin' /></a>

 <a href='Aquí tu URL de RSS' target='_blank'><img alt=”RSS” src='https://sites.google.com/site/blogmispatitosyyo/rss blog.png' width= '48px' title='RSS' /></a>

Lo primero que tenemos que tener son los iconos guardados en "Internet". Yo los he guardado en Google Sites.

Tenemos que abrir Word o cualquier editor de texto e ir copiando y pegando, uno a uno, el código de todos los botones que nos interesen añadir a nuestra nueva barra. Yo voy a añadir los botones de Facebook y Google +.

Copiamos el código que hay debajo del botón de Facebook y lo pegamos en un documento de Word:


Ahora tenemos que ir a Facebook y averiguar cuál es nuestra URL de Facebook. Eso lo sabremos entrando a nuestro perfil. En mi caso es: www.facebook.com/patri.mispatitosyyo. Lo que hacemos es sustituir el texto Aquí tu URL de Facebook por el de nuestro perfil en la red social que nos interese.


A continuación del texto que hemos copiado anteriormente, pegamos el código que hay debajo del botón de Google + :


Volvemos a buscar la URL de nuestro perfil de Google + y lo sustituimos por el texto Aquí tu URL de Google Plus. En mi caso, https://plus.google.com/u/0/102945775202367470550/posts.
 


 Ahora tenemos que ir a Blogger, al menú Diseño y pulsar, en la barra lateral, Añadir un gadget.


Se nos abrirá una pantalla en la que tenemos que seleccionar la opción HTML/Javascript.


A continuación se nos abre una pantalla en la que tenemos que poner lo siguiente:

En Título, pondremos el título que queramos que aparezca encima de nuestros iconos sociales. En mi caso voy a poner Sígueme.
En Contenido vamos a copiar y pegar el texto que previamente hemos modificado con nuestros datos y que hemos estado redactando en el documento de Word.

Cuando lo hayamos hecho, pulsamos Guardar. Visualizamos nuestro blog y ahora nos aparecerá una nueva barra de iconos con nuestros dos iconos de Facebook y Google + que nos llevarán a nuestros respectivos perfiles de nuestras redes sociales.




Espero que os haya resultado útil y os hayáis aclarado con la explicación. Si tenéis algún problema, dejadme un comentario e intentaré ayudaros en lo que pueda.

Y que sepáis que en próximos fascículos os enseñaré diferentes iconos que podremos añadir a nuestro blog, cómo cambiarles el tamaño, etc.

¿Tenéis barra de iconos sociales? ¿Cuantas redes sociales sois capaces de utilizar?




12 comentarios :

  1. muchas gracias guapa.... nos ayudas mucho... yo los puse hace poquito y ahora quiero cambiar la plantilla... pero no encuentro ninguna que me gusta del todo, si me gustan los dibujos, no me gusta la letra, etc....bss

    ResponderEliminar
    Respuestas
    1. Siento no haber podido ser más rápida y haberte ayudado. :-(
      Te comento lo de las plantillas, ya que tienen sus inconvenientes, o por lo menos a mi me lo parece, ya que cuando las pones , si luego quieres modificar algo resulta muuuuuuuyyyyyyy complicado. Casi todo lo tienes que hacer mediante código html y para eso se necesita saber bastante bien que se está modificando, porque la mayoría de las veces, las plantillas prediseñadas no son iguales que las de diseño simple de blogger. Por lo que los tutoriales no suelen valer. Antes de cambiar, ya sabes, haz copias de seguridad de tu diseño y pruebas a cargar las plantillas. Y a ver si encuentras una que te guste. ¡¡¡¡Qué chapa te he metido, uffff!!!! Un beso y gracias por pasarte.

      Eliminar
  2. ¡Oh, muchas gracias por esta información! Tengo que ponerme con esto, a ver si el finde que viene saco algo de tiempo.
    Un besote de  Lamiradadeluci

    ResponderEliminar
    Respuestas
    1. A mí me costó un rato, y todavía me lleva tiempo, jajajaja, porque no consigo decidirme por unos iconitos chulos. Y claro, de vez en cuando miro a ver si hay unos mejores. No lo puedo evitar. :-) La verdad es que sin super prácticos y quedan muy recogiditos, porque en poco espacio los tienes todos. Si necesitas algo o tienes algún problema, ya sabes donde encontrarme. Espero que encuentres unos iconos que te gusten. Un beso.

      Eliminar
  3. qué bien explicado!! Pero yo soy más simple, prefiero enlazar a una imagen jeje, que es más rápido.
    Un besito!!

    ResponderEliminar
    Respuestas
    1. Lo importante es que sea efectivo y que la gente consiga apuntarse fácilmente. A mí me gusta lo de ponerlos juntitos para que ocupen menos, pero por la estética de tu blog, te quedan muy bien como los tienes. Un beso.

      Eliminar
  4. Un post muy interesante! Tengo que mirarlo mas detenidamente. Besos.

    ResponderEliminar
  5. Me alegro mucho de que te guste. Espero que te resulte útil. Si tienes algún problema con el tutorial, me comentas. Un beso.

    ResponderEliminar
  6. Ayyyyy sí! Lo vi ayer!
    Pero no tiempo de dejarte comentario.
    Tenías ya preparada la entrada??? Porque flipé con tu rapidez.
    Ya sabes, de aquí a un par de meses hago los deberes ...
    Muaaaaa
    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Jajajaja, la preparé ayer a la mañana porque hace dos semanas me lo pidió guecica, pero para ella llegué demasiado tarde. :-(
      Me río porque pensaba que en vez de estos querías los que se ponen en la cabecera del blog. Son los que he añadido a mi blog en tu honor. Mira a ver si te gustan y así explico como se ponen. Giran y todo, ;-)
      Un beso.

      Eliminar
    2. q majos los q giran!!!
      Pero con unos me conformo.
      AL final he copiado tal cual los tuyos porque no ha habido manera de subir los que quería al google sites. He probados a subirlos a google drive pero q no hay manera, no lo sé hacer.
      Qué es lo de RSS????????

      Eliminar
    3. En un momento compruebo el problema que tienes. En google drive yo no conseguí sacar el enlace para compartirlo, así que utilizo google sites que me parece más fácil. El RSS es para que te sigan por correo o por un lector de noticias como feedburner.
      Un beso.

      Eliminar

Entradas relacionadas

Related Posts Plugin for WordPress, Blogger...