Hiển thị nội dung chỉ khi để lại nhận xét

Bài viết này mình sẽ hướng dẫn cách để ẩn nội dung mong muốn và chỉ hiển thị khi để lại nhận xét

Giới thiệu

• Ẩ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

Hướng dẫn

Trước hết thì anh em để lại nhận xét để xem được phần hướng dẫn bên dưới

HTML

Sử dụng HTML sau để hiển thị nội dung ẩn và nội dung hiển thị trước khi để lại nhận xét

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

JS

var cm_config = {
    home_page: 'https://www.blogspotvn.net',
};

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);
})();

https://www.blogspotvn.net thay thế bằng link blog của bạn
Như vậy là đã hoàn thành rồi, chúc anh em một ngày vui! :D