Cara Mengganti Reaksi ShareThis dengan Animasi Emoji Facebook

Mau tahu bagaimana Cara Mengganti Tombol Reaksi ShareThis dengan Animasi Emoji Facebook? Yuk simak tutorial nya!
Cara Mengganti Tombol Reaksi ShareThis dengan Animasi Emoji Facebook
Cara Mengganti Reaksi ShareThis dengan Animasi Emoji Facebook 

AdityaTekno.com - Cara Mengganti Tombol Reaksi ShareThis dengan Animasi Emoji Facebook. Sudah kita ketahui, bahwa ShareThis adalah platform yang banyak digunakan oleh para blogger karena tampilannya yang responsive dan bisa diatur sesuai keinginan. Misalnya untuk membuat tombol share ke sosial media dan emotion reaction (reaction buttons).

Fitur Reaction Share Button sebetulnya emoticon dari tombol tanggapan reaksi dan reaksi sharethis tersebut bisa kita ubah sesuai dengan keinginan kita. Misalnya menggantinya dengan reaksi facebook ataupun emoticon buatan sendiri.

Cara Mengganti Tombol Reaksi ShareThis dengan Animasi Emoji Facebook

Sebelum saya memberikan tutorial cara mengganti tombol reaksi, alangkah baiknya anda membuat akun ShareThis terlebih dahulu. Setelah mendaftar, verifikasi alamat blog dengan menambahkan kode seperti ini sebelum kode </head> atau bisa juga sebelum </body> pada Edit HTML halaman Blogger.

Contohnya seperti ini:

<script async='async' src='//platform-api.sharethis.com/js/sharethis.js#property=8c6c2853fbd80b0011b664f6&amp;product=sop' type='text/javascript'/>

Perhatikan juga kode ini 8c6c2853fbd80b0011b664f6, tambahkan kode &amp; setelahnya. 

Contohnya penerapannya seperti ini :

8c6c2853fbd80b0011b664f6&amp;

Catatan: Penambahan kode &amp; diakhir kode 8c6c2853fbd80b0011b664f6 agar nantinya setelah klik tombol Simpan tema tidak terdapat peringatan error.

Setelah itu klik tombol Simpan Tema dan klik tombol Verifikasi di halaman user situs ShareThis.

Jika sebelumnya sudah membuat akun di ShareThis, cukup lewati langkah di atas. Untuk langkah selanjutnya aktifkan Reaction Buttons di halaman user ShareThis.

Kemudian tambahkan kode Reaction Buttons yang disediakan dan salin ke Edit HTML Blogger setelah kode <data:post.body/> paling bawah atau yang dibungkus dengan tag kondisional halaman postingan.

Contohnya seperti ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sharethis-inline-reaction-buttons'/>
<div class='clear'/>
</b:if>

Jadi hasilnya seperti ini :

<data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sharethis-inline-reaction-buttons'/>
<div class='clear'/>
</b:if>

Nah, sekarang untuk mengganti tombol reaksi bawaan ShareThis dengan Animasi Emoji Facebook, maka tambahkan kode di bawah ini sebelum kode </head>.

<style type='text/css'>
/*<![CDATA[*/
/* ShareThis Custom Reaction */
#st-1 .st-btn .st-text{display:none!important}
#st-1 .st-btn:hover &gt; span.st-count{display:inline-block!important}
#st-1 .st-btn &gt; svg{opacity:0}[data-reaction]{background-size:80px;background-position:center}
#st-1 .st-btn &gt; span.st-count{font-size:10px!important;padding:4px 7px;color:#222;background:#f0f0f0;line-height:1!important;border-radius:5px;font-weight:bold!important;display:inline-block!important;bottom:5px;right:10px;position:absolute}
[data-reaction=slight_smile]{background-image:url(https://3.bp.blogspot.com/-hNfE5e1Qo3c/XMLiPrFuOFI/AAAAAAAAOm8/pl6tOHh_y2AmumaMK6dQOQ36fP6BjC7_QCLcBGAs/s1600/like.gif)}
[data-reaction=heart_eyes]{background-image:url(https://1.bp.blogspot.com/-HgD0g2IiNLk/XMLiQOHSAxI/AAAAAAAAOnI/tC61Ug_I9zIpIeCVBrcg8QtoGQH7cOoNACLcBGAs/s1600/love.gif)}
[data-reaction=laughing]{background-image:url(https://1.bp.blogspot.com/-liSaUgXsZXo/XMLiP-Z3NkI/AAAAAAAAOnA/idWXMbOdLMIzaz7P_lYvH25NSu6UrPkuQCLcBGAs/s1600/haha.gif)}
[data-reaction=astonished]{background-image:url(https://2.bp.blogspot.com/-fEsfdOAj6m4/XJKUodnOstI/AAAAAAAAGuM/7HkgAaOkelo68pfgJUeQUqgK5If23LvkQCLcBGAs/s1600/wow.gif)}
[data-reaction=sob]{background-image:url(https://2.bp.blogspot.com/-8UjP6O6ZBus/XMLiQgaU5BI/AAAAAAAAOnM/mc0GAQW4kZg4BjtdiHFpBStGzMB6LYW6wCLcBGAs/s1600/sad.gif)}
[data-reaction=rage]{background-image:url(https://2.bp.blogspot.com/-aCtZlJ68tps/XMLiP-pNq7I/AAAAAAAAOnE/UTFuQzM58k4SnUvFGBXbh5bTnZsQYTvGACLcBGAs/s1600/angry.gif)}
/*]]>*/
</style>

Klik tombol Simpan Tema dan lihat hasilnya di blog anda.

Baca Juga : Cara Mudah Memperbaiki Background Putih pada Icon Sharethis

Demikian tutorial Cara Mengganti Reaksi ShareThis dengan Animasi Emoji Facebook. Semoga bermanfaat dan sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com