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..
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='"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>
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='"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>
Solo queda guardar los cambios y disfrutar de este genial set de botones para compartir.
0 comentarios