Gắn biểu tượng sự kiện cạnh logo bằng shortcode

8.10.25 | 18 nhận xét | lượt xem
Nội Dung Chính
    Thủ thuật này giúp bạn dễ dàng hiển thị biểu tượng sự kiện (ví dụ: Trung Thu, 20/10, noel…) cạnh logo mà không cần chỉnh sửa lại template mỗi lần.

    Giới thiệu

    • Không cần sửa lại template mỗi sự kiện.
    • Thêm nhanh qua widget HTML.
    • Tự động ẩn khi hết event.

    Code

    Dán code bên dưới trong template 
    <style id="evt-icon-base">
[data-event-slot]{display:none!important;}
@keyframes lanternSwing{0%{transform:rotate(-6deg)}50%{transform:rotate(6deg);filter:drop-shadow(0 0 10px rgba(255,235,59,.6))}100%{transform:rotate(-6deg)}}
.logotop {position: relative;display: inline-block;}
</style>

<script>
//<![CDATA[
(function(){
"use strict";
var LOGO_WRAP_SEL=".logotop";
function applyStyle(el){
el.style.position="absolute";
el.style.top="-15px";
el.style.display="inline-block";
el.style.verticalAlign="middle";
el.style.transformOrigin="top center";
el.style.animation="lanternSwing 3.8s ease-in-out infinite";
el.style.width = "50px";
}
function parseShortcode(txt){
if(!txt)return null;
var e=txt.match(/\[event\]([\s\S]*?)\[\/event\]/i);
var d=txt.match(/\[end\](.*?)\[\/end\]/i);
return e?{svg:e[1].trim(),end:d?d[1].trim():null}:null;
}
function validDate(dateStr){
if(!dateStr)return true;
var now=new Date();
var end=new Date(dateStr.replace(/(\d{2})\/(\d{2})\/(\d{4})/,"$2/$1/$3"));
return now<=end;
}
function init(){
var w=document.querySelector("[data-event-slot]");
if(!w)return;
var t=parseShortcode(w.innerHTML);
if(!t)return;
if(!validDate(t.end))return;
var logo=document.querySelector(LOGO_WRAP_SEL);
if(!logo)return;
w.style.display="none";
var h=document.createElement("span");
h.setAttribute("aria-hidden","true");
applyStyle(h);
h.innerHTML=t.svg;
logo.appendChild(h);
}
if(document.readyState!=="loading")init();
else document.addEventListener("DOMContentLoaded",init);
})();
/*]]>*/
</script>

    ⚠️ Lưu ý về phần tử .logotop

    Nếu template của bạn dùng selector khác (ví dụ .header-logo hoặc #logo-wrap), hãy cập nhật dòng: 
    var LOGO_WRAP_SEL = ".logotop";

    trong đoạn script cho phù hợp với cấu trúc trang của bạn.

    Tạo widget HTML

    Vào Bố cục → Thêm tiện ích → HTML/Javascript, dán nội dung sau: 
    <div data-event-slot>
[event]
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#ff6b88"></circle>
</svg>
[/event]
[end]31/10/2025[/end]
</div>
    • Bạn có thể thay phần <svg>...</svg> bằng bất kỳ biểu tượng nào cho sự kiện, ví dụ trái tim, hoa, pháo hoa, đèn lồng,…
    • Và 31/10/2025 thành thời gian kết thúc event

    Hoạt động tự động

    • Tự động hiển thị biểu tượng cạnh logo.
    • Biểu tượng lắc nhẹ nhờ animation lanternSwing.
    • Hết hạn ([end]) → tự ẩn, không cần xóa thủ công.
    Bạn đang xem bài viết "Gắn biểu tượng sự kiện cạnh logo bằng shortcode" tại chuyên mục: CSS , Javascript , Tips
    Copy to clipboard

    18

    nhận xét
    Mới nhất ⇅

    Bình luận

    Chèn hình ảnh: Chỉ cần dán link hình ảnh - Upload ảnh

    Chèn code: [pre]Code đã mã hóa [/pre]

    Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

    Chèn link: Click để chèn link

    Đăng ký: Đăng Nhận xét (Atom)