Nút thích chính chủ của Blogger

Ngày bài viết trước mình đã giới thiệu các bạn cách bật hoặc thêm tính năng chấm điểm bài viết Blogger. Đây là một tính năng có sẵn trong Blogger nhưng đã bị bỏ đi phần tùy chọn trong widget blog. Cũng trong thời gian tìm hiểu về nó, mình phát hiện ra cách thức hoạt động của tính năng Phản ứng có sẵn trong trong Blogger. Thì từ tính năng này mình đã chế thành công nút thích chính chủ cho Blogger.


Tính năng phản ứng trong widget Blog là tính năng cho phép các bạn tạo ra lựa chọn cho khách truy cập có thể chọn lựa :)). Không biết phải giải thích sao cho rõ, các bạn thử bật lên kiểm chứng nhé, đôi khi ở mấy template mới không có cho nên bạn có thể lựa đại một mẫu template mặc định của Blogger mà thử.

Nút thích chính chủ của Blogger

Mặc dù tính năng có sẵn này không cho tác động vào nhiều, nhưng với một số mẹo sử dụng HTML và CSS mình biến hóa thành công giao diện của nó. Đầu tiên các bạn hãy thêm đoạn css này lên trên thẻ ]]></b:skin>

.ksllike { 
    margin: 15px 0;
    width: 88px;
    height: 25px;
    float: left;
    overflow: hidden;
    border: 1px solid #C6C6C6;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff8f8f8,EndColorStr=#ffeeeeee);
    background-image: -moz-linear-gradient(top,#F8F8F8 0,#EEE 100%);
    background-image: -ms-linear-gradient(top,#F8F8F8 0,#EEE 100%);
    background-image: -o-linear-gradient(top,#F8F8F8 0,#EEE 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F8F8F8),color-stop(100%,#EEE));
    background-image: -webkit-linear-gradient(top,#F8F8F8 0,#EEE 100%);
    background-image: linear-gradient(to bottom,#F8F8F8 0,#EEE 100%);
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
 opacity: 0.6;
}
.ksllike:hover { 
    opacity: 1;
}
.ksllike div.icon {
    background-image: url(http://2.bp.blogspot.com/-t5BPiq15e-0/UW4wQDK9rhI/AAAAAAAAEbA/8-8-6I8Y0fA/s1600/ui-icons.png);
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
    position: absolute;
    z-index: 1;
}
.ksllike iframe {
    height: 20px;
    margin: 1px 0 0 0;
    position: relative;
    z-index: 9999;
}
.ksllike div.label {
    position: absolute;
    margin: 3px 0 0 22px;
    color: black;
    z-index: 1;
}
.ksllike div.icon {
    background-position: -252px -26px;
}
.ksllike iframe {
 margin-left: -35px;
}

Sau khi chèn xong thì đặt đoạn mã này vào nơi mà bạn muốn xuất hiện nút thích

<div class='ksllike'><div class='icon'/><div class='label'>Thích</div><iframe allowtransparency='true' expr:src='&quot;https://www.blogger.com/blog-post-reactions.g?options=%5B%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%5D&amp;textColor=%23000000#&quot; + data:post.url + &quot;1&quot;' frameborder='0' scrolling='no'/></div>

ví dụ như cuối bài viết thì cứ tìm đến

<div class='post-footer'>

rồi chèn trên dưới đều được.

Lời kết

Cũng như cái chấm điểm bài viết thì nút thích này nó cũng khá là khoai trong việc Thích và bỏ Thích. Nếu thích và bỏ thích theo mình thử nghiệm 2 bữa nãy thì chỉ hoạt động 1 lần với lúc xem trang thôi, một khi người dùng qua xem trang khác, và quay lại thì có thích thêm cũng không được. Demo: http://ksltemplate.blogspot.com