Blogger:Kalpli Beğen Butonu

   Blogger temanızda kullanabileceğiniz, yazılarınızın beğenme oranlarını ziyaretçilerinize gösterebileceğiniz kalpli beğen butonunu bloğunuza nasıl ekleyebileceğinizi analatacam. İşlemin adımlarına geçmeden önce bu eklenti hakkında daha fazla bir bilgiye sahip olabilmek için eklentinin demosuna aşağıdaki linkten bakabilirsiniz.

Yapım Aşamaları:

1. Blogger panelinden Tema > HTML'yi düzenle seçeneklerine tıklayın.
2. Kodların bulunduğu alana bir kez tıklayın ve Ctrl+F tuşlarına tıklayın. Ardından arama yerine ]]></b:skin> kodunu yazıp Enter tuşuna tıklayın.
3. ]]></b:skin> kodunun bir üst satırına aşağıda bulunan CSS kodunu kopyalayıp yapıştırın.
4. Eklentinin yazılarınızın altında görünmesini istiyorsanız     <data:post.body/>       kodundan önce aşağıda verilen HTML kodlarını yapıştırınız.
5. Son olarak eklentinin çalışmasını sağlayan JS kodlarını    </body>     kodundan önesine yapıştırınız. Temanızı yedeklmeyi ve kaydetmeyi unutmayınız. Yardım almak için yorum  formunu kullanabilirsiniz.

CSS KODU

.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;
}

HTML KODU

<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='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>

JS KODU

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