Cara Membuat Tombol Like Untuk Bloggger


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.

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Hard Reset Oppo A57 Lupa Pola Tanpa Pc (Recovery)

Gambar
www.Carabayu.com - Salah satu solusi  kiat   mengatasi ganguan  aplikasi   di Oppo A57  merupakan dengan  kiat  hard reset. Kerusakan pada smartphone  barangkali   saja terjadi baik   itu   gangguan aplikasi   maupun   kehancuran   pada hardware. Semua itu   bisa  saja terjadi   karena   kesalahan  pemakai ataupun memang   ketika   beli  sudah   tidak beres Oppo A57  Apabila kerusakan  hanya   pada sistem software  bisa   saja   diatas i  dengan hard reset,   namun   lihat dulu kerusakannya,   sudah   parah atau belum. Nah   apabila   kerusakan   sudah   parah maka sangat dianjurkan  untuk   mengerjakan   flashing lewat PC   a gar   hp normal kembali. Hard Reset Hp Oppo A57 Sebelum mengerjakan flashing sangat dianjurkan untuk memakai hard reset terlebih dahulu karenapada dasa...
Baca selengkapnya

Review P-Store.Net Situs Marketplace Terpercaya

Gambar
pada postingan saya kali ini saya akan me-review  Website Marketplace P-Store.Net  . Disini saya akan berbicara mengenai pengalaman saya yang sudah bertransaksi dan berjualan di  P-Store.Net .  P-Store.Net  adalah sebuah website punyanya Mas Tri Hariyanto dimana website ini kegunaanya untuk berjualan online seperti tokopedia atau bukalapak. Disini kalian bebas mau menjual apa saja tanpa ada batasan , kebanyakan yang di jual mengenai Produk-Produk yang berhubungan dengan Internet tapi tidak menutup kemungkinan untuk menjual produk produk lainnya. Review P-Store.Net Situs Marketplace Terpercaya Kalau Mau Join Silahkan Klik Gambar Di bawah ini ! Click Image Tentang P-Store.Net P-Store.Net merupakan marketplace produk virtual & fisik yang dapat memenuhi kebutuhan anda, kami disini mempertemukan penjual & pembeli dengan sistem yang interaktif namun tetap mengedepankan keamanan & kenyamanan pengguna. P-Store.Net juga didukung oleh sumber daya manusia yang ...
Baca selengkapnya

Pedoman untuk Mengubah Hidup Kamu

Gambar
19 Pedoman untuk Jadi Orang yang Lebih Baik Mengubah Hidup Pedoman itu bagaikan arah mata angin yang harus kita ketahui sebelum berlayar di lautan luas.  Simak 19 pedoman dari #ollie dan coba terapkan di kehidupan sehari-hari yaa.. 1 Mempunyai Kebiasaan yang Baik Pastinya ketika bekerja, selalu ada keluhan, kritikan, tindakan merugikan dan terkadang ada yang membicarakan orang lain dari belakang,begitupun sebaliknya. Hal itu tidak perlu dipedulikan.   Ada ungkapan bahwa tidak ada orang yang kerjanya membicarakan orang lain akan berhasil, dan tak ada pula yang menjadi besar karena mengkritik orang lain setiap harinya. Tetap sabar, jangan  mudah terpengaruh orang lain, dan berprasangka baik.  1 2 Bijak Seperti Matahari Cobalah untuk tak membawa informasi negatif ke dalam pekerjaan.   Jangan mengirimkan ataupun menyebarkan informasi negatif ke media sosial seperti Twitter, Facebook, Line dan lain sebagainya.   Belajarlah dari kebijaksanaan matahari, yang menyi...
Baca selengkapnya