Tutorial: Tutorial de botones de compartir y Sharebar Responsive para Blogger

  • Autor Autor pulga91
  • Fecha de inicio Fecha de inicio
pulga91

pulga91

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
Hace un par de días publique un tutorial para añadir botones para compartir y una Sharebar Responsive sin plugin para wordpress, varios usuarios preguntaron por lo mismo para Blogger y me di a la tarea de revisar el código, ahora les comparto la versión para Blogger, la cual es aún más fácil de instalar.

Primeramente mostramos lo que obtendrán con este tutorial:

Post normal
post1.webp
Post Responsive
Post2.webp
Sharebar
barra1.webp
Responsive 1
barra2.webp
Responsive 2
barra3.webp
barra4.webp

Esta vez solo bastara con copiar y pegar el código

Vamos a nuestro panel de Blogger a plantilla y editar código HTML

Paso 1: Añadimos el siguiente css:
Insertar CODE, HTML o PHP: 
/*Sharebar*/
.sharesimple{width:100%;margin-top:10px;margin-bottom:10px;}
.sharesimple ul{margin:0;padding:0;}
.share-buttons{list-style: none;}
.share-buttons li{display: inline;}
.sharebar{width:100%;height:50px;background-image:url("http://3.bp.blogspot.com/-7UwIEPsFmyk/VHzopPW15UI/AAAAAAAAADw/O1knmI7bAbU/s1600/sharebarfondo.png");z-index:100;position:fixed;bottom:0px;}
.sharebarsimple{width:80%;margin-top:0px;margin-bottom:0px;margin:0 auto;z-index:1000;position:relative;}
.sharebarsimple ul{margin:0;padding:0;}
.sharebarbuttons{list-style: none;}
.sharebarbuttons li{display: inline;}
.sharetitle{Font-weight:700;color:#fff;font-size:30px;display:inline;float:left;margin-right:10px;margin-top:5px;}
  [MENTION=16931]medi[/MENTION]a screen and (max-width:550px){
.sharesimple{text-align:center;}
.sharetitle{display:none}
.sharebarsimple{width:100%;text-align:center;}
}

Paso 2: Buscamos la ubicación en donde queremos los botones para compartir y pegamos el siguiente código:
Insertar CODE, HTML o PHP: 
<h3>Compartir</h3>
 <div class="sharesimple">
								 <ul class="share-buttons">
	<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' target="_blank" rel="nofollow" title="Compartir en Facebook" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;" ><img src='http://3.bp.blogspot.com/-3u0ysg1-Vlw/VHzoonfaKkI/AAAAAAAAADU/A3qfCo_2ipM/s1600/facebook.png'/></a></li>
	<li><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;' target="_blank" rel="nofollow" title="Compartir en Twitter" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;" ><img src='http://1.bp.blogspot.com/-Fo0N7vY7Kvk/VHzopRoV-pI/AAAAAAAAADo/yLqRsrHkCUc/s1600/twitter.png'/></a></li>
<li><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' target="_blank" rel="nofollow" title="Compartir en Google+" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;" ><img src='http://1.bp.blogspot.com/-87Fx_-fVp8g/VHzoosXSpUI/AAAAAAAAADc/uUWxXceTZiU/s1600/gplus.png'/></a></li>
<li><a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel="nofollow" title="Compartir en Pinterest"><img src='http://3.bp.blogspot.com/-WrPp_bArJl8/VHzoooj-2YI/AAAAAAAAADY/9l_uLqO9QEI/s1600/pinterest.png'/></a></li>
<li><a href="http://www.tumblr.com/share" title="Compartir en Tumblr" rel="nofollow" target="_blank" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;"><img src='http://1.bp.blogspot.com/-j8QTuZIrU1g/VHzopWDho_I/AAAAAAAAADk/MnL4WejS3wo/s1600/tumblr.png'/></a></li>
</ul>
</div>

Paso 3: Nos colocamos en el footer o incluso debajo de la etiqueta <body> y colocamos el siguiente código:
Insertar CODE, HTML o PHP: 
<div class="sharebar"><div class="sharebarsimple"><div class="sharetitle">Compartir</div><ul class="sharebarbuttons">
	<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' target="_blank" rel="nofollow" title="Compartir en Facebook" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;" ><img src='http://3.bp.blogspot.com/-3u0ysg1-Vlw/VHzoonfaKkI/AAAAAAAAADU/A3qfCo_2ipM/s1600/facebook.png'/></a></li>
	<li><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url' target="_blank" rel="nofollow" title="Compartir en Twitter" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;" ><img src='http://1.bp.blogspot.com/-Fo0N7vY7Kvk/VHzopRoV-pI/AAAAAAAAADo/yLqRsrHkCUc/s1600/twitter.png'/></a></li>
<li><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' target="_blank" rel="nofollow" title="Compartir en Google+" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;" ><img src='http://1.bp.blogspot.com/-87Fx_-fVp8g/VHzoosXSpUI/AAAAAAAAADc/uUWxXceTZiU/s1600/gplus.png'/></a></li>
<li><a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel="nofollow" title="Compartir en Pinterest"><img src='http://3.bp.blogspot.com/-WrPp_bArJl8/VHzoooj-2YI/AAAAAAAAADY/9l_uLqO9QEI/s1600/pinterest.png'/></a></li>
<li><a href="http://www.tumblr.com/share" title="Compartir en Tumblr" rel="nofollow" target="_blank" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;"><img src='http://1.bp.blogspot.com/-j8QTuZIrU1g/VHzopWDho_I/AAAAAAAAADk/MnL4WejS3wo/s1600/tumblr.png'/></a></li>
</ul></div></div>

Paso 4: Guardamos y listo.

*Nota: El botón de Twitter de la Sharebar tiene un detalle y es que este no obtiene el nombre del post, solo la url, si alguien nos puede ayudar a corregirlo que comparta la solución, el botón que va en los post no tiene problema.
 
Una pregunta si quiero que salga dentro de cada entrada como podría buscar ?
 
tienes algún demo? gracias :encouragement:
 
luismaster2009 dijo:
Una pregunta si quiero que salga dentro de cada entrada como podría buscar ?
Hacer clic para expandir...

Depende del tema, ya que si es personalizado puede que cambie la estructura, sin embargo busca algo como "post-body" y acomodalo, puedes realizar pruebas si no conoces bien el codigo y dejaro en donde te guste 🙂
Saludos

- - - Actualizado - - -

Ignacio dijo:
tienes algún demo? gracias :encouragement:
Hacer clic para expandir...

Te he enviado el demo por privado 🙂
 
buen tutorial lo pongo es favoritos para verlo mas tarde con mas calma
 
Se ve muy bueno el tutorial, muchas gracias por compartirlo

😉
 
Muchas gracias por el aporte 🙂
 
gracias por el tutorial
 
exelente! :sorrow:. gracias
 
amigo disculpa pero podrias especificar en que parte de la plantilla de blogger pegar esos codigos? ya se que ay que pegarlos pero en donde los pego debajo del body o que? tengo que seguir los 3 pasos si o si? solo me interesa los botones para compartir osea el numero 1 ... por favor agradeceria tu respuesta
 
si solo quieres los botones de compartir, basta con colocar el css en donde esta el demas css y colocar el codigo de los botones en donde desees que se muestren en este caso, en el cuerpo del post
 
pulga91 dijo:
si solo quieres los botones de compartir, basta con colocar el css en donde esta el demas css y colocar el codigo de los botones en donde desees que se muestren en este caso, en el cuerpo del post
Hacer clic para expandir...

y como sabre en que parte de la plantila css esta el cuerpo del post?

- - - Actualizado - - -

el codigo del paso uno donde lo pego al final de la plantilla? al comienzo?
podrias dar las posiociones donde se debe colocar, agradeceria tu respuesta
 
la posicion del primer codigo que es el css debe ir donde esta el demas, normalment y depediendo de la plantilla este esta hasta arriba, revisando el codigo podras encontrar algo similar al codigo aqui puesto ahi lo pegas

lo demas tambien depende de la plantilla
 
Incréible tutorial, lo he implementado a mi blog pero se alinea verticalmente y no de forma horizontal como en las capturas que adjuntas ¿A qué crees que se deba? Mi blog es malefashiontrends.com, espero que puedas ayudarme con este pequeño tropiezo. ¡Saludos y gracias!
 
muchas gracias por el tuto saludos
 
Gracias, me gusta como se ve en el movil 😀
 
Saludos, perdón por revivir un tema antiguo... Podrían mandarme un demo por favor de como se ven los botones? ... En que parte de la plantilla hay que incorporar el código?

Hasta Luego 🙂
 
Excelente, es lo que buscabawa
 
Me lo llevo hermano, muchas gracias por compartir :encouragement:
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

R
Actualización de botones para compartir en WhatsApp e Instagram
2
Respuestas
20
Visitas
532
rikrdomat
R
T
Tutorial: Botones para compartir en Blogger
Respuestas
5
Visitas
1K
Souhiro
Souhiro
degonexd
Modificar botones de compartir en Blogger con Font Awesome
Respuestas
2
Visitas
646
degonexd
degonexd
ZKreations
Tutorial: Botones para compartir personalizados en Blogger
Respuestas
13
Visitas
3K
clientesoft
C
A
Crear botones para compartir en redes sin plugins
Respuestas
3
Visitas
319
mrtorpedin
mrtorpedin
Atrás
Arriba