Como Personalizar botones de compartir.



Que feliz que me hace regresar al blog. Como algunos de ustedes saben, me fui de vacaciones, y regreso supercontenta, Mexico tiene lugares hermosos, llenos de historia y cultura, pero bueno esa es otra historia.
Hoy vengo con un tutorial, que ya buena falta hacia por aquí en el blog. Este va a petición de mi amiga Marysol, que me ha pedido un tutorial para cambiar esos botones sociales para compartir entradas.

Vamos a cambiar los botones tan aburridos que blogger nos pone, y tampoco queremos los clásicos de share this, cierto +Marysol ? Así que con este tutorial tú podrás poner los botones que más te gusten o los que vayan de acuerdo con tu estilo, las posibilidades son muchas.



Paso 1. Lo primero que tienes que hacer es ir a > Diseño, y en entradas de Blog pinchar > Editar, ahora vamos a desmarcar la opción > Mostrar los botones para compartir y guardamos.



Paso 2. Vamos a platilla> editar HTML y buscamos este codigo <div class=post-footer>

tal vez encuentras dos, el que buscamos es el segundo, ahora justo debajo de eso pegamos este otro.

<!-- AddThis Button BEGIN -->

<div class=addthis_toolbox>

<div class=custom_images>

<aclass=addthis_button_share><img alt=Share this Post border=0 src=http://4.bp.blogspot.com/-7Mh18shJbBw/UR0UQJUeNWI/AAAAAAAADCU/tReZl85IJ9c/s600/Share+this+Post.png/></a>

<a class=addthis_button_facebook><img alt=Share to Facebook border=0 height=30 src=http://1.bp.blogspot.com/-VwUjBqjcw_A/UR0UWOX12aI/AAAAAAAADCk/NMJtDo9H32U/s600/Facebook+Button+Share.png width=30/></a>

<a class=addthis_button_twitter><img alt=Share to Twitter border=0 height=30 src=http://4.bp.blogspot.com/-HdyrZLb5VQY/UR0UUeHYy5I/AAAAAAAADCc/FaCnOjlaQMQ/s600/Twitter+Button+Share.png width=30/></a>

<a class=addthis_button_email><img alt=Email This border=0 height=30 src=http://1.bp.blogspot.com/-ct8UEptg4Jo/UR0UXt9d4FI/AAAAAAAADCs/T-qjemKVoT8/s600/Email+Button+Share.png width=30/></a>

<a class=addthis_button_pinterest_share><img alt=Pin This border=0 height=30 src=http://2.bp.blogspot.com/-J779mbKE8XQ/UR0UYzYDpSI/AAAAAAAADC0/loD-dNI0ky8/s600/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=http://3.bp.blogspot.com/-TRH8rIF1HjM/UiAMrWAgs_I/AAAAAAAAEXo/wIQSxjsfO-k/s600/Google+Plus+Share.png width=30/></a>

<a class=addthis_button_tumblr><img alt=Share on Tumblr border=0 height=30 src=http://1.bp.blogspot.com/-j2vj1-1Ohvw/UkRzcjoz0aI/AAAAAAAAEis/EZoaxPnjX7c/s600/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 -->

Todo lo que está en amarillo 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 rojo corresponde a la medida que quieres dar a las imágenes, puedes mofidicarla.

NOTA: Si quieres borrar las palabras Share this, solo tienes que borrar este pedazo de código, que se encuentra en la parte superior justo debajo de custom_images>

<a class=addthis_button_share><img alt=Share this Post border=0 src=http://4.bp.blogspot.com/-7Mh18shJbBw/UR0UQJUeNWI/AAAAAAAADCU/tReZl85IJ9c/s600/Share+this+Post.png/></a>

NOTA 2: Ahora si queremos cambiar de posición como (center, left o right), solo tenemos que agregar lo que está en amarillo justo después de .

<!-- AddThis Button BEGIN -->

<div >Todo el contenido

Y cerramos con esto </div> justo antes de <!-- AddThis Button END -->

Para cambiar las URL de las imágenes que vayas a utilizar, te recomiendo utilizar esta página web postimage.org de alojamiento gratuito, es muy sencilla y carga mucho más rápido que otras que he utilizado como tinypic.

Y ya, con estos sencillos pasos tendrás tu blog un paso más personalizado. Y pues es todo, espero te sea de ayuda y me haces un grandísimo favor si compartes, no cuesta nada.

Si necesitas algún tutorial mándame un correo electrónico y veo si puedo crearlo. Va !

XO

Taína.

Fuente: este post proviene de Blog de CYeyas, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Esta publicación está dirigida a un público de adultos mayores de 21 años. Esta campaña ha sido compensada por Collective Bias, Inc. y su anunciante. Todas las opiniones son solo mías. #SutterHomeSwee ...

Esta campaña ha sido compensada for Collective Bias, Inc. y su anunciante. Todas las opiniones son solo mias. Este contenido es para lectores de mayores de 21 años. #40DaysOfFlavor Si nunca has proba ...

Recomendamos

Relacionado

Blogging PLANTILLAS BLOGGER DIY ...

¿Eres de los que tienes bloggers invitados que de vez en cuando postean en tu blog? Si estas asintiendo con la cabeza entonces sabrás la importancia que tiene para ese blogger sentirse como en casa, hay que hacerle sentir que es importante para ti y para tu publico, que no le quieres perder y que a su vez el se sienta cómodo, único e irreemplazable, pues el aparte de darte un post, ha hecho un tra ...

Tutoriales Blogging Estilos

Feliz miércoles ! Se siente bien estar de regreso después de varios días de tener completamente abandonado el blog. Mi familia y yo estuvimos de paseo y pudimos conocer algunos lugares que nos encantaron y nos dejaron con deseos de quedarnos más días, pero nimodo, teníamos que regresar. Me muero de ganas de compartir con ustedes todas las imágenes que tome por donde andaba. Pero hoy vengo a otra c ...

Blogging Tutoriales

Una de las cosa que más me gustan de Blogger, es la capacidad de insertar y personalizar un formulario de contacto, sin la necesidad de recurrir a servicios como JotForm o Foxyform. Sin duda, un gran acierto, pues muchos de estos servicios tienen una limitación en cuanto a la cantidad de mensajes que puedes recibir en tu correo. Añadirlo es bastante sencillo, pues esta función se trata de un gadg ...

icono botón redes sociales ...

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

general social

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

general medios sociales promocionar tu blog

Os habréis dado cuenta ya que los iconos para compartir que trae Blogger, son bastante pequeñitos y discretos: Por eso yo los cambié hace ya tiempo por otros que pasan un pelín menos desapercibidos: Tampoco quiero ser "pesada" y poner unos gigantescos, pero esos me parece que se ven lo suficientemente bien como para "recordar" a la gente que pueden compartir mi post en las re ...

general social

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

general

En anteriores entregas aprendimos un poco de HTML básico que nos sirviera de base para luego comprender mejor la plantilla Blogger. Después pasamos a la acción creando nuestra primera plantilla y por último los contenedores de la cabecera, el cuerpo, una barra lateral y el pie del Blog. La idea es no copiar y pegar el código que "nos dan hecho", esta vez se trata de conseguir entender ...

general seo

La estructura de un Blog es la base sobre la que se construye y distribuye todo su contenido. En ella existen dos partes fundamentales: una visible compuesta por los componentes que conforman su presentación y otra invisible que sirve para que los sistemas que acceden al mismo sean capaces de analizar y extraer correctamente su información. La correcta estructura de un Blog asegura una correcta ex ...

HTML: Nivel A1

Si sigues por aquí es porque todavía tengo oportunidad de hacer que te guste el mundo del diseño web, por ello hoy vamos a dedicar la entrada a ver los errores de principiante en HTML5, el idioma que pone la estructura de nuestra web. El lenguaje HTML fue creado por Tim Berners Lee, el padre de la web. Este lenguaje permite que los archivos que dan estructura a una web estén formados únicamente de ...