Cara Membuat Tombol Like di Blogger

KENEONO – Dikesempatan kali ini saya akan share Cara Membuat Tombol Like di Blogger dengan mudah. Tombol like disini layaknya seperti sobat like status orang pada facebook/instagram, jadi setiap orang yang klik tombol like ini yang berbentuk hati pada blog sobat otomatis akan tambah terus jumlahnya.

Cara kerja tombol like ini bisa like dan unlike, untuk pemasangannya di blog kita membutuhkan javascript, makin penasaran langsung saja simak tutorialnya dibawah ini.

Berikut Cara Memasang Tombol Like/Suka di Blogger :

- Pertama silakan sobat masuk dashboard Blogger menuju menu Tema -> “HTML Edit”.

Terus copy script dibawah ini taruh tepat diatas code </b:skin>.

.lovebutton-keneono {
    width: 100%;
    display: inline-block;
    text-align: center;
    margin: 20px 0;
}

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

.lovebutton-keneono 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-keneono .icon {
    padding-top: 13px;
}

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

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

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

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

- Kemudian copy juga script dibawah ini taruh tepat dibawah code <data:post.body/> (ada beberapa code yang sama seperti itu silakan dicoba-coba dulu). Script ini digunakan untuk menampilkan tombol script pada halaman postingan blog, jadi bisa sobat taruh sesuai keinginan.

<div class='lovebutton-keneono' 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>

- Selanjutnya copy lagi script dibawah ini taruh diatas code </body>.

<script src='https://cdn.rawgit.com/dedi96/keneono/ff8c4db4/likescript.min.js' type='text/javascript'/>

- Terakhir tinggal “Save/Simpan” dan lihat hasilnya.

Lihat DEMO

Dengan membuat tombol like pada blog sobat ini bisa menjadikannya lebih keren dan juga bisa melihat berapa orang yang suka dengan postingan artikelnya. Sumber bloggerku.

Sekian kali ini artikel tentang Cara Membuat Tombol Like di Blogger, semoga bisa bermanfaat untuk sobat semua.

Kunjungi terus blog keneono untuk mendapatkan artikel menarik lainnya... Terimakasih.