[BLOGGER] Show content only when leaving a comment

Hi mọi người, ngồi tìm hiểu thủ thuật blogspot mới để chia sẽ cho mọi người thì mình thấy có bài viết này cũng khá hay, và đây cũng là một thủ thuật để giúp tăng tương tác trên blog của bạn cũng khá ổn nhé.

[BLOGGER] HIỂN THỊ NỘI DUNG KHI ĐỂ LẠI BÌNH LUẬN.

Giới thiệu sơ lược về thủ thuật này.

• Ẩn nội dung và chỉ hiển thị khi để lại nhận xét
• Cơ chế hoạt động dựa theo số lượng nhận xét tăng so với lần truy cập trước sẽ hiển thị nội dung
• Nội dung ẩn do mình sử dụng style="display: none;" nên khá đơn giản nếu ai đó không muốn nhận xét mà vẫn xem được nội dung :D

Chúng ta bắt đầu áp dụng nhé.

Đầu tiên với thẻ HTML

<div class="nxn">Để lại <a href="#comments" rel="nofollow">nhận xét</a> để xem được nội dung ẩn</div>
<div id="hiden" style="display: none;">
  Nội dung ẩn
</div>

Tiếp theo với đoạn mã Javascript

var cm_config = {
    home_page: 'https://www.hung.pro.vn',
};

var _cookie = {
    set: function (name, value, days) {
        var expires;
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = '; expires=' + date.toGMTString();
        } else {
            expires = '';
        }
        document.cookie = name + '=' + value + expires + '; path=/';
    },
    get: function (name) {
        var nameEQ = name + '=',
            ca = document.cookie.split(';'),
            c;
        for (var i = 0; i < ca.length; i++) {
            c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1, c.length);
            }
            if (c.indexOf(nameEQ) == 0) {
                return c.substring(nameEQ.length, c.length);
            }
        }
        return null;
    }
};

var previousCommentCount = (_cookie.get('tt_cm')) ? parseInt(_cookie.get('tt_cm'), 10) : 0;

function showRecentComments(data) {
    var totalComments = parseInt(data.feed.openSearch$totalResults.$t, 10);

    if (previousCommentCount < totalComments) {
        var hiddenDiv = document.getElementById('hiden');
        var nxnDiv = document.querySelector('.nxn');
        if (hiddenDiv) {
            hiddenDiv.style.display = 'block';
            if (nxnDiv) {
                nxnDiv.style.display = 'none';
            }
        }
    }

    _cookie.set('tt_cm', totalComments, 7000);
}

(function () {
    var head = document.getElementsByTagName('head')[0],
        script = document.createElement('script');
    script.type = 'text/javascript';
    script.id = 'cm-feed-script';
    script.src = cm_config.home_page + '/feeds/comments/default?alt=json-in-script&callback=showRecentComments';
    head.appendChild(script);
})();

Và trong đoạn code Javascript đó có đoạn tên miền hung.pro.vn, bạn thay bằng tên miền của các bạn muốn sữ dụng nhé.
Như vậy là hoàn thành rồi. Chúc các bạn thành công với tiện ích trên.

DEMO HIDE/SHOW COMMENT
Hoặc có thể kiểm tra demo tại đây.

Mã của bạn:

Anh em để lại nhận xét để lấy mã nhé!

Nội dung sẽ hiển thị sau 5 giây

CẢM ƠN CÁC BẠN ĐÃ ĐỂ LẠI NHẬN XÉT TẠI ĐÂY

Theo BlogSpotVN.Net