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

pulga91 Seguir

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
4 Abr 2010
Mensajes
202
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.jpg
Post Responsive
Post2.png
Sharebar
barra1.jpg
Responsive 1
barra2.jpg
Responsive 2

barra3.jpg
barra4.jpg

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.
 

luismaster2009

Ómicron
Diseñador
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
7 Feb 2014
Mensajes
4.862
Una pregunta si quiero que salga dentro de cada entrada como podría buscar ?
 

pulga91

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
4 Abr 2010
Mensajes
202
Una pregunta si quiero que salga dentro de cada entrada como podría buscar ?

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

tienes algún demo? gracias :encouragement:

Te he enviado el demo por privado :)
 

Carlos Arreola

Admin
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
¡Excelente comerciante!
Suscripción a IA
Desde
6 Abr 2009
Mensajes
11.327
Muchas gracias por el aporte :)
 

mikimoney

Delta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
4 Abr 2012
Mensajes
720
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
 

pulga91

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
4 Abr 2010
Mensajes
202
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
 

mikimoney

Delta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
4 Abr 2012
Mensajes
720
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

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
 

pulga91

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
4 Abr 2010
Mensajes
202
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
 

dereksteven

Curioso
Verificación en dos pasos desactivada
Desde
9 Abr 2015
Mensajes
2
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!
 

Reaper

Delta
Redactor
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
25 Feb 2011
Mensajes
557
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 :)
 

Souhiro

Épsilon
SEO
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
12 Nov 2013
Mensajes
968
Excelente, es lo que buscabawa
 

ismael78

VIP
Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Verificado por Binance
Suscripción a IA
Desde
29 Sep 2016
Mensajes
405
Me lo llevo hermano, muchas gracias por compartir :encouragement:
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba