Botones de Compartir personalizados para Blogger

linuxitos - Julio 17, 2016

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.

: blogger css botones-de-compartir-para-blogger css-shared-buttos-blogger share-buttons blog share-buttons-css

Comentarios:

Nombre completo

Mensaje

Avisarme por correo si alguien responde a mi comentario.

Fernando Merino
hace 6 años

Gracias por comentar.

Me podrías enviar imágenes de cómo lo muestra y cómo quieres que lo muestre? para entenderte mejor, por seguún yo, sí aparecen en los pot pos separado, y otros son los iconos que se muestra en la página principal
Javier Torres Aguilar
hace 6 años

Hola amigo, mira implemente el código y los botones se visualizan bien; pero tengo una incomodidad, implemente otro código para que las entradas tengan un resumen con imágenes en miniatura, y los botones se muestran en estos resúmenes en la portada del blog; pero yo quiero que los botones de compartir se muestren solo en las entradas individuales, ¿me puedes ayudar? Este es mi sitio https://www.enformaya.net/ Gracias
Mario A. Marcía
hace 6 años

Hola... me perdí desde el paso numero 5.
Fernando Merino
hace 6 años

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

Gracias por comentar.
Toni Domingo
hace 6 años

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

Entradas del blog

Conoce la red social linuxClick

LiNuXiToS

Redes sociales

Accesos directos

Secciones

Entradas del blog

Botones de Compartir personalizados para Blogger

Comentarios:

Fernando Merino

Javier Torres Aguilar

Mario A. Marcía

Fernando Merino

Toni Domingo