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.
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.html và https://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
