Cara Membuat Tombol Reaksi Emoticon Pada Bagian Bawah Artikel di Blog


Hallo sobat semuanya! Kembali lagi di Blog yang abal-abal ini yaitu DXTrip Blog. Bagaimana kabar sobat pada hari ini? Semoga sobat sehat-sehat terus ya!

Pada kesempatan kali ini saya akan membahas tentang tips untuk blogger yaitu dimana kita bisa memberikan pilihan reaksi kepada para pembaca atau pengunjung di blog kita. Tutorial ini saya dapat dari Arlina Design.

Saya sangat suka dengan adanya tombol reaksi ini, dan bisa membuat pengunjung atau pembaca menilai artikel yang sudah kita buat. Tentu ini juga adalah salah satu fitur yang bagus untuk blogger.

Untuk cara membuatnya teman-teman bisa lihat pada postingan di Arlina Design agar lebih jelasnya. Tetapi saya juga akan membahasnya di sini :

1. Silahkan sobat buka halaman Vicomi dan pilih Get Your Free Reaction.


2. Lalu pilih get code for HTML


3. Lalu isi data sobat


4. Kemudian simpan dulu codenya dan tabnya jangan dulu di tutup



Cara Memasang Tombol Reaksi Vicomi ke Blogger

Ketika kita sudah mendapatkan code yang sebelumnya didapatkan pada website vicomi, sekarang sobat simak di bawah ini untuk cara memasang tombol vicominya :
1. Masuk ke blogger.
2. Pilih menu Edit HTML.
3. Kemudian tambahkan kode yang di dapatkan pada vicomi sebelum </body>, contoh :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Tombol Reaksi Vicomi
!function(){var e=document.createElement("script");e.async=!0,e.src="https://assets-prod.vicomi.com/vicomi.js?token=1d852d9a6638475caf87db6cf9dd5255";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(e,c)}();
//]]>
</script>
</b:if>

4. Lalu tambahkan code di bawah ini pada kode <data:post.body/> yang paling bawah :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='kabarvicomi'>
<div class='kabarvicomi'>
<div data-access-token='1d852d9a6638475caf87db6cf9dd5255' data-display-type='4' id='vc-feelback-main'/>
</div>
</div>
</b:if>

5. Ganti nomor token sesuai dengan token sobat.
6. Kemudian tambahkan script css di bawah ini sebelum </style>.

#kabarvicomi{position:relative;margin:0 auto 20px auto;overflow:hidden}
.kabarvicomi{margin:-28px auto 0 auto}

 
6. Kemudian simpan tema.
7. Selesai.

No comments:

Post a Comment