Tutorial: Botones grandes de "COMPARTIR" para blogger | Estilo UPSOCL

XSocl · 30 Sep 2014

Tutorial simple y sencillo...

Vas a plantilla>editar html
Codigos

Facebook

HTML:

<a href="javascript:var dir=window.document.URL;var tit=window.document.title;var tit2=encodeURIComponent(tit);var dir2= encodeURIComponent(dir);window.location.href=('http://www.facebook.com/share.php?u='+dir2+'&t='+tit2+'');"><img src="http://s2.subirimagenes.com/imagen/previo/thump_9094620fb-copia.png" alt="Compartir"  /></a>

TWITTER

HTML:

<a href="javascript:var dir=window.document.URL;var tit=window.document.title;var tit2=encodeURIComponent(tit);window.location.href=('http://twitter.com/?status='+tit2+'%20'+dir+'');"><img src="http://s2.subirimagenes.com/imagen/previo/thump_9094618twtr-copia.png" alt="Compartir" /></a>

Ambos

HTML:

<a href="javascript:var dir=window.document.URL;var tit=window.document.title;var tit2=encodeURIComponent(tit);var dir2= encodeURIComponent(dir);window.location.href=('http://www.facebook.com/share.php?u='+dir2+'&amp;t='+tit2+'');"><img src="http://s2.subirimagenes.com/imagen/previo/thump_9094626fb-copia.png" alt="Compartir"  /></a><a href="javascript:var dir=window.document.URL;var tit=window.document.title;var tit2=encodeURIComponent(tit);window.location.href=('http://twitter.com/?status='+tit2+'%20'+dir+'');"><img src="http://s2.subirimagenes.com/imagen/previo/thump_9094627twtr-copia.png" alt="Compartir" /></a>

Para colocar en la parte de arriba busca "<div class='post-header-line-1'/>" (Sin comillas) y pegar el código justo arriba, así:

Para ponerlo al final busca "</article>" y pegalo arriba, como en la sig. imagen:

Dale en guardar plantilla y listo!

La imagen para el botón se puede cambiar remplazando la url en:

HTML:

<img src="http://s2.subirimagenes.com/imagen/previo/thump_9094620fb-copia.png"

Por el de la imagen que ustedes elijan.

Imagenes de los botones originales:
https://drive.google.com/folderview?id=0B6e6zW0n1y5lbjhHYVo3MWR1WEk&usp=sharing

Si te sirvió no olvides dejarme tu "Me agrada", saludos:encouragement:

AndreayYap · 30 Sep 2014

Uff! lo que estaba buscando hace meses, lo voy a probar a ver cómo me va.

Gracias! :encouragement:

- - - Actualizado - - -

Funciona a la perfección, solo que según cual sea su plantilla, va a ser en el segundo u otro codigo,

a mi funciono en el segundo,

Insertar CODE, HTML o PHP:

<div class='post-header-line-1'/>

y la etiqueta article no me sale.

Pero eso será en footer. :encouragement:

masteryi · 30 Sep 2014

Excelente aporte.

Xauen · 30 Sep 2014

Hola LuisGVG , una pequeña duda, si quiero ponerlo únicamente en una página de mi blog en la que tengo algunas imágenes debo añadirlo en el HTML de aquella página, no?

Te lo consulto porque he probado pero no me funciona :ambivalence:

Saludos,
Xauen

XSocl · 30 Sep 2014

Xauen dijo:
Hola LuisGVG , una pequeña duda, si quiero ponerlo únicamente en una página de mi blog en la que tengo algunas imágenes debo añadirlo en el HTML de aquella página, no?

Te lo consulto porque he probado pero no me funciona :ambivalence:

Saludos,
Xauen

Es cosa de añadir el código en las entradas que deseas ponerlo y ya, otra forma de separarlo no conozco.

jmmm007 · 30 Sep 2014

como los pongo un poco mas pequeño

JhonnyrDesigns · 30 Sep 2014

:O ! hace tiempo que busco algo asi, se agradece el aporte ! :encouragement:

Xauen · 30 Sep 2014

