16 abril 2013

Una simpática forma de compartir en Redes Sociales tus entradas

botones-compartir

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='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' 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(&#39;script&#39;), s=document.getElementsByTagName(&#39;script&#39;)[0];x.async=true;x.src=&#39;http://widgets.itaringa.net/share.js&#39;;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='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url'><img alt='votar' expr:src='&quot;http://widgets.bitacoras.com/votar/normal/&quot; + 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.


Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

2 comentarios

Saludos Amor sevillista, me gusto mucho tu trabajo
los generadores, tutoriales, noticias del Sevilla, muy bueno el Blog, Suerte y un abrazo desde Ecuador

Gracias, no sabes cuánto se agradece que tu trabajo se vea recompensado.
Saludos.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"