Breaking

Post Top Ad

Your Ad Spot

miércoles, 14 de agosto de 2019

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.

Desde hoy he comenzado a diseñar nuevos estilos para las reacciones de ShareThis y el dia de hoy les comparto las reacciones estilo facebook animadas. Espero que les guste.

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, posteriormente prosigue con el siguiente paso.

Insertar estilos

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

<style>/*<![CDATA[*/
/*!
 * Skin-facebook ShareThis v1.0.0
 * Copyright 2019 zkreations
 * Daniel Abel M. (fb.com/danieI.abel)
 */#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{opacity:0}[data-reaction]{background-size:80px;background-position:center}
#st-1 .st-btn>span.st-count{font-size:10px!important;padding:4px 7px;color:#757575;background:#fff;line-height:1!important;border-radius:5px;border:1px solid rgba(0,0,0,.2);font-weight:700!important;font-family:Roboto,sans-serif;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);display:inline-block!important;bottom:5px;right:10px;position:absolute}
[data-reaction=slight_smile]{background-image:url(https://2.bp.blogspot.com/-onGC5EoJiiA/XJKTPocrb2I/AAAAAAAAGts/y63SgWuebtspjWjp1eEJ1wcK5Qdn2jWqQCLcBGAs/s0/like.gif)}
[data-reaction=heart_eyes]{background-image:url(https://1.bp.blogspot.com/-XO9EQs48u9s/XJKUOu6C9RI/AAAAAAAAGt0/AvO-BZ_YOOoQs3i5iH2CZLbafyEBovOEwCLcBGAs/s0/love.gif)}
[data-reaction=laughing]{background-image:url(https://3.bp.blogspot.com/-ST606I2KJAM/XJKUoBbB8zI/AAAAAAAAGuA/1H5Nf6kjBowUGrt80KYf5FN-TaaA1ErSwCLcBGAs/s0/haha.gif)}
[data-reaction=astonished]{background-image:url(https://2.bp.blogspot.com/-fEsfdOAj6m4/XJKUodnOstI/AAAAAAAAGuM/7HkgAaOkelo68pfgJUeQUqgK5If23LvkQCLcBGAs/s0/wow.gif)}
[data-reaction=sob]{background-image:url(https://2.bp.blogspot.com/-SIHdTCHT0A4/XJKUoL1fNTI/AAAAAAAAGuE/MLaa-JvN_Bsfw0d2wTGAKnLpqgcy2i9sQCLcBGAs/s0/sad.gif)}
[data-reaction=rage]{background-image:url(https://1.bp.blogspot.com/-J03h_Wz-n0k/XJKUoDsQ9zI/AAAAAAAAGuI/vBmdOdp4YpoFw5yduAaYygUTbRJJqHACACLcBGAs/s0/angry.gif)}
/*]]>*/</style>

Guarda los cambios y listo, el skin se aplicará en tus reacciones, para comprobarlo ve a cualquier articulo y revisa tus reacciones. Si lo hiciste correctamente el resultado será el siguiente:

0
0
0
0
0
0


No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas