Poner un texto encima los iconos sociales de compartir

domingo, 21 de junio de 2015


Hola artistas! Esta semana está siendo muy productiva, hemos subido varios tutoriales entre Cris y servidora :D. Cómo ya sabéis, Cris se encarga sobretodo de los tutoriales sobre manualidades para niños y yo (Laia) hago los tutoriales sobre diseño blogger... aunque cuando me da tiempo también hago cositas DIY, que me encantan :)

Cris se está centrando mucho en ofrecer tutoriales dirigidos a actividades para los niños para el veranito, para que se lo pasen genial en casa haciendo manualidades con materiales reciclados.

Además está colgando ejercicios para que se diviertan aprendiendo matemáticas y para ejercitar la psicomotricidad, lo cual siempre resulta interesante, a que sí? ;)

Por mi parte, en este tutorial os quiero hablar de una cuestión que me han preguntado en un comentario: cómo poner un texto tipo "COMPARTE ESTE POST" encima de los iconos sociales de compartir que tenemos debajo de cada entrada, como el que tenemos nosotros.





IMPORTANTE: Primero necesitaréis tener insertado en vuestra plantilla el código para poner iconos sociales para compartir que expliqué en este tutorial.

#1 Insertamos el código HTML

Os he puesto el código HTML para poner iconos sociales de compartir debajo de la entrada (pero recordad mirar el tutorial en que explico dónde poner el código y cómo configurarlo).

El código nuevo en morado es la parte que debéis añadir para que se vea el texto encima de los iconos sociales para compartir.

<!-- INICIO de iconos para compartir en redes sociales -->
  <center><!-- Si queréis que los botones estén centrados, sinó quitais esta línea -->
  <div style='text-align: center; color: #666666;'>Comparte este post</div>
  <div class='custom_images'><div style='border-top: 1px solid #eee; padding:10px;'><!-- Línea de abajo del texto, aquí en gris. Si no la queréis quitad esta línea de código -->
   <div class='addthis_toolbox'>
   <div class='custom_images'>
   <a class='addthis_button_facebook'><img alt='Share to Facebook' border='0' height='30' src='https://lh4.googleusercontent.com/-pUITKMNRbDg/VVu0z4G2DxI/AAAAAAAAAnM/xM3R91AgIfU/s162-no/fb-azul.png' width='30'/></a>
   <a class='addthis_button_twitter'><img alt='Share to Twitter' border='0' height='30' src='https://lh4.googleusercontent.com/-P8a_JjAv1kQ/VVu01IP0HkI/AAAAAAAAAnQ/rUQc0Xp6e4k/s162-no/tt-azul.png' width='30'/></a>
   <a class='addthis_button_email'><img alt='Email This' border='0' height='30' src='https://lh4.googleusercontent.com/-y6rXPkaLBMc/VVu00PgAJII/AAAAAAAAAm0/zKzcUm53pP0/s162-no/mail-azul.png' width='30'/></a>
   <a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' height='30' src='https://lh6.googleusercontent.com/-W7VxaKKP5K8/VVu00ueaqmI/AAAAAAAAAnA/WhjlvlJktE0/s162-no/pin-azul.png' width='30'/></a>
   <a class='addthis_button_google_plusone_share at300b'><img alt='Share This' border='0' height='30' src='https://lh4.googleusercontent.com/-Xg2NKziUJj8/VVu0z4gG93I/AAAAAAAAAms/xw2bHa9FC4s/s162-no/google-azul.png' width='30'/></a>
   </div>
   </div>
   </div>
   <script type='text/javascript'>var addthis_config = {"data_track_addressbar":false};</script>
   <script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/>
   </center> <!-- Si queréis que los botones estén centrados, sinó quitais esta línea -->

<!-- FINAL de iconos para compartir en redes sociales -->

Podéis modificar lo siguiente:
  • text-align: center; "center" para que esté centrado el texto, si lo queréis a la izquierda ponéis "left", y a la derecha "right".
  • color: #666666; aquí podéis poner el color hexadecimal que queráis, aquí os lo he puesto en gris.

#2 Añadir el código CSS para dar la apariencia que queramos

Nos iremos a Plantilla ➡ Editar HTMLDentro del recuadro de código debes pulsar CTRL+F (en caso de que tengas Windows) o CMD + F (en caso de que tengas un Mac) para que se te abra el buscador. En él buscamos: </b:skin>

Justo antes de éste código pegamos lo siguiente:

/* Compartir posts
---------------------------------------------- */
.addthis_toolbox{
  font: normal normal 10px Arial; /*Tamaño y tipografia del texto*/
  text-transform:uppercase;/*Para que las letras sean en mayúscula, sino quitad esta línea*/
  letter-spacing:4px;/*Espaciado entre las letras, a más píxeles más espacio. Sino lo quereis quitad esta línea*/
  width:100%;
}

Podéis modificar el texto en azul para que la apariencia del texto sea como os guste más. Sólo comentaros que nosotros tenemos la tipografia Muli. Si queréis saber cómo instalar fuentes de Google Fonts echadle un ojo a este otro tutorial.

Si os ha gustado el tutorial apoyadnos compartiendo en vuestras redes sociales, os lo agradereceremos un montón. Con la difusión de contenido nos animas a seguir colgando tutoriales de tu interés :)

Un abrazo fuerte a todos!!

Laia

10 comentarios:

  1. muchas gracias por este tutorial!!! fui una de las que pregunto ¡ me doy por aludida! ;)
    asi que lo guardo, comparto (( of course) y a en agosto me peleo para hacerlo
    ¡besotes!

    ResponderEliminar
    Respuestas
    1. Así es jejeje! Gracias a ti por exponer tus dudas y darme ideas para nuevos tutos! :D Cualquier duda ya sabes, un abrazoo!!

      Eliminar
  2. Hola! Gracias por hacer este tutorial me ayudo bastante, esta genial :). Estoy iniciando mi blog y quiero cambiarle el diseño porque por el momento es un poco basico, ya pude cambiarle los iconos con el tutorial, pero cuando intento colocar el texto encima de los iconos, no me deja.

    Y luego me aparece este mensaje:

    No se ha podido cargar la vista preliminar de la plantilla: Error al analizar XML, línea 1613, columna 6: The element type "div" must be terminated by the matching end-tag div

    Si puedes ayudarme te lo agradeceria mucho, siempre me enredo con esto de los codigos :D

    ResponderEliminar
    Respuestas
    1. Hola Paola! Perdona que haya tardado tanto tiempo en contestar, hemos pasado unos días de vacaciones! ;)

      He probado en varias plantillas diferentes a añadir el texto encima de los iconos y me sale bien. Asegúrate de poner el código tal cual aparece en el post. Y recuerda que primero deberás instalar los iconos que expliqué en un post anterior, el link está puesto al principio de la entrada. Debería salirte bien :)

      Un abrazo fuerte!

      Eliminar
    2. Me pasó lo mismo que a Paola, lo solucioné poniendo otro < /div > (sin espacios) delante de < /center >
      Un saludo!

      Eliminar
  3. Hola, me pasó lo mismo que a Paola y a Juan J. Vic, y lo he podido solucionar gracias a la respuesta de Juan. Faltaba el < / div > antes del center. Deberíais corregirlo, porque vengo de otro tutorial vuestro también, y otro error que se os advierte en los comentarios (creo que faltaba una contrabarra en el código), tampoco lo habéis corregido en el post, y claro, ahora entro yo o mil usuarios más, copiamos el código y vemos que no va. Es entonces cuando acudimos a los comentarios y aleluya, que alguien lo ha puesto.

    Ahora lo que no me funciona en absoluto es la segunda parte, y ahora no hay comentarios que solucionen este caso, y no doy con la tecla.

    Pongo el código #2, justo delante de < / b:skin >, pero nada. He intentado dentro, delante, detrás, en otros lados dentro del código... y nada. Ni me pone la letra en mayúscula (la he puesto manualmente yendo al paso número 1), ni me hace el espaciado ni cristo que lo fundó xD

    Un ayuda a tiempo por favor? Se agradece ;)

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
  4. Me pasa lo mismo con el paso dos.
    Por favor, dime como lo solucionaste. :(

    ResponderEliminar
    Respuestas
    1. <*div style='text-align: center;text-transform:uppercase; color: #666666;font-size:20px;'>Si te gustó el post comparte en redes sociales
      <*div class='custom_images'><*div style='border-top: 1px solid #eee; padding:10px;'><*div class='addthis_toolbox'*>

      Con el siguiente código (sin los asteriscos) he conseguido el tema de las mayúsculas y aumentar el tamaño, lo que no dí es com cambiar la fuente, por si te sirve.

      Saludos

      Eliminar