Cómo cambiar los iconos de compartir en redes sociales (versión para móvil)

martes, 9 de junio de 2015

tutorial-blogger-cambiar-iconos-sociales-movil-mobile-social-icons-sample

Hola artistas! Todo bien? Como ya sabéis, me encanta colgar tutoriales para customizar el blog, pero lo que me gusta aún más es colgar tutoriales para modificar la plantilla del móvil ;)

¿Por qué? Porque actualmente es vital tener nuestra plantilla lista para que se vea guai a través de los dispositivos móviles, ya que cada vez hay más gente que entra a nuestro blog a través de estas plataformas.

Así que como ya os comentamos hace unas semanas, hoy os vamos a enseñar cómo insertar botones sociales para compartir en nuestra plantilla blogger.



Vamos a poner iconos sociales para compartir SIN usar una web externa: solo usaremos un pequeño script que colocaremos en nuestro código.

De modo que nuestro blog cargará más rápido y además podremos personalizar al 100% los botones sociales... ¿a que mola? :p

Si queréis saber cómo se ponen en la versión para web, no problem! Aquí tenéis el anterior tutorial dónde lo explico paso a paso.

Si ya habéis puesto en práctica el anterior tutorial y tenéis los botones sociales en la versión para web, podéis ir directamente al paso 2 :)

IMPORTANTE: El diseño de tu plantilla móvil debe ser PERSONALIZADA para que se vean los cambios.

#1 Primero de todo tienes que quitar los botones sociales preestablecidos de blogger.

Para ello tienes que ir al apartado de Diseño ➡ Entradas del blog ➡ Editar (Haz siempre una copia de seguridad de la plantilla para no perder nada si no sale bien la cosa). Y una vez en la ventana de edición de las entradas, debes desmarcar la casilla Mostrar botones para compartir.

tutorial-blogger-cambiar-iconos-sociales-movil-mobile-social-icons-pasos


#2 Luego ya puedes poner el código HTML.

Nos vamos 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 debes introducir <div class='post-footer'> para encontrar la parte de código que se encarga de editar el pie de los posts.

IMPORTANTE: hay dos líneas de código con ese nombre, en este caso debes buscar la primera línea, ¡sinó no se te verán los botones sociales! 

Una vez en la segunda línea de <div class='post-footer'> debes buscar post-footer-line-1, y justo después pegar el siguiente código:

<!-- INICIO de iconos para compartir en redes sociales en móvil -->
   <center>
   <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>
   <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>
<!-- FINAL de iconos para compartir en redes sociales en móvil -->


Si quieres cambiar los botones sociales que te he puesto en este código, solo deberás cambiar la URL de las imágenes que están en color azul por la URL de los iconos sociales que tu quieras.

Si quieres saber cómo guardar las imágenes en tu propio sitio mira este otro tutorial :)

El center que os he puesto en morado sirve para que se os quede centrado debajo de la entrada, si no lo queréis centrado podéis quitar estas dos líneas de código.

Recuerda que si te interesa saber cómo implementar estos botones sociales en la versión web puedes consultar éste otro tutorial.

Y aquí termina el tutorial de hoy, si te ha servido puedes compartirlo en las redes sociales, te lo agradeceremos infinitamente!

Un abrazo estrujador!

Laia

2 comentarios:

  1. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  2. Hola!
    Tienes un error en el post, en el segundo y último < center > que tienes en morado, te faltó el "/", sería < /center >.
    Un saludo!

    ResponderEliminar