Cara Memasang Tombol Animasi Emoji Facebook di Blog

Pada tutorial terdahulu sudah saya bagikan tentang Cara memasang tombol reaksi sharethis di blogger dan pada postingan kali ini akan saya bagikan lanjutan dari postingan tersebut.

Kenapa saya mengatakan lanjutan? Karena pada tutorial kali ini kita akan memodifikasi tampilan tombol reaksi sharethis yang sudah kita buat berubah menjadi tombol reaksi dengan efek animasi layaknya tombol reaksi yang kita jumpai di facebook.

Seperti yang sudah kita ketahui, bahwa ShareThis merupakan salah satu layanan pihak ke-tiga yang bisa dipasang di Blogger. Secara umum, ShareThis berfungsi sebagai widget berbagi ke sosial media yang dapat Sobat modifikasi sesuai kebutuhan. Salah satu fitur dari ShareThis ini yaitu fitur Reaction Buttons, fitur ini berfungsi untuk memberikan feedback sebuah artikel dari pembaca dengan tombol reaksi berbentuk Emoji.

Cara Modifikasi Tombol Reaksi ShareThis dengan Animasi Emoji Facebook

Sebelum saya memberikan tips mengganti tombol reaksi, sebaiknya sobat 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&

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 :

Baca Juga : Cara Memasang Tombol Reaksi Sharethis di Blog

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYENUpbxWvPgo4yM4JZDJIJTrZlX9QledC50s39UOqQ7fn21hiutjVqBs4BLXci4cubnAl9cO6QcMMMYbYSfyVmN04j1SuWbmm0XvJzZoL0fOZzqvw4JhEb4_5GYprBHDcbIfOF2XSk5Ic/s1600/like.gif)}

[data-reaction=heart_eyes]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdh9kTdD1PDhmJawt5HTonirZAKHu6iVsMaiLUOOzMB-OlCdS7k1xUPEvB0EHockMZvlMkn6_OCLZE_fbAsHc_XVTkIl9fiFYgiPUdI1BU3_90KM8OfeYkkRnOi4P-MtzKj27KfiVi4kNG/s1600/love.gif)}

[data-reaction=laughing]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcatTlGbShZSRx3NwAflE-D-ZEtxdPCG4zm7x2RaQH4vQNSceeRMcy2ox-BaHGPET0un2saa2T0NUiauOMZpO23d_aylgupd7DPwUzNuyfuC_e-VHjZNc8ut2J7HTpyoQ-L_DHjt9Gxm-r/s1600/haha.gif)}

[data-reaction=astonished]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiLhdwU4VFuZ-FPwpJNsSMhk9-q5wcHte9fHlFa65Cxh__imSgdnFx4etgrhY4w0p_Dx4bcesTyl66VV_oWU1sk-6eNZS_LupPeOpo8t-TcSF8jwnX_VVYfXPZO6geOfKP5hgLGTU_/s1600/wow.gif)}

[data-reaction=sob]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidThqaJawbymoacYufVQIRUymyYXTvXXek1BGy-jJhRmABu8pgf4WXOIpruVg6gJQwE5fBm42VaEHy2L8JenY5SxHJdHUgsDQcV3P5fuFoCi98hUC21ljkbb9KqThKuGNdpkrWswR80bge/s1600/sad.gif)}

[data-reaction=rage]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYhsUpI2HfDfv8NT3GFKiF7pauosJivbpTQ59J53xn8Jyt_jLTanH5fEcSA6N-xBAi0fDLu9HiG351xTwD6jGZzcKVCXTcBxKiY9DDiB_J4AwGS3gGFRXHrzaILrbACFpTE_eyfqoC9ARd/s1600/angry.gif)}

/*]]>*/

</style>

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

Oke, sekian dari Namina untuk Cara Mengganti Tombol Reaksi ShareThis dengan Animasi Emoji Facebook. Semoga bermanfaat.