√ Cara Mengganti Reaksi ShareThis dengan Animasi Emoji Facebook - AdityaTekno

Social Items

Cara Mengganti Tombol 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).

Berbicara tentang fitur Reaction Share Button, sebetulnya emoticon dari tombol tanggapan reaksi 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 tips 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> di 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 kode ini 8c6c2853fbd80b0011b664f6, tambahkan kode &amp; setelahnya. Contohnya seperti ini :
8c6c2853fbd80b0011b664f6&amp;

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

Klik tombol Simpan Tema dan lihat hasilnya di blog anda.

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

Cara Mengganti Reaksi ShareThis dengan Animasi Emoji Facebook

Cara Mengganti Tombol 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).

Berbicara tentang fitur Reaction Share Button, sebetulnya emoticon dari tombol tanggapan reaksi 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 tips 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> di 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 kode ini 8c6c2853fbd80b0011b664f6, tambahkan kode &amp; setelahnya. Contohnya seperti ini :
8c6c2853fbd80b0011b664f6&amp;

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

Klik tombol Simpan Tema dan lihat hasilnya di blog anda.

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

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo