Hướng dẫn tạo cửa sổ Popup liên kết bằng Script cho Blogspot
Cách làm:
- Bước 1: Vào Chủ đề >> Chỉnh sửa HTML
<!-- POPUP MIỄN TRỪ TRÁCH NHIỆM BLOGGER -->
<style>
#disclaimer-overlay {
position: fixed;
inset: 0;
z-index: 999999;
background: rgba(0, 0, 0, 0.82);
display: flex;
justify-content: center;
align-items: center;
padding: 12px;
box-sizing: border-box;
}
#disclaimer-popup {
position: relative;
width: 100%;
max-width: 600px;
background: #fff;
border-radius: 16px;
padding: 40px 40px 48px;
box-sizing: border-box;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
font-family: Arial, sans-serif;
animation: disclaimerShow 0.3s ease-out;
}
#disclaimer-icon {
text-align: center;
color: #ff9418;
font-size: 45px;
line-height: 1;
margin-bottom: 14px;
}
#disclaimer-title {
text-align: center;
font-size: 29px;
line-height: 1.3;
font-weight: 700;
color: #082440;
margin: 0 0 30px;
}
#disclaimer-content {
font-family: Georgia, "Times New Roman", serif;
font-size: 17px;
line-height: 1.8;
color: #555;
margin: 0 0 64px;
overflow-wrap: break-word;
}
#disclaimer-agree {
display: block;
width: 100%;
min-height: 64px;
border: none;
border-radius: 12px;
background: #15558f;
color: #fff;
font-size: 17px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
transition: background 0.2s ease;
}
#disclaimer-agree:hover {
background: #0c4274;
}
@keyframes disclaimerShow {
from {
opacity: 0;
transform: scale(0.96);
}
to {
opacity: 1;
transform: scale(1);
}
}
@media (max-width: 480px) {
#disclaimer-popup {
padding: 30px 22px;
border-radius: 14px;
}
#disclaimer-title {
font-size: 23px;
margin-bottom: 24px;
}
#disclaimer-content {
font-size: 15px;
line-height: 1.7;
margin-bottom: 38px;
}
#disclaimer-agree {
min-height: 54px;
font-size: 15px;
}
#disclaimer-icon {
font-size: 40px;
}
}
</style>
<div id='disclaimer-overlay' style='display:none;'>
<div aria-describedby='disclaimer-content' aria-labelledby='disclaimer-title' aria-modal='true' id='disclaimer-popup' role='dialog'>
<div aria-hidden='true' id='disclaimer-icon'>⚠</div>
<h2 id='disclaimer-title'>
MIỄN TRỪ TRÁCH NHIỆM
</h2>
<p id='disclaimer-content'>
Tất cả nội dung trên trang web này đều cung cấp thông tin
không mục đích và không được khuyến nghị đầu tư.
Tại Việt Nam, giao dịch CFDs, Vàng, Chỉ Số
có một số rủi ro nhất định, trong đó có bao gồm các rủi ro về pháp lý.
Độc giả nên tìm hiểu kỹ trước khi đưa ra quyết định tham số.
không mục đích và không được khuyến nghị đầu tư.
Tại Việt Nam, giao dịch CFDs, Vàng, Chỉ Số
có một số rủi ro nhất định, trong đó có bao gồm các rủi ro về pháp lý.
Độc giả nên tìm hiểu kỹ trước khi đưa ra quyết định tham số.
</p>
<button id='disclaimer-agree' type='button'>
TÔI ĐÃ HIỂU VÀ ĐỒNG Ý
</button>
</div>
</div>
<script>
(function () {
var overlay = document.getElementById("disclaimer-overlay");
var agreeButton = document.getElementById("disclaimer-agree");
if (!overlay || !agreeButton) return;
// Luôn hiển thị Popup mỗi lần tải trang
overlay.style.display = "flex";
document.documentElement.style.overflow = "hidden";
agreeButton.addEventListener("click", function () {
// Đóng Popup khi khách đồng ý
overlay.style.display = "none";
document.documentElement.style.overflow = "";
});
})();
</script>
- Bước 2: kéo xuống cuối cùng,Thêm đoạn mã dưới đây vào trước thẻ đóng hoặc sau <body> trong Blogspot - Bước 3: tìm đoạn code ( <h2 id='disclaimer-title'> ) dưới đoạn này là tiêu đề ví dụ: Miễn Trừ Trách Nhiệm
- Bước 4: tìm đoạn code ( <p id='disclaimer-content'> ) dưới đoạn này là nội dung và đoạn ( <button id='disclaimer-agree' type='button'> ) ví dụ: tôi đã hiểu và đông ý sau đó bấm lưu
- Bước 5: Mở blog và nhấn f5 để check
Chúc bạn thành công
Bài viết được viết bởi: Viện Đào Tạo Đầu Tư Việt Nam - Copy nhớ ghi nguồn bài viết đó
VĐTĐTVN
Không có nhận xét nào: