Los botones que os presento a continuación son unos botoncitos que sirven para compartir tus entradas, por ejemplo en Blogger, y son totalmente personalizables, ya que para personalizarlos, sólo debes de cambiar las URL'S de las imágenes, por los iconos que más te gusten. Tienen un efecto muy bonito, al hacer hover, o al pasar el cursor por encima del icono de la red social que quieres compartir, dicho efecto, es un bonito título con el nombre de la red social. Para ver la demostración de lo que escribo, debes de ver seguidamente la demo, con los botones sociales! Observación: tengo que decir que en la demostración sólo podrás observar el efecto, no sirven para compartir, si le das clic en cualquier icono, es sólo una demo.
Demostración!ñññññññ
✔Comparte el artículo:
Facebook
Twitter
Google+
Pinterest
StumbleUpon
Dig
LinkedIn
Para añadir lo en Blogger sigue estos pasos:
- Ves a tu cuenta de Blogger
- Ahora selecciona Plantilla
- Seguidamente debes de seleccionar Edición Html
- Y busca con Ctrl+F la etiqueta ]]></b:skin>
- Y antes de ]]></b:skin> copia y pega el siguiente código CSS
/*Botones para compartir personalizados by aizumblog.com*/
ul.social_btrix {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_btrix li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_btrix li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_btrix li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff;
z-index:9999;
text-shadow:1px 1px 0 rgba(0,0,0,0.75);
background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
border-radius:3px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
padding:3px;
}
ul.social_btrix li.abfacebook {
background-image:url(http://4.bp.blogspot.com/-nJMUyZUi2SM/UaXEnGYtwWI/AAAAAAAAAkM/SXrQ4Q8ASoA/s1600/btrix-facebook-icon.png);
}/* Añade la URL del icono que más te guste de facebook */
ul.social_btrix li.abtwitter {
background-image:url(http://4.bp.blogspot.com/-_18_qzg7sHs/UaXEnVKS3aI/AAAAAAAAAkY/UYLCvEQuOEI/s1600/btrix-twitter-icon.png);
}/* Añade la URL del icono que más te guste de twitter */
ul.social_btrix li.abgoogleplus {
background-image:url(http://2.bp.blogspot.com/-DpI_6iUH6GY/UaXEnB83lFI/AAAAAAAAAkQ/Q6QtGamgL_E/s1600/btrix-google-icon.png);
}/* Añade la URL del icono que más te guste de google+ */
ul li.abpinterest {
background-image: url(http://2.bp.blogspot.com/-tMeDXWRp5VY/UaXEmVQIGDI/AAAAAAAAAj0/FrLLKtGE8j0/s1600/btrix-Pinterest-icon.png);
}/* Añade la URL del icono que más te guste de pinterest */
ul.social_btrix li.abstumbleupon {
background-image:url(http://1.bp.blogspot.com/-NxzIC4d0ixE/UaXEmytFBoI/AAAAAAAAAkI/jmk72VMrnvA/s1600/btrix-StumbleUpon-icon.png);
}/* Añade la URL del icono que más te guste de stumbleupon */
ul.social_btrix li.abdig {background-image:url(http://4.bp.blogspot.com/-J2vYlohj8qw/UaXEmX-JDMI/AAAAAAAAAj8/QwSrbs1Md8w/s1600/btrix-Digg-icon.png);
}/* Añade la URL del icono que más te guste de digg */
ul.social_btrix li.ablinkedin {
background-image:url(http://2.bp.blogspot.com/-HaUpL3wjx3I/UaXEmf3UVSI/AAAAAAAAAj4/cHVj0FALvgk/s1600/btrix-Linkedin-icon.png);
}/* Añade la URL del icono que más te guste de linkedin */
#animation_btrix:hover li {
opacity:0.2;
}
#animation_btrix li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_btrix li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_btrix li:hover {
opacity:1;
}
#animation_btrix li:hover a strong {
opacity:1;
top:-10px;
}
- Ahora busca la siguiente etiqueta en tu plantilla <data:post.body/>
- Una vez encontrada, añade el siguiente código antes de <data:post.body/>
- Encontrarás más de un <data:post.body/> prueba con la segunda etiqueta
- O también después de <div class='post-footer-line post-footer-line-1'>
- Y también lo puedes añadir en <div class='post-footer-line post-footer-line-2'>
- Y hasta en la cabecera del post en <div class='post-header-line-1'/>
<b:if cond='data:blog.pageType == "item"'>
<div style='font-size: 22px;'><b>Comparte este artículo:</b></div>
<ul class='social_btrix' id='animation_btrix'>
<li class='abfacebook'>
<a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'><strong>Facebook</strong></a>
</li>
<li class='abtwitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
</li>
<li class='abgoogleplus'>
<a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
</li>
<li class='abpinterest'>
<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' target='_blank'><strong>Pinterest</strong></a>
</li>
<li class='abstumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
</li>
<li class='abdig'>
<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
</li>
<li class='ablinkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
</li>
</ul>
</b:if>
Get free premium widgets for your blog and website.