- Desde
- 4 Abr 2010
- Mensajes
- 211
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
Post Responsive
Sharebar
Responsive 1
Responsive 2
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:
Paso 2: Buscamos la ubicación en donde queremos los botones para compartir y pegamos el siguiente código:
Paso 3: Nos colocamos en el footer o incluso debajo de la etiqueta <body> y colocamos el siguiente código:
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.
Primeramente mostramos lo que obtendrán con este tutorial:
Post normal
Post Responsive
Sharebar
Responsive 1
Responsive 2
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='"http://www.facebook.com/sharer.php?u=" + 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='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + "&lang=id"' 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='"http://plus.google.com/share?url=" + 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('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+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='"http://www.facebook.com/sharer.php?u=" + 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='"https://twitter.com/intent/tweet?url=" + 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='"http://plus.google.com/share?url=" + 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('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+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.