Botones para compartir
estos botones sirven para compartir de varis formas para no complicarnos la vida poniendo varios codigos o boton por boton si q nos facilitemos con varios botones para compartir y ya..
para poder tener estos botones lo primero q haremos es seguir los pasos
para poder tener estos botones lo primero q haremos es seguir los pasos
- ingresa en la Edición HTML de la plantilla, marca la casilla Expandir plantillas de artilugios, y antes de </head> pega el script:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(function()
{
jQuery("#msg-compartir").click(function(event) {
event.preventDefault();
jQuery("#btns-compartir").slideToggle();
});
});
</script>
- Ahora antes de ]]></b:skin> agrega los estilos:
/* Botones para compartir
----------------------------------------------- */
.msg-compartir {
width:140px;
position:relative;
padding:10px;
margin:1em 0 3em;
text-align:center;
color:#000;
background:#F3961C;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(#f9d835, #f3961c);
background:-o-linear-gradient(#f9d835, #f3961c);
background:linear-gradient(#f9d835, #f3961c);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.msg-compartir::after {
content: "";
position: absolute;
bottom: -15px;
left: 67px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #F3961C transparent;
display: block;
width: 0;
}
.btns-compartir {
display: none;
margin-top:-10px;
background:#F2F2F2;
border:1px solid #D0C9AF;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
margin-bottom:20px;
}
- Por último, busca esta línea:
<div class='post-footer'>
- arriba de ella coloca el contenedor con los botones:
<b:if cond='data:blog.pageType == "item"'>
<center><a href='#' id='msg-compartir' style='text-decoration:none'><p class='msg-compartir'>Comparte esta entrada</p></a></center>
<center>
<div class='btns-compartir' id='btns-compartir'>
<table border='0' cellpadding='7'>
<tr>
<td><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=box_count&show_faces=false&width=73&height=63&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px;'/></td>
<td><a class='twitter-share-button' data-count='vertical' data-lang='es' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></td>
<td><script type='text/javascript'>(function(){var x=document.createElement('script'), s=document.getElementsByTagName('script')[0];x.async=true;x.src='http://widgets.itaringa.net/share.js';s.parentNode.insertBefore(x,s)})()</script>
<t:sharer data-layout='big'/></td>
<td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='tall'/></td>
<td><a expr:href='"http://bitacoras.com/anotaciones/" + data:post.url'><img alt='votar' expr:src='"http://widgets.bitacoras.com/votar/normal/" + data:post.url' style='vertical-align:middle;border:0;float:right; margin-left:10px;' title='Votar este artículo en Bitacoras.com'/></a></td>
</tr>
</table>
</div>
</center>
</b:if>
- y finalmente guarda los combios