Bloggin Red: Botones sociales elegantes compartir entradas para Blogger 2024

Tener botones en nuestro blog para que los lectores puedan compartir el contenido que ven es importante, es por ello que hoy comparto unos elegantes botones que irán incorporados al final de cada entrada de nuestro blog. Podrás verlos funcionar en el siguiente GIF o al final de esta entrada ya que los tengo implementados en el blog:

Tutorial paso paso:

1. Lo primero será agregar el llamado por URL para usar íconos, para ello iremos a Tema > Editar HTML y buscamos la etiqueta </head>.

2. Ahora arriba de la etiqueta anterior pegaremos el siguiente código:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' media='all' rel='stylesheet' type='text/css'/>

3. Vamos a agregar los estilos CSS, ahora buscamos en nuestra plantilla el código siguiente "]]></b:skin>" y justo encima pegaremos todo esto:

.post-footer{
margin-top:30px;
}
.share-post, .multiauthor-box {
margin-bottom:50px;
}
.share-post ul {
padding:0;
margin:0;
text-align:center;
}
.share-post li{
list-style:none;
display:inline-block;
margin-right:10px;
padding:0;
font-weight:700;
text-transform:uppercase
}
.share-post li:first-child {
font-size:16px;
color:#22a1c4;
}
.share-post li a{
display:block;
text-align:center;
}
.share-post span{
display:none;
}
.share-post li a i{
display:block;
color:#fff;
width:40px;
height:40px;
line-height:40px;
font-size:18px;
border-radius:40px;
font-weight:normal;
transition:all .3s;
}
.share-post{
width: 90%;
margin: 0 auto;
border-top:1px solid #eff0f0;
border-bottom:1px solid #eff0f0;
line-height:52px;
min-height:52px;

}
.share-post li a i.fa.fa-facebook{
background:#3b5998;
border:1px solid transparent;
}
.share-post li a i.fa.fa-twitter{
background:#19bfe5;
border:1px solid transparent;
}
.share-post li a i.fa.fa-google-plus{
background:#d64136;
border:1px solid transparent;
}
.share-post li a i.fa.fa-linkedin{
background:#006699;
border:1px solid transparent;
}
.share-post li a i.fa.fa-pinterest{
background:#cb2027;
border:1px solid transparent;
}
.share-post li a i.fa.fa-facebook:hover{
background:#fff;
color:#3b5998;
border:1px solid #4666aa;
}
.share-post li a i.fa.fa-twitter:hover{
background:#fff;
color:#19bfe5;
border:1px solid #2acef4;
}
.share-post li a i.fa.fa-google-plus:hover{
background:#fff;color:#d64136;
border:1px solid #e95247;
}
.share-post li a i.fa.fa-linkedin:hover{
background:#fff;
color:#006699;
border:1px solid #017ab6;
}
.share-post li a i.fa.fa-pinterest:hover{
background:#fff;
color:#cb2027;
border:1px solid #e33239;
}

4.Ahora buscamos la siguiente línea de código <div class='post-footer'> puede que te salga dos o tres veces prueba en cada una hasta que salga, pega debajo de ella el siguiente código:

<b:if cond='data:blog.pageType == "item"'>
<div class='share-post'>
<ul class='entry-share-list clearfix'>
<li>Compartir en: </li>
<li class='facebook_share'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
<i class='fa fa-facebook'/> </a> </li>
<li class='twitter_share'>
<a expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
<i class='fa fa-twitter'/></a> </li>
<li class='google_share'>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a> </li>
<li class='linkedin_share'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
<i class='fa fa-linkedin'/></a> </li>
<li><a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'>
<i class='fa fa-pinterest'/></a>
</li>
</ul>
</div>
</b:if>

5. Finalmente guarda los cambios y observa en tus entradas como se ve, en principio no hay nada más que modificar.

Pero si te queda alguna duda no olvides comentar sin problema alguno, hasta la próxima ;)

Botones sociales elegantes compartir entradas para Blogger 2024

2 comentarios: