Hace unos días vimos como instalar una simpática
caja de autor para blogger y al final de dicha entrada expuse que era totalmente personalizable para incluir en su interior cualquier cosa. Pues bien, hoy la he adaptado para mostrar los botones de compartir en las diferentes Redes Sociales.
Si quieres colocar esta original caja para compartir en tu blog, sigue estos pasos:
1.- Plantilla - Editar HTML - buscamos (ctrl+f o F3)
<div class='post-footer-line post-footer-line-1'/> o en su lugar <div class='post-footer-line post-footer-line-2'/>
y justamente debajo pegamos lo siguiente:
<style type="text/css">
.caja{
float:center;}
.base {
position:relative ;
width: 540px;
height: 62px;
margin: 10px auto;
background-color: #f7f7f7;
z-index: 1;
padding: 2px;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.izquierda{
position: absolute;
background: #DBDCDE;
bottom: 0;
right: 50%;
left: 0;
top: 0;
border:1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.base:hover .izquierda{
right: 100%;
left: -50%;
}
.derecha{
position: absolute;
background: #DBDCDE;
bottom: 0;
left: 50%;
right: 0;
top: 0;
border:1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.base:hover .derecha{
left: 100%;
right: -50%;
}
.portada {
overflow: hidden;
}
.portada .izquierda {
background: url(https://lh3.googleusercontent.com/-UMYWlCNlNkg/UWvfMjI1cmI/AAAAAAAALMk/5LsBE3_kRRU/s260/IZQU-COMPARTIR.jpg);
border:1px solid #F0F0F0;
z-index: 1;
}
.portada .derecha {
background: url(https://lh5.googleusercontent.com/-XKLiTNqpZsU/UWvfQcs2-tI/AAAAAAAALMs/D9mEWkIvGgw/s260/DERECHA-COMPARTIR.jpg);
border:1px solid #F0F0F0;
z-index: 1;
}
.base img {
margin-top: 15px;
}
.compartir {text-align: center;position:relative;
margin-top:-10px;
border-radius:8px;
margin-bottom:20px;
}
</style>
<div class='caja'>
<div class='base portada'>
<div class='izquierda'></div>
<div class='derecha'></div>
<div class='compartir' id='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><g:plus action='share' annotation='vertical-bubble' expr:href='data:post.url'/></td>
<td><script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script></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></div></div>
Guardamos cambios y listo.
Publicaciones Relacionadas
trucos blog
