Cara Menciptakan Tombol Reaksi Blogger Dengan Sharethis

Diposting pada 7 views
Cara Membuat Tombol Reaksi Blogger Dengan ShareThis – Tombol reaksi merupakan widget / fitur halaman web yang dipakai untuk mendapatkan Feedback / umpan balik dari visitor web. Dengan fitur ini “Tombol Reaksi” visitor sanggup menawarkan respon atau jawaban atau reaksi mereka terhadap konten yang sedang mereka kunjungi. Secara fisik (tampilan) tombol reaksi mempunyai banyak jenis mulai dari emoji / emoticoncheckbox dan lain sebagainya namun secara fungsi tombol reaksi ialah sama yaitu untuk mendapat feedback dari pengunjung.

Cara Membuat Tombol Reaksi Blogger Dengan ShareThis Cara Membuat Tombol Reaksi Blogger Dengan ShareThis
Cara Membuat Tombol Reaksi Blogger Dengan ShareThis

Pada tutorial ini saya akan membagikan cara menciptakan fitur feedback berupa tombol reaksi dengan style emoji atau emoticon, Dan plugin yang akan kita gunakan ialah plugin dari ShareThis (sharethis.com) alasannya ialah penerapan-nya sangat mudah, terlepas dari itu ShareThis mempunyai paket komplit yang menyediakan widget share buttons, follow buttons, reaction buttons (tombol reaksi) content service hingga GDPR (General Data Protection Regulation).

Kaprikornus sangat efesien sekali jikalau kita memakai plugin ShareThis untuk menambah fitur-fitur website menyerupai tombol reaksi dan tombol share alasannya ialah satu bundle javascript external sanggup dipakai untuk menginstall semua fitur (tombol reaksi, tombol share, tombol follow sosial media, konten service dan gdpr), [Lihat Demo]

Membuat Tombol Reaksi ShareThis

  1. Buat akun sharethis terlebih dahulu [Daftar Disini]
  2. Verifikasi alamat / url situs dengan cara memasang bundle javascript yang disediakan platform sharethis diatas tag </body> html situs (template blog) kemudian klik “ok” atau verifikasi.
  3. Selanjutnya pilih sajian “Reaction Buttons” klik “on” untuk mengaktifkan tombol reaksi copy code html tombol reaksi dan pasang kedalam html situs web / blogger anda.

Catatan: Jika bundle javascript plugin sharethis tidak sanggup dipasang kedalam html / template blog anda, harap modifikasi sedikit format javascript-nya atau copy javascript dibawah ini dan ganti dengan id property sharethis anda.

<b:if cond=’data:blog.pageType != &quot;index&quot;’>
<b:if cond=’data:blog.pageType != &quot;archive&quot;’>
<b:if cond=’data:blog.pageType != &quot;error_page&quot;’>
<script async=’async’ src=’//platform-api.sharethis.com/js/sharethis.js#property=5ba53d771b076c0011d54122&amp;product=inline-share-buttons’ type=’text/javascript’/>
</b:if>
</b:if>
</b:if>

Simpan arahan javascript plugin sharethis sempurna diatas arahan epilog tag </body> pada html template blog anda.

Cara Membuat Tombol Reaksi Blogger Dengan ShareThis Cara Membuat Tombol Reaksi Blogger Dengan ShareThis
Kode verifikasi sharethis account

Selanjutnya menempatkan/ memasang arahan html tombol reaksi ke dalam template blog

<div class=’sharethis-inline-reaction-buttons’/>

Dimana posisi arahan html tombol reaksi harus di tempatkan? Penempatan arahan html tombol reaksi “<div class=’sharethis-inline-reaction-buttons’/>” yang paling gampang ialah dibawah kode <data:post.body/>, sama menyerupai cara memasang iklan adsense dibawah artikel. Jika template blog mempunyai 3 hingga 4 kode <data:post.body/> maka tempatkan arahan tombol reaksi dibawah kode <data:post.body/> yang ke 3 atau ke 2 atau cobalah satu persatu. Pertinjau dan refresh blog sesudah menempatkan kode.

Jika kurang puas dengan metode pemasangan tombol reaksi menyerupai diatas mari kita simak metode pemasangan arahan html tombol reaksi berikut ini;

Memasang Kode Tombol Reaksi ShareThis

Pastikan arahan javascript plugins sharethis sudah di pasang diatas tag </body>, selanjut-nya copy arahan html tombol reaksi berikut ini dan letakkan dibawah kode </article> atau dibawah kode <div class=’post-footer’>.

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<b:if cond=’data:top.showReactions’>
<div class=’stlbreaction-buttons’>
<div class=’sharethis-inline-reaction-buttons’/>
</div>
</b:if>
</b:if>

Catatan: Jika pada template blog terdapat dua (2) kode <div class=’post-footer’> maka pasang arahan tombol reaksi menyerupai diatas sempurna di posisi bawah kode <div class=’post-footer’> yang ke 2, save template untuk mengakhiri pemasangan arahan tombol reaksi.

Untuk menampilkan tombol reaksi-nya silahkan pergi ke Tata Letak blogger > Blog klik Edit dan centang checkbox “Tampilkan Reaksi” menyerupai pada pola gambar dibawah ini.

Cara Membuat Tombol Reaksi Blogger Dengan ShareThis Cara Membuat Tombol Reaksi Blogger Dengan ShareThis
Menampilkan Tombol Reaksi Blogger

Selesai…! Tombol reaksi via sharethis telah berhasil di buat dan di install kedalam html template blogger, mungkin kau ingin sedikit sentuhan css bordir biar tombol reaksi semakin menarik, tambahkan css ini diatas kode ]]></b:skin> jikalau diperlukan.

.stlbreaction-buttons{margin-top:10px;border:1px solid #e0e0e0;}

Demikan saja dari saya “Cara menciptakan tombol reaksi blogger dengan Plugin ShareThis” Jika tidak suka dengan tombol reaksi ini tidak perlu dihapus, cukup hilangkan centang reaksi melalui tata letak blog anda, Semoga artikel ini bermanfaat dan menambah ilmu bagi kita semua, Jangan lupa subscribe blog ini dan hingga jumpa kembali.