Una de las características que hace llamativo una página, blog o revista son los detalles que se la hacen a la misma, ya sea en colores, formas texturas, fondos tipo de letra, etc., todo esto hace que se agradable al momento de leer o navegar el contenido.
He estado modificando algunos estilos de este blog, como son el buscador, el tipo de letra, tamaño, íconos, y más recientemente, los botones de compartir en las redes sociales más utilizadas.
A continuación les describiré cómo agregar esos íconos a su blog, o igual y pueden utilizarlo en sus páginas personales.
Nota: primero antes que nada, debo aclarar que los pasos realizados aquí, fueron para blogger.
Los botones de compartir por default de blogger se muestran de la siguiente manera:
Paso 1:
Ir a su blog, seleccionar la pestaña plantilla:
Ir a la opción <Editar HTML>
Paso 2:
Entonces les mostrará el modo edición de HTML, entre las etiquetas <head></head> pegar 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'/>
Esa instrucción es para anexar un estilo de css, el cual contiene la definición y estilos de fuentes (tipografías) de las redes sociales, de facebook, twitter etc., es necesario, ya que sino se declara, dichos iconos no se visualizarán.
Y quedará como se muestra en la siguiente imágen:
Paso 4:
Agregar el código css para los botones:
El siguiente código se pega antes de la etiqueta ]]></b:skin>, la cual la van a encontrar en el código de la plantilla.
.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;
}
Para buscar dicha línea, posicionarse en el código, y presionar las teclas Ctrl + F, y buscar ]]></b:skin>.
Al encontrar la línea, pegar el código antes de la misma, quedando de la siguiente manera:
No se les olvide ir guardando cambios, para hacerlo clic en el botón <Guardar Plantilla>.
Paso 5: Agregar el código html para definir los botones:
El código html que define los botones es el siguiente:
<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='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>
Éstas etiquetas, pegarlas después del segmento de código de los botones de compartir por default que vienen con blogger, de nuevo, utilizar el buscador Ctrl+f, para buscar la línea, el segmento es parecido al siguiente:
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
<!-- El bloque de etiquetas se pegaría aquí -->
Después de pegar el bloque de etiquetas personalizado, ahora es necesario comentar el código por default de blogger, para que no aparezca en e blog, al comentarlo quedaría así:
<!-- div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div -->
El código al pegarlo en el editor se verá de la siguiente manera:
Finalmente guardamos la plantilla, visualizamos el blog y tendremos el resultado como lo vez al final de este blog.
Espero que sea de utilidad y cualquier duda sobre este post dejarla en los comentarios o contactar con alguna de las redes sociales.
