Botones para compartir con Sharebar inferior Responsive para Blogger

En los blogs es indispensable añadir botones para compartir, puesto que con ellos facilitamos la tarea a nuestros lectores de compartir las entradas que le gustaron en sus redes sociales y aún más importante es que dichos botones sociales se adapten a la pantalla de un teléfono inteligente, ya que la mayoría del tráfico que recibimos es proveniente de terminales móviles; en esos términos hoy veremos como añadir botones sociales con un excelente sharebar inferior responsive (se ve cuando accedemos a la web desde un teléfono), así que veamos como luce y  como añadirlo.

Botones para compartir con Sharebar inferior Responsive para Blogger..

botones-responsive-sharebar-blogger

Para añadir este truco en tu sitio web solo debes ir a Plantilla, Editar HTML y antes de ]]></b:skin>  añade el siguiente CSS:

/*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;}
 media screen and (max-width:550px){
.sharesimple{text-align:center;}
.sharetitle{display:none}
.sharebarsimple{width:100%;text-align:center;}
}

Ahora busca la siguiente línea en el footer:

<div class='post-footer-line post-footer-line-3'>

Pega lo siguiente:

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

Para finalizar ve a  <body>  y justo abajo añade lo siguiente:

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

Solo queda guardar los cambios y disfrutar de este genial set de botones para compartir.

0
Shares

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *