Cara Memasang Tombol Reaksi ShareThis dengan Animasi Emoji Facebook
Membuat Tombol Reaksi ShareThis dengan Animasi Emoji Facebook - Belakangan ini, mungkin kalian pernah melihat tombol reaksi dibagian bawah postingan blog. Reaction Buttons ini, memungkinkan pengunjung untuk memberikan feedback akan artikel yang mereka baca diblog kita.
Bagi kalian yang juga ingin memasangnya diblog, pada kesempatan kali ini, saya akan memberikan tips 'Cara Memasang Tombol Reaksi ShareThis dengan Animasi Emoji Facebook' dibawah postingan blog.
Seperti yang kita tahu, ShareThis adalah salah satu layanan pihak ketiga yang bisa ditambahkan diplatform blogger. ShareThis ini sebenarnya berfungsi sebagai widget berbagi ke sosial media yang memiliki tampilan yang sangat menarik, selain itu juga kita bisa memodifikasi tampilannya sesuai kebutuhan kita.
Sebelum kita membuat Reaction Buttons ini, bagi kamu yang penasaran bagaimana tampilannya, kamu bisa melihat dibagian bawah potingan ini. Karena saya juga menggunakan Reaction Buttons ini diblog saya ini.
Baiklah langsung saja, untuk memasang Reaction Buttons kamu bisa ikuti langkah-langkah dibawah ini.
Membuat Tombol Reaksi ShareThis dengan Animasi Emoji Facebook
Hal pertama yang harus kamu lakukan untuk membuat Reaction Buttons, yaitu membuat akun ShareThis terlebih dahulu. Untuk melakukan pendaftaran, kamu bisa ikuti link ini; Sign up ShareThis.
Setelah mendaftar, jangan lupa untuk melakukan verifikasi alamat blog dengan menambahkan kode seperti berikut ini dibawah kode <head> didalam tema blog kamu.
Contonya seperti ini:
<script async='async' src='https://platform-api.sharethis.com/js/sharethis.js#property=5feeaa8a16f5060012ad189a&' type='text/javascript'/>Ganti kode 5feeaa8a16f5060012ad189a dengan Property ID ShareThis kamu.
Setelah itu, jangan lupa untuk menyimpan tema blog kamu. Kemudian kembali ke dashboard ShareThis, lalu klik tombol Verfifikasi akun.
Untuk langkah selanjutnya, aktifkan Reaction Buttons dihalaman dashboard ShareThis kamu.
Saya sarankan, jangan mengubah tampilan Reaction Buttons. Hal ini bertujuan untuk memudahkan kita untuk memodifiksi tampilan emoji facebook nantinya.
Langkah selanjutnya, tambahkan kode Reaction Buttons yang disediakan kedalam tema blog kamu setelah kode <data:post.body/> paling bawah atau yang dibungkus dengan tag kondisional halaman postingan menjadi seperti berikut.
<b:if cond='data:blog.pageType == "item"'>
<div class='sharethis-inline-reaction-buttons'/>
<div class='clear'/>
</b:if>Kemudian simpan tema.
Mengubah Tampilan ke Animasi Emoji Facebook
Sebenarnya dengan mengikuti langkah diatas saja, kamu sudah memasang tombol Reaction Buttons di postingan blog kamu. Tapi, masih menggunakan emoji asli dari ShareThis dan tidak bergerak.
Nah bagi kamu yang ingin mengubah tampilan emoji tersebut ke emoji facebook, kamu bisa menambahkan kode dibawah ini sebelum kode </head> didalam tema blog kamu.
<style type='text/css'>
/* ShareThis Custom Reaction */
#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:#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/AVvXsEgLIY-MM2bZ9B5N4L2XVUwLCjfj4UCmQ4Grbx1N1EWMfWqARs1uD3L3V2Tx3Vj5n-LKUe9YEPXBxBD1tpFNOhf_x6nsdYFpvvIbpcWPiQuRwoSD5h6JD01e21xqFw_EWtTZ1NPN7y_8cMwL/s1600/like.gif)}
[data-reaction=heart_eyes]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDWR860pk3goJpF7IT0vvCNP7IlvVU3fBKOvxORNplFe5QT04COgACOlZe8W1iuwRYJxti6MUKSQkuzLbM1X5qywaRjaxg0Y0Y11TkQaPb9S1wfGKdihmWpMupUpCpbVDvJtVNkXDCV-nU/s1600/love.gif)}
[data-reaction=laughing]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJvfjoib_J5vjmm2GnDUdswqXYIhUyCpOahhuR70myyQ5SVwysDlFyxaaiLgF-f6cOyw-NyyuvCHyAIT9c9mQu2rKvT2M1WPVz62MnsEBSStmpDG0t37pxLeBdfPJcH01EWOUTuXipswaI/s1600/haha.gif)}
[data-reaction=astonished]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTOkfWH1ZbqjgXGGnbn9DNKC_8f1a7KT-jc2Rtko8Hz-Gy9Pnm9Bv2lJFE7Vy3ZkG8FB34gNNCHkk3m9uXWTRyEpZITKIexlldPrwpHO29i-IX8w_zZ-_S16kHRKoG9bp12Ik3N2FJ/s1600/wow.gif)}
[data-reaction=sob]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEt700Is3QRmvazNPbVffNz3-0XMbELMv_7t1y-6E3rTox_C_od-fCW1e_YqGnxdor2tiONdSdWgzllxZ3l70gO_G2ol5qFC3jos_eRVKC1hvkoWK2OJhFrlJ8zxYh9kUirYqTMtBJc0M5/s1600/sad.gif)}
[data-reaction=rage]{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsii4pv3SbbUzBOzfqH7A0y1Q59gM9vFCMw4pWHeK7INy0QxV0O7D2BCm33Wt4Zq8ZTIzeL-T9WN6JlDCA3p7VuTNVKeg8bmQvZ4lEQsn5vJK8ANVqN267ZqIzy93QcSrJwN4U538JkmFv/s1600/angry.gif)}
</style>Jika sudah, simpan tema dan lihat perubahanya.
Bagaimana, mudah dan menarikan hasilnya? Baiklah, saya rasa itu saja yang bisa saya bagikan pada kesempatan kali ini. Semoga artikel tentang 'Cara Memasang Tombol Reaksi ShareThis dengan Animasi Emoji Facebook' bisa bermanfaat untuk kalin semua. Sampai jumpa.
Posting Komentar untuk "Cara Memasang Tombol Reaksi ShareThis dengan Animasi Emoji Facebook"