[Blogspot] Hướng dẫn tạo nút Like và Dislike đơn giản cho bài viết

Trên các mạng xã hội như Facebook, Twitter, Instagram...đều có các nút Like để thể hiện sự đồng tính hay thích 1 thứ gì đó. Thiết nghĩ tại sao ta lại không làm 1 thủ thuật nho nhỏ để thêm các nút đó vào ngay chính những bài viết trong blog nhỉ?!
Nếu thêm nút Like, Share từ Facebook thì đôi khi làm blog tải trang khá chậm vì phải chạy Js từ web server, vì vậy mình sẽ chia sẻ cho các bạn 2 nút Like và Dislike khác đơn giản hơn mà không kém phần hiệu quả nhé.

Hướng dẫn tạo nút Like và Dislike đơn giản cho bài viết trong Blogspot

Cách thực hiện: Cách 1: Truy cập LikeBtn, tự mình thiết kế, tùy chỉnh thuộc tính, lấy code họ cho và dán vào nơi muốn hiện. Nếu như không muốn lằng nhằng có thể dùng luôn code bên dưới của mình.
Cách 2: Dùng code mình chỉnh sẵn.
Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML.
Bước 2: Thêm đoạn code sau vào nơi bạn muốn hiển thị 2 nút Like và Dislike nhé.

<span class='likebtn-wrapper' data-dislike_enabled='true' data-i18n_like_tooltip='Tớ thích bài này' data-i18n_unlike_tooltip='Bỏ thích' data-icon_dislike_show='true' data-lang='vi' data-popup_enabled='true' data-theme='padded'/>
<script type='text/javascript'>
        (function(d, e, s) {
            if (d.getElementById(&quot;likebtn_wjs&quot;)) return;
            a = d.createElement(e);
            m = d.getElementsByTagName(e)[0];
            a.async = 1;
            a.id = &quot;likebtn_wjs&quot;;
            a.src = s;
            m.parentNode.insertBefore(a, m)
        })(document, &quot;script&quot;, &quot;//w.likebtn.com/js/w/widget.js&quot;);
    </script>

Trong đó:

data-lang="vi": ngôn ngữ Tiếng Việt ("en" - Tiếng Anh)
data-dislike_enabled="true": hiển thị nút "Không thích"
data-icon_dislike_show="true": hiển thị icon của nút "Không thích"
data-popup_enabled="true": hiện popup chia sẻ mạng xã hội sau khi "Thích"
data-theme="padded": mẫu giao diện của nút

--- Đổi giá trị true thành false nếu không muốn hiển thị 1 trong các thuộc tính trên.

Bước 3: Lưu template lại.

Kết luận:

Nút Like và Dislike này vừa đơn giản, vừa đẹp mắt. Nếu muốn chỉnh sửa thêm thì bạn phải thêm các class hoặc id để căn chỉnh lại vị trí 2 nút sao cho hợp blog của bạn nhé.

Ngoài ra, để thay đổi style hoặc thuộc tính nào đó của 2 nút hãy đổi trong LikeBtn nhé!

Chúc các bạn thành công :)
Post by: TsmBlogger.com

#Blogspot #Thủ thuật

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!