Cara Memasang Tombol Like Bentuk Hati di Blogger
 Dilihat  Kali
Jumat, 19 Juli 2019

Cara Memasang Tombol Like Bentuk Hati di Blogger

Tombol like yang saya bagikan ini tidak seperti tombol like pada umumnya yang menggunakan icon jempol tetapi tombol like ini menggunakan icon hati dan menggunakan Firebase yang nantinya akan menyimpan database dari tombol like ini. Untuk pemasangan tombol like ini cukup mudah karena hanya diperlukan 3 kode saja yaitu (CSS, HTML, dan JavaScript). Penasarasan bagaimana cara pemasangannya? kamu bisa ikuti langkah yang telah saya berikan ini.

Cara Pemasangan Tombol Like Pada Blogger

Penting! Sebelum mengikuti langkah ini ada baiknya kamu membackup template kamu terlebih dahulu untuk menghindari hal-hal yang tidak diinginkan. selanjutnya ikuti cara dibawah ini.
1. Login ke Dashboard Blogger > Tema > Edit HTML.
2. Langkah berikutnya carilah kode <data:post.body/> (Gunakan CTRL + F untuk memudahkan pencarian) karna kode tersebut lebih dari satu maka carilah yang menurut kamu kode tersebut adalah kode postingan, biasanya dibawah kode tersebut ada kode Share Social Media atau diatasnya ada kode Author dan Tanggal Postingan.
3. Copy kode HTML dibawah ini tepat dibawah kode <data:post.body/>.

<div class='lovebutton-bloggerku' expr:data-id='data:blog.blogId + &quot;_&quot; + data:post.id'>
  <div class='inner'>
    <a href='javascript:'>
      <div class='icon'>
        <svg height='35' viewBox='0 0 1792 1792' width='35' xmlns='http://www.w3.org/2000/svg'><path d='M896 1664q-26 0-44-18l-624-602q-10-8-27.5-26t-55.5-65.5-68-97.5-53.5-121-23.5-138q0-220 127-344t351-124q62 0 126.5 21.5t120 58 95.5 68.5 76 68q36-36 76-68t95.5-68.5 120-58 126.5-21.5q224 0 351 124t127 344q0 221-229 450l-623 600q-18 18-44 18z'/></svg>
      </div>
    </a>
    <div class='total'>Loading</div>
    <div style='clear:both'/>
  </div>
</div>

4. kemudian copy kode CSS dibawah ini tepat diatas kode </head>.

<style>
/* love button 1.0 by bloggerku.com */
.lovebutton-bloggerku{width:100%;display:inline-block;text-align:center;margin:20px 0}
.lovebutton-bloggerku .inner{text-align:center;display:inline-table}
.lovebutton-bloggerku a{background:#fff;border:1px solid #32CEFF;display:inline-block;border-radius:50%;width:60px;height:60px;cursor:pointer;float:left;overflow:hidden;margin-right:10px}
.lovebutton-bloggerku .icon{padding-top:10px}.lovebutton-bloggerku svg{fill:#32CEFF;transition:all 0.2s}
.lovebutton-bloggerku a:hover svg{fill:#3038A8}.lovebutton-bloggerku a .active svg{fill:#F42B30}
.lovebutton-bloggerku .total{line-height:50px;font-size:25px;display:inline}
</style>

5. Langkah terakhir copy kode JavaScript dibawah ini tepat diatas kode </body>.

<script async='async' src='https://script.bloggerku.com/like/1.0/script.min.js' type='text/javascript'/>

Selain kode JavaScript di atas kamu juga bisa menggunakan kode JavaScript dibawah ini, pilih salah satunya saja!.

<script async='async' type='text/javascript'/>!function(){Array.prototype.remove=function(){for(var e,t,i=arguments,o=i.length;o&&this.length;)for(e=i[--o];-1!==(t=this.indexOf(e));)this.splice(t,1);return this};var e=document.createElement("script");e.src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js",e.onload=function(){firebase.initializeApp({apiKey:"AIzaSyD_MvMvRLs8CqwZ2k4c-Seic5ZBr2D1Zw8",databaseURL:"https://bloggerku-com.firebaseio.com",projectId:"bloggerku-com"}),function(e){for(var t=document.getElementsByClassName("lovebutton-bloggerku"),i=0,o=t[i];i<t.length;i++){var a=o.getAttribute("data-id"),r=JSON.parse(localStorage.getItem("liked"))||[],c=0;e.ref("like/"+a+"/total").on("value",function(e){-1!==r.indexOf(a)&&o.querySelector(".icon").classList.add("active"),c=e.val()||0,o.querySelector(".total").innerText=c}),o.querySelector("a").addEventListener("click",function(){o.querySelector(".icon").classList.toggle("active"),o.querySelector(".icon").classList.contains("active")?(r.push(a),localStorage.setItem("liked",JSON.stringify(r)),c++):(r.remove(a),localStorage.setItem("liked",JSON.stringify(r)),c--),e.ref("like/"+a+"/total").set(c)})}}(firebase.database())},document.body.append(e)}();</script>

6. Simpan Template yang kamu rubah tadi.
7. Selesai.
Hilangkan kode async='async' pada kode JavaScript diatas jika kode tersebut tidak bekerja karna tidak semua template support dengan script async.
Sumber: bloggerku.com
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.