0
Home  ›  CSS  ›  Javascript  ›  Tips

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

Tết Pro Tết Pro 2 min read
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.
22 nhận xét
Additional JS