Reacciones de facebook para Blogger Reacciones de facebook para Blogger

Anteriormente les habia compartido la forma de tener reacciones en Blogger usando la plataforma de ShareThis, en donde destaco su exactitud y el rendimiento que este tiene sobre los demas plugins parecidos, pero su principal desventaja es la poca o nula personalizacion.


En este articulo vamos crear nuevos estilos para las reacciones de ShareThis, con los cuales podras personalizar las reacciones a gusto.


Instalar reacciones

Como paso mas importante ya debes tener instaladas las reacciones. Para ello ve a mi articulo Reacciones en Blogger usando ShareThis y completa los pasos del tutorial.


Insertar estilos

Para ello ve a Temas Editar HTML, busca </body> y arriba de eso pega el siguiente código CSS:


<style>/*<![CDATA[*/
/*!
 * Skins ShareThis v1.0.0
 * Copyright 2019 zkreations
 * Daniel Abel M. (fb.com/danieI.abel)
 */
/*! Core (No modificar) {{*/
#st-1 .st-btn>span.st-count {
    line-height: 1!important;
    font-family: Roboto, arial, sans-serif;
    display: inline-block!important;
    bottom: -8px;
    right: 0;
    position: absolute;
}
#st-1 .st-btn .st-text {display: none!important}
#st-1 .st-btn:hover>span.st-count {display: inline-block!important}
#st-1 .st-btn>svg {visibility: hidden;}
#st-1 .st-btn {
    padding: 0 !important;
    margin: 10px !important;
    width: auto !important;
}
[data-reaction] {
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}
/*}} Fin del core {{*/

/*! Personalización */
/* Contador
-----------------------------------------*/
#st-1 .st-btn>span.st-count {
    font-size: 10px!important; /* tamaño de texto */
    padding: 4px 7px; /* relleno */
    color: #757575; /* color */
    background: #fff; /* fondo */
    border-radius: 5px; /* borde redondeado */
    font-weight: 700!important;
    border: 1px solid rgba(0,0,0,.2); /* bordes */
    box-shadow: inset 0 2px 2px 1px #fff,
                inset 0 -2px 20px rgba(173,186,204,.15),
                0 1px 2px rgba(0,0,0,.15),
                0 2px 10px rgba(0,0,0,.05); /* sombra */
}
/* Like */
[data-reaction=slight_smile] {
   background-image: url(https://i.imgur.com/dG8tooW.png);
}
/* Love */
[data-reaction=heart_eyes] {
   background-image: url(https://i.imgur.com/ei1Br91.png)
}
/* Haha */
[data-reaction=laughing] {
   background-image: url(https://i.imgur.com/GRtZUgV.png)
}
/* Wow */
[data-reaction=astonished] {
   background-image: url(https://i.imgur.com/rm5OL2a.png)
}
/* Sad */
[data-reaction=sob] {
   background-image: url(https://i.imgur.com/HXPL7Zt.png)
}
/* Angry */
[data-reaction=rage] {
   background-image: url(https://i.imgur.com/D8gRgc3.png)
}
/*]]>*/</style>

He comentado las propiedades que sirven para cambiar los emojis de Sharethis por imágenes. Recomiendo que la imagen tenga una resolución de 50x50 píxeles para mejor rendimiento. No olvides guardar los cambios, si lo hiciste correctamente el resultado será el siguiente:



Conclusiones

Con un poco de estilos puedes hacer que las reacciones tengan un aspecto más agradable o relacionado a la temática de tu blog, lo cual puede ayudarte a conseguir más reacciones por parte de tus lectores.


Si este articulo te fue útil, no olvides compartirlo con tus amigos, siempre me ayuda mucho. Gracias por leer (^▽^)