En esta ocasión les traemos unos botones
para compartir en las Redes Sociales muy especiales por la forma de su visualización.
Planeta Blogger tiene el gusto de presentarles
estos botones para compartir y que encontramos en el sitio Amor Sevillista los
cuales tienen un efecto muy interesante que gustará a los visitantes de nuestro
blog.
Estos botones para compartir, permanecen
tapados detrás de una imagen y cuando les ponemos el puntero del Mouse, se abre
la tapa para ser visualizados por el usuario.
Para Comenzar la Instalación, nos vamos a Plantilla / Personalizar / Editar HTML:
Una vez allí, ubicamos lo siguiente:
<div class='post-footer-line post-footer-line-1'/> o bien esta otra <div class='post-footer-line post-footer-line-2'/>
Si las encontramos repetidas; (las lineas de Código) escojeremos la ultima de Abajo.
Ahora, debajo de la línea escogida, pegamos lo siguiente:
<style type="text/css">
. Caja {
float: centro;}
. La base {
position: relative;
ancho: 540px;
altura: 62px;
margen: 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;
fondo: # DBDCDE;
inferior: 0;
derecha: 50%;
izquierda: 0;
top: 0;
border: 1px solid # F0F0F0;
-Webkit-transición: todos los 0.5s facilidad de salida;
-Moz-transición: todos los 0.5s facilidad de salida;
-Ms-transición: todos los 0.5s facilidad de salida;
-O-transición: todos los 0.5s facilidad de salida;
transición: todos los 0.5s facilidad de salida;
}
. De base:. Libración Izquierda {
derecha: 100%;
izquierdo: -50%;
}
. Continúa derecha {
position: absolute;
fondo: # DBDCDE;
inferior: 0;
izquierda: 50%;
derecha: 0;
top: 0;
border: 1px solid # F0F0F0;
-Webkit-transición: todos los 0.5s facilidad de salida;
-Moz-transición: todos los 0.5s facilidad de salida;
-Ms-transición: todos los 0.5s facilidad de salida;
-O-transición: todos los 0.5s facilidad de salida;
transición: todos los 0.5s facilidad de salida;
}
. De base:. Libración continúa derecha {
izquierda: 100%;
derecha: -50%;
}
. Portada {
overflow: hidden;
}
. Portada. Izquierda {
fondo: url( https://lh4.googleusercontent.com/-GXIFPsYD4ZU/U6xWBJPvTuI/AAAAAAAAALA/Yz1rBw0wOsc/w270-h62-no/1TapaIzqRedeSociales270x62.png );
border: 1px solid # F0F0F0;
z-index: 1;
}
. Portada. Continúa derecha {
fondo: url( https://lh6.googleusercontent.com/-INH01MMKB48/U6xXxD3LEQI/AAAAAAAAALU/q0zsmK74Lrc/w270-h62-no/2TapaDerRedeociales270x62.png );
border: 1px solid # F0F0F0;
z-index: 1;
}
. La 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'>
cellpadding='7'> border='0' <table
<tr>
<td> <iframe allowTransparency = 'true' expr: src = '"http://www.facebook.com/plugins/like.php?href =" + Datos: post.url + frameborder = '0 'scrolling =' 'style =' no fronterizo: ninguno; overflow: hidden; Ancho: 73px; altura: 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> Messenger 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> Messenger src="http://platform.linkedin.com/in.js" type="text/javascript"> </ script>
Messenger type="IN/Share" data-counter="top"> </ script> </ td>
<td> <a expr: href = '"http://bitacoras.com/anotaciones/" + Datos: post.url '> <img alt =' Votar 'expr: src =' "http://widgets.bitacoras.com/votar/normal/" + Datos: post.url 'style =' vertical-align: middle; fronteriza: 0; float: right; margin-left: 10px; " title = "Votar this article in Bitacoras.com '/> </ a> </ td>
</ Tr>
</ Table>
</ Div> </ div> </ div>
Para personalizarlo haremos lo
siguiente.
En donde está en color Rojo, cambiamos el Alto y el Ancho.
En donde está en color Azul vemos las URL de las imágenes que actúan
de tapa (sobre la caja) de los íconos, por lo que podemos poner otra imagen que sea de nuestro gusto.
Eso es todo y gracias por entrar.
