Make Like Button On Blogger!

Platinum    Blogger , Featured , JavaScript   

Hello Viewers Welcome To Maxilary. Today i will share a tutorial on how to make a Like Button (using on this blog) on Blogger with simple JavaScript.
It's pretty simple clean an easy. So let's start.

Contents

• 1 Like Button
• 2 Like Button For Blogger
• 3 javascript Like Button
• 4 JS Like Button
• 5 Like Button With Counter

Follow These Steps 

1. Go To Blogger

2. Select Which Template You Want

3. Edit HTML

4. Add This Code on </b:skin> or before
</style>

.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 #aaa;
    display: inline-block;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    float: left;
    overflow: hidden;
    margin-right: 10px;
}

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

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

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

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

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

5. Then Ad This Code before <data:post.body/>

<div class='lovebutton-bloggerku' expr:data-id='data:blog.blogId + "_" + 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>

6. Then add this code just before </body> 

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

7. Now Save The Theme.

That's all today. Until next tutorial good bye take care.

Source URL : https://www.bloggerku.com/2018/02/tombol-like-untuk-bloggger.html?m=1

Loading