Botones de Compartir personalizados para Blogger ~ linuxitos

domingo, 17 de julio de 2016

Botones de Compartir personalizados para Blogger

Posted on 7/17/2016 08:37:00 a.m. by Fernando Merino with 12 comments

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='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.

12 comentarios:

Associación deixalatevaempremta.orgjueves, noviembre 09, 2017 11:36:00 a.m.
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
ResponderBorrar
Respuestas
Mario A. Marcíamartes, abril 03, 2018 9:28:00 p.m.
Hola... me perdí desde el paso numero 5.
ResponderBorrar
Respuestas
Javi Torreslunes, junio 25, 2018 12:16:00 p.m.
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
ResponderBorrar
Respuestas
Javi Torressábado, septiembre 28, 2019 1:59:00 p.m.
Disculpa, mira, a ver si me puedes ayudar: quiero borrar el botón de google y en su lugar poner otro, u otros como el de instagram. ¿Me podrías decir cómo lo hago?, gracias.
ResponderBorrar
Respuestas
Javi Torressábado, septiembre 28, 2019 2:23:00 p.m.
Otra vez, por aquí, mira hice esto (para integrar el botón de instagram):
!. Coloqué este código:
}
.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-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-instagram{
background:#006699;
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-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;
}
.share-post li a i.fa.fa-instagram:hover{
background:#fff;
color:#3b5998;
border:1px solid #4666aa;
}
ResponderBorrar
Respuestas
Javi Torresmiércoles, octubre 23, 2019 6:24:00 p.m.
Gracias, amigo. Pero hay un espacio en blanco donde antes estaba el botón de google plus, y si le das clic en ese espacio en blanco te remite a Google, que, dice la página de destino, que ese servicio ya no está disponible. En ese espacio en blanco quiero meter el botón de Instagram. Gracias.
ResponderBorrar
Respuestas
Fernando Merinojueves, octubre 24, 2019 9:42:00 a.m.
ah ya, deja revisar eso, yo me refería a que ya modifiqué el header del sitio, pensé que te referías a eso, deja lo reviso, saludos
ResponderBorrar
Respuestas
Toasted Breadlunes, octubre 05, 2020 4:18:00 p.m.
Me ayudo mucho en mi blog gracias! :)
ResponderBorrar
Respuestas

Agregar un comentario

domingo, 17 de julio de 2016

Botones de Compartir personalizados para Blogger

12 comentarios:

Categorías

Archivos del Blog

Vistas a la página totales

Facebook

Datos personales