Sosial Media
0
News
    Home Blogspot Javascript Tips

    Cách điều hướng comment về đúng trang cho blogspot

    "Hướng dẫn dách điều hướng comment về đúng trang cho blogspot"

    2 min read

    Tình huống thực tế như sau: Khi bạn gặp tình trạng độc giả để lại comment xin liên kết không đúng chỗ?
    Và cách xử lý hiện tại của mình như sau: không xóa comment, chỉ làm mờ đi nhưng khi hover vào vẫn hiển thị rõ , và có một thông báo điều hướng người dùng về đúng trang đăng ký liên kết.

    Demo

    Code full

    JS

    <script>
    document.addEventListener("DOMContentLoaded", function(){
    
      const processed = new WeakSet();
    
      const NOTICE = `
      <div class="vnc-link-guide">
        🔗 Mình hiểu bạn đang muốn đặt liên kết với blog.<br>
        👉 Vui lòng truy cập:
        <a href="/p/lien-ket.html" target="_blank">
          https://www.vncoding.com/p/lien-ket.html
        </a><br>
        Xin cảm ơn ❤️
      </div>
      `;
    
      function isLinkRequest(text){
        if(!text) return false;
    
        text = text.toLowerCase();
    
        const hasLink = /https?:\/\/|www\./i.test(text);
    
        const hasKeyword =
          text.includes("liên kết") ||
          text.includes("mô tả") ||
          text.includes("link blog");
    
        return hasLink && hasKeyword;
      }
    
      function handleComments(){
    
        document.querySelectorAll('.comment-content').forEach(function(el){
    
          if(processed.has(el)) return;
    
          const text = el.innerText;
    
          if(isLinkRequest(text)){
    
            el.classList.add("vnc-overlay");
    
            if(!el.nextElementSibling || !el.nextElementSibling.classList.contains("vnc-link-guide")){
              el.insertAdjacentHTML("afterend", NOTICE);
            }
    
          }
    
          processed.add(el);
    
        });
    
      }
    
      handleComments();
    
      let timer;
      const observer = new MutationObserver(function(){
        clearTimeout(timer);
        timer = setTimeout(handleComments, 120);
      });
    
      observer.observe(document.body,{
        childList:true,
        subtree:true
      });
    
    });
    </script>
    Thay đổi /p/lien-ket.htmlhttps://www.vncoding.com/p/lien-ket.html cho đúng với blog của bạn

    💡 Kết quả

    Nội dung comment Kết quả
    Chỉ có link ❌ Không áp dụng
    "liên kết giúp mình" (không có link) ❌ Không áp dụng
    "liên kết + link" ✅ Áp dụng
    "link blog của mình: https..." ✅ Áp dụng

    CSS

    <style>
    .comment-content.vnc-overlay{
      position:relative;
    }
    
    .comment-content.vnc-overlay::after{
      content:"";
      position:absolute;
      inset:0;
      background:rgba(255,255,255,0.6);
      backdrop-filter: blur(3px);
      pointer-events:none;
      border-radius:6px;
      transition: all .25s ease;
    }
    
    .comment-content.vnc-overlay:hover::after{
      background:transparent;
      backdrop-filter:none;
    }
    
    .vnc-link-guide{
      margin-top:6px;
      padding:10px;
      background:#fff3cd;
      border-left:4px solid #ff9800;
      border-radius:6px;
      font-size:13px;
      color:#856404;
    }
    .vnc-link-guide a{
      color:#d97706;
      font-weight:600;
    }
    
    </style>  
    

    Kết luận

    • Giữ trải nghiệm người dùng tốt
    • Điều hướng đúng quy trình
    • Tăng độ chuyên nghiệp cho blog
    Đừng quên để lại comment nếu gặp khó khăn trong quá trình thao tác nhé, bye! ./.
    Nhận xét
    Additional JS