23 de octubre de 2016

Tutorial { Personalizar botones de compartir de Blogger}


Hola!!!

Ya hace tiempo que no me aparecia por aqui, pero la verdad es que no estoy leyendo NADA, y como a mi no me gusta saturar el "inicio" de mi blog con cosas repetitivas.. como 2 o 3 book tags y top 10... sin que haya (es haya o halla? xd ) por lo menos una reseña, ya ire a comprar libros, pero la verdad estoy super indecisa y no se ni que comprar... !!! QUIERO TODOS!!
El tutorial de hoy trata de personalizar los botones de compartir de un post ^^
ESTE TUTORIAL ESTÁ TOMADO DE AQUÍ



☕ 1. Lo primero que hay que hacer es: > ir a diseño > en entradas de Blog pinchareditar, (te aparecerá una ventana emergente) > desmarcar la opción  Mostrar los botones para compartir > guardan.
☕2. Ahora iremos a plantilla > editar HTML y buscamos este código (Para buscar dan clic dentro de la plantilla donde se muestra muchas líneas con código, dan CTRL + F, les aparecera un recuadro de búsqueda en la parte superior derecha DENTRO de la plantilla copian y pegan dentro del recuadro el código)  <div class='post-footer'>
👉 NOTA: tal  vez encuentras  dos, el que buscamos es el segundo, dan enter de nuevo para que los mande al segundo código y justo debajo de eso pegamos este otro:





<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_share'><img alt='Share this Post' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhndZpaTO8pm6Nu5WxNyTgUdKjjFf4wQQLS1dDMxUr_oaoyxRCIcOZtVNTu30FOpntNS-h_9McWZgYqMDZVbGTyI07goxqyBloj8-8MoG1mvEIXCSbo0uw4hWyBAhv2Gc80ZSwNgO3NdsVC/s1600/Share+this+Post.png'/></a>
<a class='addthis_button_facebook'><img alt='Share to Facebook' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_KeUuF0R5Ys_NtLHBxe71Dgcni8mbabCNlDYPKB9cj-Do2W6BV_UzK1JjWIOG26uxs9zJUSFU851D-WGC1pOVMN4p3ROkhu5nTTvvrYsbr8zkgd4R8LscOU0Vq1xZGRv4iGqbjIFaqKrx/s1600/Facebook+Button+Share.png' width='30'/></a>
<a class='addthis_button_twitter'><img alt='Share to Twitter' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS_PQxUYGRVj4vU5aNl12YlROx0TieyuobfEZRKSE7HfGJRuS2H9oQBWMXoYHMPh7Mm1Wlb03EgQhr14XQxThs9magsHiZDgA7H9e_CbVkhyBzeHPkSFLEX3VbTyW9r0Nsgk_TC6VxVCI0/s1600/Twitter+Button+Share.png' width='30'/></a>
<a class='addthis_button_email'><img alt='Email This' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT3M0A-eWnK6JrxlBs8PsXNsHDlssNpfAOhXXx7m3neF1czDXy_ZmMKtBjEtFyYPYobuyvMBXUA-nyaR2lxdg-b1HMD_293NyAJ5GiDl-POkZBURpzhM9CS4jPYon0udvHJXt3UOLJwD9m/s1600/Email+Button+Share.png' width='30'/></a>
<a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbGM3r5mdLrijtLAYybprvi40WhCCI2vLaXvStl0-9k-BptPj6aCdIAjmW8ZdP8ZZMMETqlb101pRlSrlFQtxtHh4S_Uk-MjhkhHa3_oo74RCoCkrdgdFebBzcIFZ3aKfXicfigDhKkUUs/s1600/Pinterest+Button+Share.png' width='30'/></a>
<a class='addthis_button_google_plusone_share'><img alt='Share on Google Plus' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD9xI2Fgi2bF4lOfsZanxHzleVtRH5Gwze21tFAUheppam7RlY53q3fQO_R9vQDqplQF73699NbD3sgft0qajxxkZpHZeFwfDiC4BRpcFs0mrsOALHSM38jpH8p32OEj9N_grGvOWXoxmb/s1600/Google+Plus+Share.png' width='30'/></a>
<a class='addthis_button_tumblr'><img alt='Share on Tumblr' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipvO2jtfOtHKnnRKx7UhpLjfHa0RPio_cPc4IthyphenhyphenkAKPUMVvikjU0iMWuiwbH4eA2WZ8-Depylfkr3tr2JR-Z2tDtyoSUpPmFyuAdBnKgy2sqbhpIUzXg6W1-kb-j_2sLaSvqqDDGufUU/s1600/Tumblr+Icon.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'/>
<!-- AddThis Button END -->

Bien, todo lo que está con fondo café corresponde a la URL de la imagen que quieres poner, esta la puedes cambiar por la imagen que tu quieras, lo que está marcado en azul corresponde a la medida que quieres dar a las imágenes.


NOTA: Si quieres borrar las palabras Share this, solo tienes que borrar este código  que se encuentra debajo de 'custom_images'> qué es este: 

<a class='addthis_button_share'><img alt='Share this Post' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhndZpaTO8pm6Nu5WxNyTgUdKjjFf4wQQLS1dDMxUr_oaoyxRCIcOZtVNTu30FOpntNS-h_9McWZgYqMDZVbGTyI07goxqyBloj8-8MoG1mvEIXCSbo0uw4hWyBAhv2Gc80ZSwNgO3NdsVC/s1600/Share+this+Post.png'/></a>

Si quieres cambiar la pocision en la que sevisualizaránn tus botones de compartir debes agregar: 
<div style="text-align: center;">
Justo debajo de:
 <!-- AddThis Button BEGIN --> (que es con lo que inicia el código)

center=centrado
Right=Derecha
Left=izquierda

ES MUY IMPORTANTE:
justo antes de que acabe el codigo osea antes de<!-- AddThis Button END --> debes cerrar el div... ya que cada que  inicia un código con: < es un "abrir" que se debe cerrar o marcara un error.... Bueno, pegas esto antes de lo que te dije:  </div>

Das guardar y listo ya tienes tus botones....

3 comentarios:

  1. Hola!!
    Me encantan este tipo de entradas, muy útil e interesante
    Un saludo :)

    ResponderBorrar
  2. Me has salvado la vida, hace bastante estaba buscando un tutorial así pero los que encontraba no lo explicaban tan bien, es que no soy muy buena jugando con los códigos HTML jajaja
    Saludos!

    ResponderBorrar
  3. ¡Hola!
    Me gustó mucho el tutorial, seguro lo voy a aplicar a mi blog ^^
    Besos ^^

    ResponderBorrar

Hola!
El blog es tanto tuyo como mio, yo solo expreso mi opinión y hago ver los libros desde otra perspectiva <3.
Cualquier comentario que no sea ofensivo o SPAM masivo será bienvenido.
Un beso. Felices Lecturas.

Gaby. Con tecnología de Blogger.