domingo, 17 de julio de 2016

Botones de Compartir personalizados para Blogger


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='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
<i class='fa fa-facebook'/> </a> </li>
<li class='twitter_share'>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
<i class='fa fa-twitter'/></a> </li>
 <li class='google_share'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a> </li>
<li class='linkedin_share'>
 <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
<i class='fa fa-linkedin'/></a> </li>
<li><a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); 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.

2 comentarios:

  1. Muchísimas gracias por este post, me salvó la plantilla, tenia que cambiar el compartir en Pinterest por Google+ y este a sido el único articulo que he encontrado tratando exactamente el mismo código que necesitaba!!
    Puedes ver el resultado aquí:
    http://www.deixalatevaempremta.com

    ResponderEliminar
    Respuestas
    1. De nada +Toni Domingo que bueno que haya sido de utilidad.

      Gracias por comentar.

      Eliminar