LuisGVG dijo:
Es cosa de añadir el código en las entradas que deseas ponerlo y ya, otra forma de separarlo no conozco.

Vale, funciona a la perfección ahora.

Gracias compañero :encouragement:

XSocl · 30 Sep 2014

jmmm007 dijo:
como los pongo un poco mas pequeño

Baja estos:
https://drive.google.com/folderview?id=0B6e6zW0n1y5lbjhHYVo3MWR1WEk&usp=sharing
Cambia el tamaño y subelos a: subirimagenes.com (sin modificar)
Después remplaza la url como indique arriba:encouragement:

elmeteoro · 30 Sep 2014

Gracias, me funciono.

monsterpsi · 30 Sep 2014

Alguien sabe como se haría en wordpress?

Edison Martinez · 1 Oct 2014

Gracias necesitaba uno asi :encouragement:

pedro salinas · 1 Oct 2014

Muchas gracias :witless:

Watsky · 10 Dic 2014

Gracias me los han pasado y quedan geniales, las imagenes las cambiare por unos estilos, normalmente el codigo original de compartir no me compartia, estos JS andan geniales ahora si :encouragement:

Carambel · 10 Dic 2014

[MENTION=107410]LuisGVG[/MENTION] podrías poner unas imágenes de muestra? , desde ya muchas gracias.

gemag · 10 Dic 2014

Muchas gracias!!! hace tiempo buscaba esto!

Jaison Mora · 10 Dic 2014

monsterpsi dijo:
Alguien sabe como se haría en wordpress?

Es facil te paso el que yo programe y uso actualmente:encouragement:

Boton :

Insertar CODE, HTML o PHP:

<div class="share_inicio">
	<div class="botones facebook">
	<span>
	<a href="javascript: void(0);" onclick="window.open ('http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>', 'Facebook', 'toolbar=0, status=0, width=650, height=450');">
	Compartir en facebook</a>
	</span>
	</div>

Agregamos un poco de style css:

Insertar CODE, HTML o PHP:

.share_inicio {width: auto; margin: auto; margin-bottom: 102px;}
.share_inicio .botones{width: 222px;float: left;color: #fff;text-align: center;text-shadow: 0 1px 0 rgba(0, 0, 0, 0.17);margin: 8px 0px;padding: 12px;border-bottom: 1px solid rgba(0, 0, 0, 0.17);}
.share_inicio .facebook {background: #3B5998;margin-right: 4px;}
.share_inicio .facebook a {color:#fff;}
.share_inicio .botones span{font-size: 13px;font-weight: bold;}

Demo solo facebook: mira lo que hace este nino esta mujer por estar de provocadora | Spiky Tech

Saludos.

axx34 · 10 Dic 2014

doutop15 dijo:

Es facil te paso el que yo programe y uso actualmente:encouragement:

Boton :

Insertar CODE, HTML o PHP:

<div class="share_inicio">
	<div class="botones facebook">
	<span>
	<a href="javascript: void(0);" onclick="window.open ('http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>', 'Facebook', 'toolbar=0, status=0, width=650, height=450');">
	Compartir en facebook</a>
	</span>
	</div>

Agregamos un poco de style css:

Insertar CODE, HTML o PHP:

.share_inicio {width: auto; margin: auto; margin-bottom: 102px;}
.share_inicio .botones{width: 222px;float: left;color: #fff;text-align: center;text-shadow: 0 1px 0 rgba(0, 0, 0, 0.17);margin: 8px 0px;padding: 12px;border-bottom: 1px solid rgba(0, 0, 0, 0.17);}
.share_inicio .facebook {background: #3B5998;margin-right: 4px;}
.share_inicio .facebook a {color:#fff;}
.share_inicio .botones span{font-size: 13px;font-weight: bold;}

Demo solo facebook: mira lo que hace este nino esta mujer por estar de provocadora | Spiky Tech

Saludos.

genial muchas gracias por el cable

luisjavierherrera · 12 Dic 2014

Gracias por el aporte. Hace varios días los estaba buscando.

Hurley · 15 Dic 2014

Gracias por compartir :encouragement::encouragement::encouragement: