mẫu code đăng bài

Admin Lạc Hồn Cốc
30 thg 10, 2024

Server 01
fdfd


Server 02

Để thực hiện yêu cầu này, chúng ta sẽ thêm một nút tích chọn (Checkbox) hoặc một cơ chế ghi nhớ. Nếu người dùng tích vào ô "Tôi đã là thành viên VIP", hệ thống sẽ lưu trạng thái này vào trình duyệt và không hiện thông báo cảnh báo nữa khi họ click vào các tập truyện.

Dưới đây là mã đã được nâng cấp:

1. Phần mã CSS (Dán vào trên thẻ ]]></b:skin>)

Tôi thêm một chút style để hiển thị nút "Tắt thông báo" thật gọn gàng.

CSS
/* Checkbox tắt thông báo VIP */
.vip-toggle-container {
    background: #fdf2f2;
    border: 1px solid #ffcccc;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    display: inline-block;
    font-size: 14px;
    color: #cc0000;
    cursor: pointer;
}
.vip-toggle-container input {
    margin-right: 8px;
    cursor: pointer;
}

/* Giữ nguyên các class cũ của bạn */
.audio-list-lhc { margin: 20px 0; padding: 0 !important; list-style: none !important; }
.audio-list-lhc li { background: #fffdf0; border: 1px solid #ddd; margin-bottom: 8px; border-radius: 5px; transition: all 0.3s ease; display: block; }
.audio-list-lhc li a { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; text-decoration: none !important; color: #333 !important; font-weight: 500; }
.audio-list-lhc li.has-listened { background: #ebebeb !important; border-color: #ccc !important; opacity: 0.8; }
.audio-list-lhc li.has-listened a { color: #777 !important; }
.audio-list-lhc li:hover { border-color: #ff0000; background: #fff; transform: translateX(5px); }
.audio-list-lhc li .lock-icon { color: #f1c40f; font-size: 13px; }

2. Phần mã JavaScript (Dán vào ngay trên thẻ </body>)

Đoạn code này xử lý việc ghi nhớ trạng thái "Đã đăng ký VIP".

HTML
<script type='text/javascript'>
//<![CDATA[
document.addEventListener('DOMContentLoaded', function() {
    var audioItems = document.querySelectorAll('.audio-list-lhc li');
    var vipCheckbox = document.getElementById('isVipUser');

    // 1. Kiểm tra nếu trước đó đã tích chọn "Đã đăng ký VIP"
    if (localStorage.getItem('isVipStatus') === 'true' && vipCheckbox) {
        vipCheckbox.checked = true;
    }

    // 2. Lắng nghe sự kiện thay đổi của checkbox
    if (vipCheckbox) {
        vipCheckbox.addEventListener('change', function() {
            localStorage.setItem('isVipStatus', vipCheckbox.checked);
        });
    }

    audioItems.forEach(function(item) {
        var link = item.querySelector('a');
        if (!link) return;

        link.addEventListener('click', function() {
            var isVipStatus = localStorage.getItem('isVipStatus') === 'true';
            var lockIcon = item.querySelector('.lock-icon');

            // 3. Nếu là tập VIP VÀ chưa tích chọn "Đã đăng ký VIP" thì mới hiện cảnh báo
            if (lockIcon && (lockIcon.innerText.includes('🔒') || lockIcon.innerText.includes('VIP'))) {
                if (!isVipStatus) {
                    alert('Thông báo: Hãy đăng ký VIP để nghe, đọc truyện. Cảm ơn bạn!');
                }
            }

            // 4. Đánh dấu đã nghe
            item.classList.add('has-listened');
            localStorage.setItem('listened_' + link.href, 'true');
        });

        // Load trạng thái đã nghe
        if (localStorage.getItem('listened_' + link.href)) {
            item.classList.add('has-listened');
        }
    });
});
//]]>
</script>

3. Cấu trúc bài đăng (Mẫu mới)

Bạn chỉ cần thêm dòng Checkbox ở đầu danh sách truyện (trong bài viết hoặc Widget):

HTML
<label class="vip-toggle-container">
  <input type="checkbox" id="isVipUser"/> Tôi đã đăng ký VIP (Tắt thông báo nhắc nhở)
</label>

<ul class="audio-list-lhc">
  <li><a href="LINK_DRIVE_1" target="_blank">Tập 01: Siêu Án Mạng <span>▶</span></a></li>
  
  <li>
    <a href="LINK_DRIVE_VIP" target="_blank">Tập 06: Siêu Án Mạng 
      <span class="lock-icon">🔒 Hãy đăng ký VIP để nghe, đọc truyện</span>
    </a>
  </li>
</ul>

Cách thức hoạt động:

  1. Khách mới: Click vào tập có chữ 🔒 sẽ hiện thông báo nhắc nhở.

  2. Khách đã mua VIP: Họ chỉ cần tích vào ô "Tôi đã đăng ký VIP" một lần duy nhất. Trình duyệt sẽ nhớ lựa chọn này. Từ đó về sau, họ click vào bất cứ tập nào (kể cả tập có khóa) cũng sẽ không bị hiện alert phiền phức nữa, link Drive sẽ mở ra ngay lập tức.

  3. Ghi nhớ: Cả trạng thái VIP và trạng thái "Tập đã nghe" (màu xám) đều được lưu lại, giúp người dùng cảm thấy web rất thông minh.

Bạn thấy phương án dùng nút tích này có tiện cho thành viên của bạn không?

Next Post Previous Post
No Comment
Add Comment
comment url