Cara Mengganti Reaksi ShareThis – Kali ini analisyuki.com akan membagikan tutorial cara mengganti animasi emoji sharethis dengan animasi emoticon facebook atau dengan menggunakan ikon sendiri untuk tombol reaksi ini.
Seperti yang saya sudah pernah jelaskan sebelumnya bahwa sharethis merupakan platform yang banyak digunakan oleh para blogger karena tampilannya yang responsive dan bisa diatur sesuai keinginan, misalnya untuk membuat tombol share dan emotion reaction.
Membahas tentang fitur Reaction Share Button, sebenarnya emoticon dari tombol tanggapan reaksi tersebut bisa kita ubah sesuai dengan keinginan kita. Misalnya menggantinya dengan reaksi faceook atau ataupun emoticon buatan sendiri.
Jika kalian belum memasang tombol reaksi sharethis di dalam postingan blog, sebaiknya kalian membaca terlebih dahulu link dibawah ini, karena saya tidak akan membahas cara memasang tombol emoticon reaction di sini.
Cara Menggan Reaksi ShareThis Dengan Reaksi Facebook atau Icon Sendiri
1. Buka Blog kalian, pilih Tema, kemudian pilih Edit HTML
2. Kemudian letakkan kode dibawah ini, diatas kode </style> atau ]]></b:skin>
Catatan: Jika tampilan tidak berubah jika dimasukkan di atas kode </style> maka coba masukkan di atas kode ]]></b:skin>. Perlu di ketahui lagi saya memberikan 2 tipe tampilan karena ada beberapa template yang tidak cocok atau bahkan terdapat double icon.
Versi 1
/* ShareThis V1 */
#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:#222;background:#e7e3e4;line-height:1!important;border-radius:5px;font-weight:bold!important;display:inline-block!important;bottom:5px;left:10px;position:absolute}
svg{opacity:0}[data-reaction=slight_smile]{background-image:url(https://1.bp.blogspot.com/-NkUl9-c-gmk/XYwQ_WfGAlI/AAAAAAAABzQ/YvCBBbR_XVA4tjQuE4FJSm1gGpxxn5qsgCLcBGAsYHQ/s1600/suka.gif)}
[data-reaction=heart_eyes]{background-image:url(https://1.bp.blogspot.com/-cV8vdIht03c/XYwQ-pZnaRI/AAAAAAAABzI/SGZ39eUaBjswA_HU6GteFF9dN4tzoDIEQCLcBGAsYHQ/s1600/cinta.gif)}
[data-reaction=laughing]{background-image:url(https://1.bp.blogspot.com/-76XQfzRGoeo/XYwQ_vbxzvI/AAAAAAAABzU/rpS7DNKUvu8y2uYlWsazB06rWydhi3YqwCLcBGAsYHQ/s1600/wkwk.gif)}
[data-reaction=astonished]{background-image:url(https://1.bp.blogspot.com/-YC84BUR73zU/XYwQ_wnpVJI/AAAAAAAABzY/VwMonkF7DwgttGjESSaXH35Q3OJB0_h3wCLcBGAsYHQ/s1600/wow.gif)}
[data-reaction=sob]{background-image:url(https://1.bp.blogspot.com/-anFsq5gSeII/XYwQ-T7GvyI/AAAAAAAABzE/PNhXJKSHIrgF9zv6eGDKjirzbqzFhND6wCLcBGAsYHQ/s1600/sedih.gif)}
[data-reaction=rage]{background-image:url(https://1.bp.blogspot.com/-XXwv91OHiuc/XYwQ-hOI1NI/AAAAAAAABzM/aAyDVZRl02Y-7SK4f_5M6735TBapt4QvQCLcBGAsYHQ/s1600/marah.gif)}Versi 2
/* ShareThis V2 */
#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:69px;background-position:center}
#st-1 .st-btn > span.st-count{font-size:10px!important;padding:4px 7px;color:#222;background:#e7e3e4;line-height:1!important;border-radius:5px;font-weight:bold!important;display:inline-block!important;bottom:5px;left:10px;position:absolute}
svg{opacity:0}[data-reaction=slight_smile]{background-image:url(https://1.bp.blogspot.com/-NkUl9-c-gmk/XYwQ_WfGAlI/AAAAAAAABzQ/YvCBBbR_XVA4tjQuE4FJSm1gGpxxn5qsgCLcBGAsYHQ/s1600/suka.gif)}
[data-reaction=heart_eyes]{background-image:url(https://1.bp.blogspot.com/-cV8vdIht03c/XYwQ-pZnaRI/AAAAAAAABzI/SGZ39eUaBjswA_HU6GteFF9dN4tzoDIEQCLcBGAsYHQ/s1600/cinta.gif)}
[data-reaction=laughing]{background-image:url(https://1.bp.blogspot.com/-76XQfzRGoeo/XYwQ_vbxzvI/AAAAAAAABzU/rpS7DNKUvu8y2uYlWsazB06rWydhi3YqwCLcBGAsYHQ/s1600/wkwk.gif)}
[data-reaction=astonished]{background-image:url(https://1.bp.blogspot.com/-YC84BUR73zU/XYwQ_wnpVJI/AAAAAAAABzY/VwMonkF7DwgttGjESSaXH35Q3OJB0_h3wCLcBGAsYHQ/s1600/wow.gif)}
[data-reaction=sob]{background-image:url(https://1.bp.blogspot.com/-anFsq5gSeII/XYwQ-T7GvyI/AAAAAAAABzE/PNhXJKSHIrgF9zv6eGDKjirzbqzFhND6wCLcBGAsYHQ/s1600/sedih.gif)}
[data-reaction=rage]{background-image:url(https://1.bp.blogspot.com/-XXwv91OHiuc/XYwQ-hOI1NI/AAAAAAAABzM/aAyDVZRl02Y-7SK4f_5M6735TBapt4QvQCLcBGAsYHQ/s1600/marah.gif)}Versi 3
/* ShareThis V3 */
#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:#222;background:#e7e3e4;line-height:1!important;border-radius:5px;font-weight:bold!important;display:inline-block!important;bottom:5px;left:10px;position:absolute}
svg{opacity:0}[data-reaction=slight_smile]{background-image:url(https://1.bp.blogspot.com/-W2GCnDJ2kAw/XY4AENLsI-I/AAAAAAAAAAg/ab4A_pdV_w02nKPWD9cKXyKztsWjk8LJwCLcBGAsYHQ/s1600/1.png)}
[data-reaction=heart_eyes]{background-image:url(https://1.bp.blogspot.com/-EpaintfowlE/XY4ADwY-4cI/AAAAAAAAAAY/HPXLIYPg7ioM7EqJLjUpyRolv2wsrLk5QCLcBGAsYHQ/s1600/2.png)}
[data-reaction=laughing]{background-image:url(https://1.bp.blogspot.com/-2kfbA6wXRKk/XY4AED4tCSI/AAAAAAAAAAc/OquxwxvanXMiCpy_UzLTZ6GHGOrwBF60ACLcBGAsYHQ/s1600/3.png)}
[data-reaction=astonished]{background-image:url(https://1.bp.blogspot.com/-wEVdx06TIQs/XY4AEtE2xRI/AAAAAAAAAAk/JJV9oMoeXlUOc2WCwd2DZ1NxyCRu397PACLcBGAsYHQ/s1600/4.png)}
[data-reaction=sob]{background-image:url(https://1.bp.blogspot.com/-y6qC2ydNu2A/XY4AFLeSwvI/AAAAAAAAAAo/PpTpVqhIs2ITX_kgejXjyRof853lpUf4wCLcBGAsYHQ/s1600/5.png)}
[data-reaction=rage]{background-image:url(https://1.bp.blogspot.com/-rDQmAGxD9Rs/XY4AFG-cpPI/AAAAAAAAAAs/r0FTNYEUWPA4lP4Lf-Iv3dCu9Wl5Or9CACLcBGAsYHQ/s1600/6.png)}Versi 4
/* ShareThis V4 */
#st-1 .st-btn > svg{opacity:0}[data-reaction]{background-size:69px;background-position:center}
#st-1 .st-btn > span.st-count{font-size:10px!important;padding:4px 7px;color:#222;background:#e7e3e4;line-height:1!important;border-radius:5px;font-weight:bold!important;display:inline-block!important;bottom:5px;left:10px;position:absolute}
svg{opacity:0}[data-reaction=slight_smile]{background-image:url(https://1.bp.blogspot.com/-W2GCnDJ2kAw/XY4AENLsI-I/AAAAAAAAAAg/ab4A_pdV_w02nKPWD9cKXyKztsWjk8LJwCLcBGAsYHQ/s1600/1.png)}
[data-reaction=heart_eyes]{background-image:url(https://1.bp.blogspot.com/-EpaintfowlE/XY4ADwY-4cI/AAAAAAAAAAY/HPXLIYPg7ioM7EqJLjUpyRolv2wsrLk5QCLcBGAsYHQ/s1600/2.png)}
[data-reaction=laughing]{background-image:url(https://1.bp.blogspot.com/-2kfbA6wXRKk/XY4AED4tCSI/AAAAAAAAAAc/OquxwxvanXMiCpy_UzLTZ6GHGOrwBF60ACLcBGAsYHQ/s1600/3.png)}
[data-reaction=astonished]{background-image:url(https://1.bp.blogspot.com/-wEVdx06TIQs/XY4AEtE2xRI/AAAAAAAAAAk/JJV9oMoeXlUOc2WCwd2DZ1NxyCRu397PACLcBGAsYHQ/s1600/4.png)}
[data-reaction=sob]{background-image:url(https://1.bp.blogspot.com/-y6qC2ydNu2A/XY4AFLeSwvI/AAAAAAAAAAo/PpTpVqhIs2ITX_kgejXjyRof853lpUf4wCLcBGAsYHQ/s1600/5.png)}
[data-reaction=rage]{background-image:url(https://1.bp.blogspot.com/-rDQmAGxD9Rs/XY4AFG-cpPI/AAAAAAAAAAs/r0FTNYEUWPA4lP4Lf-Iv3dCu9Wl5Or9CACLcBGAsYHQ/s1600/6.png)}Saya membagikan 4 versi yang dapat kalian gunakan, saya sengaja membaginya dalam 2 tipe karena ada beberapa template yang tidak cocok dengan tampilan reaksi yang telah di modifikasi tersebut. Semoga tutorial ini dapat bermanfaat terimakasih.
