Cara Membuat Tombol Like Untuk Bloggger

loading...

Hy Perkenalkan Nama Saya Keanu Rivaldy, Kali ini Saya akan membagikan tutorial/script yang sangat keren, yaitu script like untuk blogger.

Script ini adalah script untuk membuat blog kita menjadi sangat keren, pengunjung bisa memberikan like pada artikel yang pengujung sukai, oke langsung saja kita lihat Demonya!.


DEMO

Cara Membuat Tombol Like Untuk Blogger 
1. Masuk ke akun Blogger anda
2. Edit HTML.
3. Simpan kode di bawah ini, tepat  di atas kode </b:skin>
.lovebutton-kodeken {
    width: 100%;
    display: inline-block;
    text-align: center;
    margin: 20px 0;
}

.lovebutton-kodeken .inner {
    text-align: center;
    display: inline-table;
}

.lovebutton-kodeken a {
    background: #fff;
    border: 1px solid #aaa;
    display: inline-block;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    float: left;
    overflow: hidden;
    margin-right: 10px;
}

.lovebutton-kodeken .icon {
    padding-top: 13px;
}

.lovebutton-kodeken svg {
    fill: #aaa;
    transition: all 0.2s;
}

.lovebutton-kodeken a:hover svg {
    fill: #666;
}

.lovebutton-kodeken a .active svg {
    fill: #F44336;
}

.lovebutton-kodeken .total {
    line-height: 50px;
    font-size: 20px;
    display: inline;
}

4. Lalu simpan kode ini tepat di bawah kode <data:post.body/> 
Ada banyak, cobain satu-satu, kalau bingung bisa komentar saja dibawah yah

<div class='lovebutton-kodeken' expr:data-id='data:blog.blogId + &quot;_&quot; + data:post.id'>

    <div class='inner'>

        <a href='javascript:;'>

            <div class='icon'>

                <svg height='25' viewBox='0 0 1792 1792' width='25' 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>

5. Cari kode </body>, Kemudian simpan  kode ini tepat sebelum kode </body> 


<script 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-kodeken"),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. Terakhir, Anda Save dan lihat hasilnya

Oke sudah berakhir artikel ini sekian terima kasih atas kunjungan kalian , kalau ada yang belum paham silahkan komentar saja dibawah yah. Sampai ketemu di Artikel selanjutnya.

Advertise

Safe Link Converter

Encrypting your link and protect the link from viruses, malware, thief, etc!
Made your link safe to visit.

How to use our tool:

  1. Click on How To Use menu above.
  2. Click on the code and CTRL + C on your keyboard.
  3. Paste the code in your HTML blog theme before the </body>.
  4. Save your HTML blog theme. you are done!
  5. Now, your blog's outbound links was encrypted!

Advertise


Linknya Sudah Siap Bos

Advertise