Shortcodes
<div style="background: #fffdf3; border-radius: 2px; border: 1px solid #f2dfa4; box-sizing: border-box; color: #c4690e; float: none; font-family: Arial, sans-serif; font-size: 15px; margin: 0px auto; outline: 0px; padding: 15px 20px; vertical-align: baseline;"><strong style="background: transparent; border: 0px; box-sizing: initial; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Lưu ý</strong>: <ul> <li>Nội dung văn bản 1</li> <li>Nội dung văn bản 2</li> <li>Nội dung văn bản 3</li> </ul> </div>
Button
<style>
.demo-btn {
display: inline-block;
padding: 10px 20px;
background: linear-gradient(135deg, #4CAF50, #2E7D32);
color: #fff !important;
font-weight: bold;
text-decoration: none !important;
border-radius: 8px;
transition: 0.3s ease;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.demo-btn:hover {
background: linear-gradient(135deg, #43A047, #1B5E20);
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0,0,0,0.25);
color: #fff !important;
text-decoration: none !important;
}
</style>
<center>
<a class="demo-btn" href="https://magpaper-anhtrainang.blogspot.com/" target="_blank">🚀 DEMO V1.8</a> <a class="demo-btn" href="https://magpaper-ads-pikitemplates.blogspot.com/" target="_blank">🚀 DEMO V2.1</a></center>Ghi chú
<div class="content-table">
<div class="text-description">
<h2>GHI CHÚ</h2>
</div>
<div class="text-post">
<p>Để sở hữu template này hết sức đơn giản các bạn chỉ cần để lại <b>email</b> dưới bình luận, mình sẽ gửi riêng cho từng bạn. Xin cảm ơn các bạn, chúc một ngày tốt lành!</p></div>
</div>
<style>
.content-table {
margin: 0;
display: flex;
-webkit-box-shadow: 0 4px 13px -6px rgba(110,110,110,0);
-moz-box-shadow: 0 4px 13px -6px rgba(185,185,185,0.45);
box-shadow: 0 4px 13px -6px rgba(185,185,185,0.45);}
.content-table .text-description {
background: -moz-linear-gradient(top,rgba(37,141,200,1) 44%,rgba(115,182,220,1) 64%,rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(top,rgba(37,141,200,1) 44%,rgba(115,182,220,1) 64%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom,rgba(37,141,200,1) 44%,rgba(115,182,220,1) 64%,rgba(255,255,255,0) 100%);}
.content-table .text-description, .content-table .text-features, .content-table .text-updates {
padding: 5px;
margin: 0 auto;
white-space: nowrap;
text-align: center;
-webkit-writing-mode: vertical-lr;
writing-mode: vertical-rl;
transform: scale(-1,-1);}
.content-table .text-description h2, .content-table .text-features h2, .content-table .text-updates h2 {
padding: 0;
margin: 0;
letter-spacing: 2px;
color: #fff;
font-size: 18px;
text-transform: uppercase;}
.content-table .text-post {
padding: 10px;
margin: 0;
background: #fff;
width: 100%;}
</style>
Bài liên quan (1 bài)
<!-- Bài Liên Quan -->
<div class="related-post">
<a href="https://www.anhtrainang.com/2025/09/psd-poster-anh-trai-say-hi-2025-file-thiet-ke-chia-se-mien-phi.html" class="related-card">
🔗 PSD Poster Anh Trai "Say Hi" 2025 – File thiết kế chia sẻ miễn phí
</a>
</div>
<style>
.related-post {
margin: 25px 0;
display: flex;
justify-content: center;}
.related-card {
display: block;
padding: 16px 20px;
border-radius: 16px;
background: #ffffff;
border-left: 5px solid #ff6f61; /* highlight màu nổi bật */
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
font-size: 17px;
font-weight: 600;
color: #333;
text-decoration: none;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;}
.related-card::before {
content: "Liên quan: ";
color: #ff6f61;
font-weight: bold;}
/* Hover effect với pulse nhẹ */
.related-card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 14px 28px rgba(0,0,0,0.12);
animation: pulse 0.6s ease-in-out;}
/* Pulse animation */
@keyframes pulse {
0% { transform: translateY(-4px) scale(1.02); }
50% { transform: translateY(-6px) scale(1.04); }
100% { transform: translateY(-4px) scale(1.02); }}
</style>
Khung lưu ý
<!-- Khung Lưu Ý Animated -->
<div class="animated-note">
<div class="note-icon">⚡</div>
<div class="note-content">
<strong>Lưu ý:</strong> Phiên bản font việt hóa FZ Jaapokki miễn phí bởi FontZin chỉ sử dụng với mục đích cá nhân và phi thương mại.
</div>
</div>
<style>
.animated-note {
display: flex;
align-items: center;
background: linear-gradient(135deg, #f7f9fb, #e2e8f0);
border-radius: 12px;
padding: 16px 20px;
box-shadow: 0 6px 16px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.08);
font-family: 'Arial', sans-serif;
color: #333;
font-size: 16px;
position: relative;
overflow: hidden;
cursor: default;
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin: 20px 0 20px 0;}
.animated-note:hover {
transform: translateY(-4px);
box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 6px 16px rgba(0,0,0,0.12);}
/* Icon animation */
.note-icon {
font-size: 22px;
animation: iconSlidePulse 2s infinite alternate;}
@keyframes iconSlidePulse {
0% { transform: translateY(0) scale(1); opacity: 0.8; }
50% { transform: translateY(-4px) scale(1.1); opacity: 1; }
100% { transform: translateY(0) scale(1); opacity: 0.8; }}
/* Text underline animation on hover */
.note-content strong {
position: relative;}
.note-content strong::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 0%;
height: 2px;
background: #4a90e2;
border-radius: 2px;
transition: width 0.4s ease-in-out;}
.animated-note:hover .note-content strong::after {
width: 100%;}
</style>
Download Counter Box
<!-- Download Box -->
<div class="download-box">
<div class="download-header">
<span class="download-icon">📁</span> File Download
</div>
<div class="download-body">
<p class="file-title"><strong>Tên file:</strong> Template Countdown Tết 2026</p>
<p class="file-meta">Dung lượng: 0.99 MB · Google Drive</p>
<p id="countdownText"></p>
<div class="btn-wrap">
<button id="btnDownload" onclick="startDownload()">
⬇️ <b>TẢI VỀ</b>
</button>
<a id="realDownload"
href="https://drive.google.com/file/d/1y94gLf2EcZ_CXtFeJ6zOn32O7wOZ3ssB/view?usp=sharing"
target="_blank">Download Now</a>
</div>
</div>
</div>
<style>
.download-box {
max-width: 450px;
margin: 20px auto;
border: 1px solid #ddd;
border-radius: 6px;
background: #fafafa;
font-family: "Segoe UI", Roboto, sans-serif;
box-shadow: 0 8px 24px rgba(2, 6, 23, .06);}
.download-header {
background: #f5f5f5;
padding: 10px 14px;
font-weight: 600;
font-size: 15px;
border-bottom: 1px solid #e1e1e1;
color: #333;
display: flex;
align-items: center;}
.download-icon {
margin-right: 8px;}
.download-body {
padding: 16px;}
.file-title {
font-size: 14px;
margin: 4px 0;
color: #222;}
.file-meta {
font-size: 13px;
color: #666;
margin-bottom: 12px;}
#countdownText {
font-size: 13px;
color: #555;
margin-bottom: 14px;}
.btn-wrap {
display: flex;
gap: 10px;
flex-wrap: wrap;}
#btnDownload,
#realDownload {
padding: 9px 18px;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
border: 1px solid #ccc;
background: #fff;
color: #333;
cursor: pointer;
text-decoration: none;
transition: background .2s, border .2s;}
#btnDownload:hover,
#realDownload:hover {
background: #f0f0f0;
border-color: #bbb;}
#realDownload {
display: none;}
</style>
<script>
function startDownload() {
let sec = 8;
const btn = document.getElementById("btnDownload");
const txt = document.getElementById("countdownText");
const link = document.getElementById("realDownload");
const HOURGLASS = String.fromCodePoint(0x23F3); // ⏳
const CHECK = String.fromCodePoint(0x2705); // ✅
btn.disabled = true;
btn.style.opacity = "0.7";
txt.textContent = `${HOURGLASS} Đang chuẩn bị tải... ${sec} giây`;
const timer = setInterval(() => {
sec--;
if (sec > 0) {
txt.textContent = `${HOURGLASS} Đang chuẩn bị tải... ${sec} giây`;
} else {
clearInterval(timer);
txt.textContent = `${CHECK} Link sẵn sàng!`;
link.style.display = "inline-block";
window.open(link.href, "_blank");
}
}, 1000);
}
</script>
File Download
Tên file: Template Countdown Tết 2026
<div id="cg" style="border:1px solid #ddd;border-radius:10px;padding:16px;margin:16px 0">
<div id="cg-head" style="font-weight:600;margin-bottom:8px">Bình luận chứa mã để mở khóa</div>
<div id="cg-row" style="display:flex;gap:8px;align-items:center;margin-bottom:10px">
<input id="tk" readonly style="flex:1;padding:10px;border:1px solid #ccc;border-radius:8px;font-family:monospace">
<button id="cp" style="padding:10px 14px;border:0;border-radius:8px;cursor:pointer">Copy mã</button>
</div>
<div id="cg-actions" style="display:none;gap:8px;flex-wrap:wrap;margin-bottom:6px">
<button id="ck" style="padding:10px 14px;border:0;border-radius:8px;cursor:pointer">Xác nhận bình luận</button>
<button id="mo" style="padding:10px 14px;border:0;border-radius:8px;cursor:pointer">Tải thêm & quét</button>
<button id="showtk" style="padding:10px 14px;border:0;border-radius:8px;cursor:pointer">Hiện lại mã</button>
</div>
<div id="stat" style="margin-top:6px;opacity:.85"></div>
</div>
<script type="text/plain" id="hidden-code">
Nội dung ẩn dán vào đây. Nếu HTML phải mã hóa
</script>
<div id="unl" style="display:none;border:1px dashed #7c7;padding:16px;border-radius:10px;margin:16px 0"></div>
<script>
(function(){
var S=document.getElementById.bind(document),Q=function(s){return document.querySelector(s)},QA=function(s){return Array.prototype.slice.call(document.querySelectorAll(s))};
function rnd(n){var a=new Uint8Array(n);crypto.getRandomValues(a);return Array.from(a).map(b=>b.toString(16).padStart(2,"0")).join("")}
function K(p){return "unl_ok::"+p} function KT(p){return "unl_tok::"+p} function KC(p){return "unl_copied::"+p}
function ensureToken(p){var t=localStorage.getItem(KT(p));if(!t){t=rnd(8);localStorage.setItem(KT(p),t)}S("tk").value=t;return t}
function show(){var b=S("unl"),p=S("hidden-code");b.style.display="block";b.innerHTML=p?p.textContent:"<pre>(không có nội dung)</pre>";S("cg").style.display="none"}
function scanOnce(tok){var ok=false;QA('#comment-holder .comment-content, #comment-holder .comment, #comment-holder [id^="c"]').some(function(el){if((el.textContent||"").indexOf(tok)>-1){ok=true;return true}});return ok}
function clickLoadMore(){var btn=Q('#comment-holder .loadmore:not(.hidden) a');if(btn){btn.click();return true}return false}
function scanWithLoad(path,tok){var tries=0,max=20;function step(){if(scanOnce(tok)){localStorage.setItem(K(path),"1");S("stat").innerText="Đã xác nhận. Đang mở khóa…";setTimeout(show,220);return}if(tries>=max){S("stat").innerText="Không thấy bình luận chứa mã. Hãy chắc là đã gửi bình luận và hiện đầy đủ.";return}if(clickLoadMore()){tries++;setTimeout(step,400)}else{S("stat").innerText="Đã tải hết bình luận hiện có nhưng chưa thấy mã."}}step()}
function scrollToComments(){var el=Q("#comments")||Q("#comment-holder");if(el&&el.scrollIntoView){el.scrollIntoView({behavior:"smooth",block:"start"})}location.hash="#comments"}
function bind(){
var path=location.pathname, ok=localStorage.getItem(K(path))==="1", copied=localStorage.getItem(KC(path))==="1";
if(ok){show();return}
var tok=ensureToken(path);
function showCopyRow(){S("cg-row").style.display="flex";S("cg-actions").style.display="none"}
function showActions(){S("cg-row").style.display="none";S("cg-actions").style.display="flex"}
if(copied) showActions(); else showCopyRow();
S("cp").onclick=function(){S("tk").select();document.execCommand("copy");localStorage.setItem(KC(path),"1");showActions();S("stat").innerText="Đã copy mã!";scrollToComments()};
S("ck").onclick=function(){S("stat").innerText="Đang quét bình luận trên trang…";if(scanOnce(tok)){localStorage.setItem(K(path),"1");S("stat").innerText="Đã xác nhận. Đang mở khóa…";setTimeout(show,220)}else{S("stat").innerText="Chưa thấy mã trong các bình luận đã hiển thị. Thử 'Tải thêm & quét'."}};
S("mo").onclick=function(){S("stat").innerText="Đang tải thêm và quét!";scanWithLoad(path,tok)};
S("showtk").onclick=function(){showCopyRow();S("stat").innerText="Copy lại nào!";S("tk").focus();S("tk").select()}
}
if(document.readyState!=="loading")bind();else document.addEventListener("DOMContentLoaded",bind)
})();
</script>