√ Cara Mengganti Tombol Reaksi ShareThis dengan Animasi Emoji Facebook

Cara Mengganti Tombol Reaksi ShareThis dengan Animasi Emoji Facebook

4/26/2019

Halo sobat blogger! Kali ini Namina akan berbagi tentang Cara Mengganti Tombol Reaksi ShareThis dengan Animasi Emoji Facebook. Bagaimana caranya? Yuk, kita ikuti langkahnya di bawah ini.

Seperti yang kita tahu, ShareThis merupakan salah satu layanan pihak ke tiga yang bisa ditambahkan di platform Blogger. Secara garis besar, ShareThis berfungsi sebagai widget berbagi ke sosial media dengan kustomisasi yang cukup lengkap dan bisa juga Anda modifikasi sesuai kebutuhan. Salah satu fitur dari ShareThis ini yaitu fitur Reaction Buttons, fitur ini berfungsi untuk memberikan feedback dari pembaca dengan tombol reaksi berupa Emoji atau Emoticon.

Cara Mengganti Tombol Reaksi ShareThis dengan Animasi Emoji Facebook

Sebelum saya memberikan tips mengganti tombol reaksi, sebaiknya Anda membuat akun ShareThis terlebih dahulu di sini : Sign Up ShareThis. Setelah mendaftar, verifikasi alamat blog dengan menambahkan kode seperti ini sebelum kode </head> atau bisa juga sebelum </body> di Edit HTML halaman Blogger. Contohnya seperti ini :

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

Perhatikan kode ini 5c9c2853fbd80b0011b664f6, tambahkan kode & setelahnya. Contohnya seperti ini :

5c9c2853fbd80b0011b664f6&amp;

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 skip langkah di atas. Untuk langkah selanjutnya aktifkan Reaction Buttons di halaman user ShareThis seperti gambar di bawah ini :

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.

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

Jika sudah, klik tombol Simpan tema dan lihat hasilnya di blog Anda!