Cara Memasang Tombol Reaction (Emoticon) Pembaca Blogger (Update Lazyload)

Jika kalian seorang pengguna sosial media yang aktif pasti tidak asing dengan emoticon yang dapat mengekspresikan perasaan kita secara, kita juga dapat menambahkan tombol raksi pada artikel blog loh.. mari ikuti cara menambahkan tombol emoticon reaksi di artikel blog.

Artikel yang baik ialah artikel yang dapat menarik minat atau reaksi dari pembacanya mungkin sebagian dari kalian sering melihat blogger dengan nama besar seperti arlina atau jalantikus yang menambahkan tombol emoticon reaksi di artikel blog nya, hal ini sangat dianjurkan untuk kalian para blogger guna meningkatkan pengunjung di blog kalian serta mempermudah interaksi dengan para pengunjung blog.

Keuntungan Menambahkan Tombol Reaction Emoticon

Beberapa keuntungan yang didapatkan dengan memasang tombol reaction emoticon pada Artikel Blog

1. Meningkatkan interaksi dengan pengunjung dengan adanya tombol emoticon reaksi, pengunjung tidak hanya membaca namun juga ada interaksi yang dilakukan.
2. Meminimalisir angka bounce rate atau presentase pengunjung yang meninggalkan blog dengan hanya melihat satu halaman saja bahkan tidak membaca artikel hingga akhir.
3. Meningkatkan kepercayaan pengunjung blog dengan artikel-artikel kita.
4. Tidak menggunakan CSS sehingga PageSpeed tidak akan menurun.

Untuk menambah keterlibatan pengunjung terhadap postingan di blog, Kalian dapat menambahkan emoji sebagai tombol reaksi perasaan atau pendapat pengunjung terhadap isi postingan blog. Apakah pengunjung/pembaca Kalian suka atau kurang suka dengan materi postingan Kalian. Jenis Emoji ini beragam ada emoji senang, sedih, kesal, histeris, bahkan marah.

Cara Memasang Tombol Reaction (Emoticon) Pembaca Blogger

Untuk memasang tombol reaksi pengunjung terhadap postingan blog, Kalian bisa mengikuti tutorial ini sampai selesai.

Mendaftar Akun Sharethis

Untuk mendapatkan widget yang akan Kalian pasang pada Blog, Kalian harus mendaftar ke website Sharethis

1. Buka halaman Sharethis.
2. Klik Menu Publisher Tools.
3. Klik ReactionsButtons
4. Klik tombol Get Reaction Buttons.
5. Pada jendela pop-up "We value your privacy" klik opsi I Accept.
6. Kemudian konfigurasi tampilan reactions buttons yang Kalian ingin tampilkan.
   
7. Setelah konfigurasi selesai, klik menu Register kemudian Get Code.
   
8. Simpan kode yang nantinya akan dipasang pada Blog.

Memasang Kode Sharethis Pada Blog

Selanjutnya memasang kode yang sebelumnya kalian dapatkan pada Blog.

PENTING!
Biasakan melakukan backup Tema Kalian sebelum melakukan peng-editan.

Pada Dashboard Blogger pilih Tema kemudian Backup. Jika sudah mari kita lanjutkan.

Langkah pemasangan Tombol Reaction (Emoticon) Pembaca Blogger :

Step 1 : Silakan masuk ke Dashboard Blogger Kalian. Kemudian klik Tema lalu Edit HTML

Step 2 : Berikutnya copy-paste script berikut ini sebelum kode </head>.

<script src='//platform-api.sharethis.com/js/sharethis.js#property=5b20281670570d001b5d2448&amp;product=inline-reaction-buttons'/>

Jika ingin menggunakan lazyload silahkan gunakan script berikut ini

Silahkan paste semua kode dibawah ini diatas tag penutup </body> atau </body>

<!--[ Lazyload sharethis by Kuymase.com ]-->
<script>/*<![CDATA[*/
var lazyReact = false; window.addEventListener('scroll', function(){if ((document.documentElement.scrollTop != 0 && lazyReact === false) || (document.body.scrollTop != 0 && lazyReact === false)) { (function() { var ad = document.createElement('script'); ad.setAttribute('type','text/javascript'); ad.async = true; ad.src = 'https://platform-api.sharethis.com/js/sharethis.js#property=5b20281670570d001b5d2448&product=inline-reaction-buttons'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })(); lazyReact = true; }}, true); 
/*]]>*/</script>

Silahkan ganti kode yang saya tandai dengan kode penayang Sharethis Kalian.

Kesalahan yang biasa terjadi
Jika Kalian copy-paste dari kode HTML yang diberikan di halaman Sharethis, setelah Kalian simpan tema biasanya Kalian akan dapat pesan kesalahan. Pada kode HTML Sharethis itu Kalian perlu tambahkan kode amp; seperti contoh kode HTML di atas. Selain itu, Kalian tidak perlu Parse kode HTML sharethis yang diberikan.

Step 3 : Copy-paste kode HTML berikut setelah <data:post.body/>

Jika ada lebih dari 1 kode, silahkan dicoba satu persatu

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

Untuk kode HTML Sharethis yang dimodifikasi, Kalian bisa coba kode HTML berikut.

<div class='share-message'>
    <span class='share-text'>Apa Reaksimu?</span>
</div>
<div class='sharethis-inline-reaction-buttons'>

Kalian bisa ganti tulisan "Apa Reaksimu?" sesuai keinginan Kalian.

Step 4 : Berikutnya paste kode CSS berikut sebelum kode ]]></b:skin>.

.share-message{text-align:center;margin:0;position:relative}
.share-message:before{z-index:1;content:"";width:100%;height:1px;background:#ccc;position:absolute;left:0;margin-top:10px}
.share-text{display:inline-block;margin:0;font-family:"Roboto Slab","Times New Roman",Times,serif;font-weight:700;color:#afafaf;text-transform:uppercase;font-size:14px;background:#fff;z-index:1;position:relative;padding:0 10px}

Step 5 : Jika sudah semua, jangan lupa Simpan atau Preview untuk melihat hasilnya.

---

Menyembunyikan Widget Tombol Reaction (Emoticon) dari HomePage

Jika widget reaction buttons juga muncul di homepage (beranda), silahkan tambahkan Tag Kondisional menjadi seperti ini.

<b:if cond='data:view.isPost'>

    <div class='share-message'>
        <p class='share-text'>Apa Reaksimu?</p>
    </div>
    <div class='sharethis-inline-reaction-buttons'/>

</b:if>

Nah itulah tutorial singkat Cara Memasang Tombol Reaction (Emoticon) Pembaca Blogger. Semoga bermanfaat dan jangan lupa pilih emoticon dibawah sesuai reaksi Kalian.