Trong thời đại kỹ thuật số hiện nay, việc kết hợp các công nghệ web tiên tiến vào ngành gỗ không chỉ là một xu hướng mà còn là yếu tố quan trọng giúp doanh nghiệp phát triển bền vững. Đặc biệt, việc ứng dụng HTML cùng với các giải pháp quảng cáo thông minh như In-App Push Notifications và Native Advertising có thể tạo ra sự khác biệt đáng kể. Bài viết này sẽ khám phá cách HTML, Thông Báo Đẩy, và Quảng Cáo Native có thể được tích hợp một cách hiệu quả vào Website của ngành gỗ, từ đó tối ưu hóa Layout, UX/UI Design, và đảm bảo SEO-friendly Design.
1. HTML và Ứng Dụng Trong Ngành Gỗ 🖥️
HTML (HyperText Markup Language) là nền tảng cơ bản của bất kỳ trang web nào. Trong ngành gỗ, nơi sản phẩm như Gỗ tràm xẻ sấy, Thớt gỗ, và gỗ ghép cần được trưng bày một cách trực quan, HTML đóng vai trò quan trọng trong việc xây dựng một Website chuyên nghiệp, dễ điều hướng và thu hút người dùng.
2. Tích Hợp In-App Push Notifications: Thúc Đẩy Tương Tác Khách Hàng 🔔
Thông Báo Đẩy không chỉ là công cụ giúp giữ chân khách hàng mà còn là một cách tuyệt vời để thông báo về các chương trình khuyến mãi, sản phẩm mới như thớt gỗ hoặc gỗ tràm xẻ sấy. Bằng cách tích hợp In-App Push Notifications vào Layout của website, bạn có thể tăng cường trải nghiệm người dùng, giữ họ tương tác với các nội dung mới nhất ngay cả khi họ không trực tiếp truy cập trang web.
3. Native Advertising: Quảng Cáo Tự Nhiên, Hiệu Quả Cao 🌍
Quảng Cáo Native (Native Advertising) là hình thức quảng cáo hòa vào nội dung của trang web, khiến người dùng cảm thấy tự nhiên và ít bị làm phiền. Với SEO-friendly Design, các quảng cáo này không chỉ thúc đẩy doanh số bán hàng mà còn nâng cao thứ hạng tìm kiếm của trang web. Điều này đặc biệt quan trọng khi quảng bá các sản phẩm gỗ chuyên biệt như gỗ ghép hay gỗ tràm xẻ sấy.
4. UX/UI Design: Nâng Cao Trải Nghiệm Người Dùng 🧑💻
UX/UI Design là yếu tố cốt lõi để giữ chân người dùng và chuyển đổi khách hàng tiềm năng thành người mua thực sự. Trong ngành gỗ, nơi khách hàng thường cần xem xét kỹ lưỡng từng chi tiết của sản phẩm, từ chất liệu đến kiểu dáng, việc tối ưu hóa Layout và UX/UI Design là cực kỳ quan trọng. Một trang web với giao diện thân thiện, dễ sử dụng sẽ giúp người dùng dễ dàng tìm thấy sản phẩm như thớt gỗ hay gỗ ghép mà họ cần.
5. SEO-friendly Design: Chìa Khóa Để Tăng Thứ Hạng Website 🔍
Một Website thân thiện với SEO (SEO-friendly Design) là yếu tố quyết định để thu hút lượng truy cập tự nhiên. Bằng cách tối ưu hóa từ khóa liên quan đến ngành gỗ như thớt gỗ, gỗ tràm xẻ sấy, và gỗ ghép, kết hợp với nội dung chất lượng cao, bạn có thể cải thiện đáng kể thứ hạng của mình trên các công cụ tìm kiếm. Điều này không chỉ giúp tăng khả năng hiển thị mà còn xây dựng uy tín và lòng tin của khách hàng đối với thương hiệu của bạn.
6. Web Tool Thông Báo Đẩy :
- OneSignal https://www.onesignal.com [ Mobile Push Notifications / Web Push Notifications / Push Preview Tool ]
Tham Khảo Thêm " Kiểu Quảng Cáo Tương Tự Popup " : https://blog.khoz.vn/huong-dan-html-tao-quang-cao-popup-trai-va-phai-cho-native-advertising-chot-don-ngay
7. Mẫu Thiết Kế HTML Thông Báo Đẩy :
</>Những In-App Push Notifications Áp Dụng Trên Blog Của Tui :
[ Đang Dùng Mẫu Số 5 ]
/=========Bắt Đầu==========/
Mẫu Thông Báo Đẩy Số 1 : Text & Link
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
padding-top: 0; /* Adjust dynamically */
}
.in-app-notification {
position: fixed;
top: 0;
left: 0;
width: 90%;
background-color: #FFFFCC;
color: black;
text-align: center;
padding: 2px;
z-index: 1000;
max-height: 70px;
display: none; /* Hidden by default */
transition: top 0.3s;
}
.notification-content a {
color: #FFD700;
text-decoration: none;
}
.notification-content a:hover {
text-decoration: underline;
}
.close-notification {
background: none;
border: none;
color: black;
font-size: 18px;
cursor: pointer;
position: absolute;
right: 15px;
}
.content {
padding: 10px;
}
.rocket-icon {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 40px;
cursor: pointer;
z-index: 1001;
}
</style>
<!-- Notification 1 -->
<div id="push-notification-1" class="in-app-notification">
<div class="notification-content">
<p>🎉 Gỗ tràm xẻ sấy ( 2m / 1m2 / 1m ).
<a href="https://blog.khoz.vn/go-tram-xe-say-la-go-gi-mua-o-dau-uy-tin-chat-luong-ban-dang-can-tim-nha-cung-cap-ban-go-tram-gia-canh-tranh-xem-o-day">
Click ngay để xem ngay!</a>
<button class="close-notification" onclick="closeNotification('push-notification-1')">✖</button>
</p>
</div>
</div>
<!-- Notification 2 -->
<div id="push-notification-2" class="in-app-notification">
<div class="notification-content">
<p>🆕 Thớt Gỗ Teak Ghép Hoa Văn Cao Cấp, Bền Đẹp & Thân Thiện Với Môi Trường.
<a href="https://blog.khoz.vn/thot-go-teak-su-lua-chon-hoan-hao-cho-nha-bep-va-trang-tri">Tìm Hiểu Ngay Bây Giờ!</a>
<button class="close-notification" onclick="closeNotification('push-notification-2')">✖</button>
</p>
</div>
</div>
<!-- Notification 3 -->
<div id="push-notification-3" class="in-app-notification">
<div class="notification-content">
<p>📢 Đã có bài viết mới! Khám phá ngay cách tích hợp HTML, Quảng Cáo Native và Thông Báo Đẩy để tối ưu website ngành gỗ !
<a href="https://blog.khoz.vn/ung-dung-html-trong-nganh-go-tich-hop-in-app-push-notifications-native-advertising-quang-cao-thong-minh-hieu-qua">Đọc ngay</a>
<button class="close-notification" onclick="closeNotification('push-notification-3')">✖</button>
</p>
</div>
</div>
<!-- Rocket Icon -->
<div class="rocket-icon" onclick="showRandomNotification()">🚀</div>
<script>
let currentNotificationId = null;
// Function to show a random notification
function showRandomNotification() {
const notifications = [
'push-notification-1',
'push-notification-2',
'push-notification-3'
];
// Hide the current notification if it exists
if (currentNotificationId) {
closeNotification(currentNotificationId);
}
const randomIndex = Math.floor(Math.random() * notifications.length);
const notificationId = notifications[randomIndex];
showNotification(notificationId);
currentNotificationId = notificationId;
}
// Function to show notification
function showNotification(notificationId) {
const notification = document.getElementById(notificationId);
notification.style.display = 'block';
// Adjust padding-top of body
document.body.style.paddingTop = notification.offsetHeight + 'px';
}
// Function to close notification
function closeNotification(notificationId) {
const notification = document.getElementById(notificationId);
notification.style.display = 'none';
// Reset padding-top when notification is closed
document.body.style.paddingTop = '0';
}
</script>
Mẫu Thông Báo Đẩy Số 2 :
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
padding-top: 60px; /* Đẩy nội dung trang xuống dưới để nhường chỗ cho thông báo */
}
.notification {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #ff9800;
color: white;
padding: 15px;
text-align: center;
font-size: 18px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
display: none; /* Ẩn thông báo ban đầu */
}
.notification a {
color: white;
text-decoration: underline;
margin-left: 10px;
}
.notification button {
background-color: transparent;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
}
.content {
padding: 20px;
}
</style>
<div class="notification" id="notification">
<span id="notification-content">
<span id="notification-text"></span>
<a href="#" id="notification-link">Click Xem Ngay</a>
</span>
<button id="close-btn" onclick="closeNotification()">X</button>
</div>
<script>
const notifications = [
{ text: "🎉 Gỗ tràm xẻ sấy ( 2m / 1m2 / 1m ).", link: "https://blog.khoz.vn/go-tram-xe-say-la-go-gi-mua-o-dau-uy-tin-chat-luong-ban-dang-can-tim-nha-cung-cap-ban-go-tram-gia-canh-tranh-xem-o-day" },
{ text: "🆕 Thớt Gỗ Teak Ghép Hoa Văn Cao Cấp, Bền Đẹp & Thân Thiện Với Môi Trường.", link: "https://blog.khoz.vn/thot-go-teak-su-lua-chon-hoan-hao-cho-nha-bep-va-trang-tri" },
{ text: "Gỗ Ghép Giá Rẻ Ở Đâu Bán?", link: "https://blog.khoz.vn/thuat-ngu-che-bien-go-go-cong-nghiep-gia-re-la-gi-tim-mua-van-mdf-okal-plywood-go-ghep-gia-re-o-dau" },
{ text: "Cần Tìm Xưởng Gia Công Xẻ Sấy, Gỗ Ghép, Thớt Gỗ,", link: "https://blog.khoz.vn/gia-cong-go-la-gi-can-tim-xuong-gia-cong-xe-say-go-ghep-thot-go-mat-ban-chi-tiet-moc-tai-binh-duong-o-dau-uy-tin-chat-luong" }
];
let currentNotification = 0;
let notificationInterval;
window.onload = function() {
displayNotification();
notificationInterval = setInterval(displayNextNotification, 10000);
};
function displayNotification() {
const notification = document.getElementById('notification');
const notificationText = document.getElementById('notification-text');
const notificationLink = document.getElementById('notification-link');
notificationText.textContent = notifications[currentNotification].text;
notificationLink.href = notifications[currentNotification].link;
// Hiển thị thông báo
notification.style.display = 'flex';
}
function displayNextNotification() {
currentNotification = (currentNotification + 1) % notifications.length;
displayNotification();
}
function closeNotification() {
const notification = document.getElementById('notification');
notification.style.display = 'none';
clearInterval(notificationInterval);
}
</script>
Mẫu 3 - Fix Lỗi Số 2 " Đưa layout trở về vị trí cũ ":
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
padding-top: 60px; /* Đẩy nội dung trang xuống dưới để nhường chỗ cho thông báo */
transition: padding-top 0.3s ease; /* Hiệu ứng mượt mà khi thay đổi vị trí layout */
}
.notification {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #ff9800;
color: white;
padding: 15px;
text-align: center;
font-size: 18px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
display: none; /* Ẩn thông báo ban đầu */
}
.notification a {
color: white;
text-decoration: underline;
margin-left: 10px;
}
.notification button {
background-color: transparent;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
}
.content {
padding: 20px;
}
</style>
<div class="notification" id="notification">
<span id="notification-content">
<span id="notification-text"></span>
<a href="#" id="notification-link">Click Xem Ngay</a>
</span>
<button id="close-btn" onclick="closeNotification()">X</button>
</div>
<script>
const notifications = [
{ text: "🎉 Gỗ tràm xẻ sấy ( 2m / 1m2 / 1m ).", link: "https://blog.khoz.vn/go-tram-xe-say-la-go-gi-mua-o-dau-uy-tin-chat-luong-ban-dang-can-tim-nha-cung-cap-ban-go-tram-gia-canh-tranh-xem-o-day" },
{ text: "🆕 Thớt Gỗ Teak Ghép Hoa Văn Cao Cấp, Bền Đẹp & Thân Thiện Với Môi Trường.", link: "https://blog.khoz.vn/thot-go-teak-su-lua-chon-hoan-hao-cho-nha-bep-va-trang-tri" },
{ text: "Gỗ Ghép Giá Rẻ Ở Đâu Bán?", link: "https://blog.khoz.vn/thuat-ngu-che-bien-go-go-cong-nghiep-gia-re-la-gi-tim-mua-van-mdf-okal-plywood-go-ghep-gia-re-o-dau" },
{ text: "Cần Tìm Xưởng Gia Công Xẻ Sấy, Gỗ Ghép, Thớt Gỗ,", link: "https://blog.khoz.vn/gia-cong-go-la-gi-can-tim-xuong-gia-cong-xe-say-go-ghep-thot-go-mat-ban-chi-tiet-moc-tai-binh-duong-o-dau-uy-tin-chat-luong" }
];
let currentNotification = 0;
let notificationInterval;
window.onload = function() {
displayNotification();
notificationInterval = setInterval(displayNextNotification, 10000);
};
function displayNotification() {
const notification = document.getElementById('notification');
const notificationText = document.getElementById('notification-text');
const notificationLink = document.getElementById('notification-link');
notificationText.textContent = notifications[currentNotification].text;
notificationLink.href = notifications[currentNotification].link;
// Hiển thị thông báo
notification.style.display = 'flex';
document.body.style.paddingTop = '60px'; // Đẩy nội dung trang xuống dưới để nhường chỗ cho thông báo
}
function displayNextNotification() {
currentNotification = (currentNotification + 1) % notifications.length;
displayNotification();
}
function closeNotification() {
const notification = document.getElementById('notification');
notification.style.display = 'none';
document.body.style.paddingTop = '0'; // Đưa layout trở về vị trí cũ
clearInterval(notificationInterval);
}
</script>
Mẫu Số 4 : Thông Báo Đẩy Cố Định [ Sticky In-App Push Notifications ] Hiển Thị Ngẫu Nhiên Không Theo Thứ Tự Sắp Xếp.
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
transition: padding-top 0.3s ease; /* Hiệu ứng mượt mà khi thay đổi vị trí layout */
}
.notification {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #ff9800;
color: white;
padding: 15px;
text-align: center;
font-size: 18px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
display: none; /* Ẩn thông báo ban đầu */
}
.notification a {
color: white;
text-decoration: underline;
margin-left: 10px;
}
.notification button {
background-color: transparent;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
}
.content {
padding: 20px;
}
</style>
<div class="notification" id="notification">
<span id="notification-content">
<span id="notification-text"></span>
<a href="#" id="notification-link">...Xem Ngay</a>
</span>
<button id="close-btn">X</button>
</div>
<script>
const notifications = [
{ text: "🆕 Thớt Gỗ Teak Bền Đẹp.", link: "https://blog.khoz.vn/thot-go-teak-su-lua-chon-hoan-hao-cho-nha-bep-va-trang-tri" },
{ text: "🎉 Gỗ tràm xẻ sấy ( 2m / 1m2 / 1m ).", link: "https://blog.khoz.vn/go-tram-xe-say-la-go-gi-mua-o-dau-uy-tin-chat-luong-ban-dang-can-tim-nha-cung-cap-ban-go-tram-gia-canh-tranh-xem-o-day" },
{ text: "Xu Hướng Sống Xanh, DIY & Chiếc Thớt Gỗ Xương Cá", link: "https://blog.khoz.vn/phong-cach-moc-trong-gian-bep-xinh-xu-huong-thot-go-xuong-ca-loi-song-xanh-the-he-tieu-dung-me-diy-my-nghe-thu-cong" },
{ text: "Gỗ Tràm Bông Vàng Là Gỗ Gì?", link: "https://blog.khoz.vn/go-tram-bong-vang-la-go-gi-co-tot-khong-dung-vao-viec-gi" },
{ text: "Thanh Bào Gỗ 2 Mặt, 4 Mặt...", link: "https://blog.khoz.vn/thanh-bao-s4s-s2s-e4e-e2e-nguyen-lieu-go-khong-the-thieu-trong-thiet-ke-noi-that-gia-cong-che-bien-do-go-xuat-khau" },
{ text: "Gỗ Ghép Giá Rẻ Ở Đâu Bán?", link: "https://blog.khoz.vn/thuat-ngu-che-bien-go-go-cong-nghiep-gia-re-la-gi-tim-mua-van-mdf-okal-plywood-go-ghep-gia-re-o-dau" },
{ text: "Cần Tìm Xưởng Gia Công Xẻ Sấy, Gỗ Ghép, Thớt Gỗ,", link: "https://blog.khoz.vn/gia-cong-go-la-gi-can-tim-xuong-gia-cong-xe-say-go-ghep-thot-go-mat-ban-chi-tiet-moc-tai-binh-duong-o-dau-uy-tin-chat-luong" }
];
let notificationInterval;
window.onload = function() {
document.body.style.paddingTop = '60px'; // Đẩy nội dung trang xuống dưới để nhường chỗ cho thông báo
displayRandomNotification();
notificationInterval = setInterval(displayRandomNotification, 10000);
document.getElementById('close-btn').addEventListener('click', closeNotification);
};
function displayRandomNotification() {
const notification = document.getElementById('notification');
const notificationText = document.getElementById('notification-text');
const notificationLink = document.getElementById('notification-link');
const randomIndex = Math.floor(Math.random() * notifications.length);
const selectedNotification = notifications[randomIndex];
notificationText.textContent = selectedNotification.text;
notificationLink.href = selectedNotification.link;
// Hiển thị thông báo
notification.style.display = 'flex';
}
function closeNotification() {
const notification = document.getElementById('notification');
notification.style.display = 'none';
document.body.style.paddingTop = '0'; // Đưa layout trở về vị trí cũ
clearInterval(notificationInterval);
}
</script>
Mẫu Số 5 : Làm Đẹp Cho Mẫu Số 4 :
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
transition: padding-top 0.3s ease; /* Hiệu ứng mượt mà khi thay đổi vị trí layout */
}
.notification {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: white;
color: black;
padding: 15px;
text-align: center;
font-size: 18px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
display: none; /* Ẩn thông báo ban đầu */
}
.notification a {
color: black;
text-decoration: underline;
margin-left: 10px;
}
.notification button {
background-color: transparent;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
}
.content {
padding: 20px;
}
</style>
<center>
<div class="notification" id="notification">
<span id="notification-content">
<span id="notification-text"></span>
<a href="#" id="notification-link">
👉 ...Xem Ngay 👌</a>
</span>
<button id="close-btn">❌</button>
</div>
</center>
<script>
const notifications = [
{ text: "🆕 Thớt Gỗ Teak Bền Đẹp.", link: "https://blog.khoz.vn/thot-go-teak-su-lua-chon-hoan-hao-cho-nha-bep-va-trang-tri" },
{ text: "📢 Gỗ tràm xẻ sấy ( 2m / 1m2 / 1m ).", link: "https://blog.khoz.vn/go-tram-xe-say-la-go-gi-mua-o-dau-uy-tin-chat-luong-ban-dang-can-tim-nha-cung-cap-ban-go-tram-gia-canh-tranh-xem-o-day" },
{ text: "📢 Xu Hướng Sống Xanh, DIY & Chiếc Thớt Gỗ Xương Cá", link: "https://blog.khoz.vn/phong-cach-moc-trong-gian-bep-xinh-xu-huong-thot-go-xuong-ca-loi-song-xanh-the-he-tieu-dung-me-diy-my-nghe-thu-cong" },
{ text: "📢 Gỗ Tràm Bông Vàng Là Gỗ Gì?", link: "https://blog.khoz.vn/go-tram-bong-vang-la-go-gi-co-tot-khong-dung-vao-viec-gi" },
{ text: "📢 Thanh Bào Gỗ 2 Mặt, 4 Mặt...", link: "https://blog.khoz.vn/thanh-bao-s4s-s2s-e4e-e2e-nguyen-lieu-go-khong-the-thieu-trong-thiet-ke-noi-that-gia-cong-che-bien-do-go-xuat-khau" },
{ text: "📢 Gỗ Ghép Giá Rẻ Ở Đâu Bán?", link: "https://blog.khoz.vn/thuat-ngu-che-bien-go-go-cong-nghiep-gia-re-la-gi-tim-mua-van-mdf-okal-plywood-go-ghep-gia-re-o-dau" },
{ text: "📢 Đũa Gỗ, Đũa Nhựa, Đũa Inox", link: "https://blog.khoz.vn/dua-go-dua-nhua-dua-inox-su-khac-biet-doc-dao-cua-dua-an-truyen-thong-tinh-hoa-han-quoc-hay-gia-re" },
{ text: "📢 Khay Gỗ Decor", link: "https://blog.khoz.vn/khay-go-decor-su-lua-chon-hoan-hao-cho-nha-hang-va-la-phu-kien-tuyet-voi-de-chup-anh" },
{ text: "📢 Cần Tìm Xưởng Gia Công Xẻ Sấy, Gỗ Ghép, Thớt Gỗ,", link: "https://blog.khoz.vn/gia-cong-go-la-gi-can-tim-xuong-gia-cong-xe-say-go-ghep-thot-go-mat-ban-chi-tiet-moc-tai-binh-duong-o-dau-uy-tin-chat-luong" }
];
let notificationInterval;
window.onload = function() {
document.body.style.paddingTop = '60px'; // Đẩy nội dung trang xuống dưới để nhường chỗ cho thông báo
displayRandomNotification();
notificationInterval = setInterval(displayRandomNotification, 10000);
document.getElementById('close-btn').addEventListener('click', closeNotification);
};
function displayRandomNotification() {
const notification = document.getElementById('notification');
const notificationText = document.getElementById('notification-text');
const notificationLink = document.getElementById('notification-link');
const randomIndex = Math.floor(Math.random() * notifications.length);
const selectedNotification = notifications[randomIndex];
notificationText.textContent = selectedNotification.text;
notificationLink.href = selectedNotification.link;
// Hiển thị thông báo
notification.style.display = 'flex';
}
function closeNotification() {
const notification = document.getElementById('notification');
notification.style.display = 'none';
document.body.style.paddingTop = '0'; // Đưa layout trở về vị trí cũ
clearInterval(notificationInterval);
}
</script>
/=========Kết Thúc Mẫu In-App Push Notifications Trên Blog Của Tui ==========/
</> THAM KHẢO THÊM :
/=========Mẫu In-App Push Notifications Tham Khảo Thêm ==========/
Nội Dung Đang Được Cập Nhật....
/=========Kết Thúc Mẫu In-App Push Notifications Tham Khảo Thêm ==========/
</> Mẫu In-App Push Notifications Nâng Cao
/=========Mẫu In-App Push Notifications Tham Khảo Thêm ==========/
Mẫu Số 1 : Sticky , Kiểm Tra Danh Sách Link & Hiển Thị Thông Báo Đẩy Ngẫu Nhiên Phù Hợp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Push Notifications</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
transition: padding-top 0.3s ease; /* Hiệu ứng mượt mà khi thay đổi vị trí layout */
}
.notification {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #ff9800;
color: white;
padding: 15px;
text-align: center;
font-size: 18px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
display: none; /* Ẩn thông báo ban đầu */
}
.notification a {
color: white;
text-decoration: underline;
margin-left: 10px;
}
.notification button {
background-color: transparent;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
}
.content {
padding: 20px;
}
</style>
</head>
<body>
<div class="notification" id="notification">
<span id="notification-content">
<span id="notification-text"></span>
<a href="#" id="notification-link">Learn more</a>
</span>
<button id="close-btn">X</button>
</div>
<div class="content">
<!-- Nội dung trang web của bạn ở đây -->
<h1>Welcome to My Website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula felis ut libero euismod...</p>
</div>
<script>
const notificationsGroup1 = [
{ text: "Notification 1", link: "link1" },
{ text: "Notification 2", link: "link2" },
{ text: "Notification 3", link: "link3" }
];
const notificationsGroup2 = [
{ text: "Notification 4", link: "link4" },
{ text: "Notification 5", link: "link5" },
{ text: "Notification 6", link: "link6" }
];
const notificationsDefault = [
{ text: "Notification X", link: "linkX" },
{ text: "Notification Y", link: "linkY" },
{ text: "Notification Z", link: "linkZ" }
];
let notificationInterval;
window.onload = function() {
const selectedNotifications = getNotificationsBasedOnURL();
displayRandomNotification(selectedNotifications);
notificationInterval = setInterval(() => displayRandomNotification(selectedNotifications), 15000);
document.getElementById('close-btn').addEventListener('click', closeNotification);
};
function getNotificationsBasedOnURL() {
const currentURL = window.location.pathname; // Lấy đường dẫn hiện tại của trang
if (currentURL.includes("link1") || currentURL.includes("link2") || currentURL.includes("link3")) {
return notificationsGroup1;
} else if (currentURL.includes("link4") || currentURL.includes("link5") || currentURL.includes("link6")) {
return notificationsGroup2;
} else {
return notificationsDefault;
}
}
function displayRandomNotification(notifications) {
const notification = document.getElementById('notification');
const notificationText = document.getElementById('notification-text');
const notificationLink = document.getElementById('notification-link');
const randomIndex = Math.floor(Math.random() * notifications.length);
const selectedNotification = notifications[randomIndex];
notificationText.textContent = selectedNotification.text;
notificationLink.href = selectedNotification.link;
// Hiển thị thông báo
notification.style.display = 'flex';
document.body.style.paddingTop = '60px'; // Đẩy nội dung trang xuống dưới để nhường chỗ cho thông báo
}
function closeNotification() {
const notification = document.getElementById('notification');
notification.style.display = 'none';
document.body.style.paddingTop = '0'; // Đưa layout trở về vị trí cũ
clearInterval(notificationInterval);
}
</script>
</body>
</html>
Mẫu Số 2 : Hiển Thị Random Ngẫu Nhiên Không Theo Thứ Tự :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Push Notifications</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
transition: padding-top 0.3s ease; /* Hiệu ứng mượt mà khi thay đổi vị trí layout */
}
.notification {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #ff9800;
color: white;
padding: 15px;
text-align: center;
font-size: 18px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
display: none; /* Ẩn thông báo ban đầu */
}
.notification a {
color: white;
text-decoration: underline;
margin-left: 10px;
}
.notification button {
background-color: transparent;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
}
.content {
padding: 20px;
}
</style>
</head>
<body>
<div class="notification" id="notification">
<span id="notification-content">
<span id="notification-text"></span>
<a href="#" id="notification-link">Learn more</a>
</span>
<button id="close-btn">X</button>
</div>
<div class="content">
<!-- Nội dung trang web của bạn ở đây -->
<h1>Welcome to My Website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula felis ut libero euismod...</p>
</div>
<script>
const notifications = [
{ text: "This is the first notification!", link: "#" },
{ text: "Don't miss out on our new offers!", link: "#" },
{ text: "Check out our latest blog post!", link: "#" },
{ text: "Subscribe to our newsletter for more updates!", link: "#" }
];
let notificationInterval;
window.onload = function() {
document.body.style.paddingTop = '60px'; // Đẩy nội dung trang xuống dưới để nhường chỗ cho thông báo
displayRandomNotification();
notificationInterval = setInterval(displayRandomNotification, 10000);
document.getElementById('close-btn').addEventListener('click', closeNotification);
};
function displayRandomNotification() {
const notification = document.getElementById('notification');
const notificationText = document.getElementById('notification-text');
const notificationLink = document.getElementById('notification-link');
const randomIndex = Math.floor(Math.random() * notifications.length);
const selectedNotification = notifications[randomIndex];
notificationText.textContent = selectedNotification.text;
notificationLink.href = selectedNotification.link;
// Hiển thị thông báo
notification.style.display = 'flex';
}
function closeNotification() {
const notification = document.getElementById('notification');
notification.style.display = 'none';
document.body.style.paddingTop = '0'; // Đưa layout trở về vị trí cũ
clearInterval(notificationInterval);
}
</script>
</body>
</html>
Kết Luận
Việc ứng dụng HTML trong ngành gỗ, kết hợp với các công nghệ tiên tiến như In-App Push Notifications và Native Advertising, không chỉ giúp tối ưu hóa trải nghiệm người dùng mà còn nâng cao hiệu quả quảng cáo và thứ hạng SEO của website. Một Layout và UX/UI Design được tối ưu sẽ là cầu nối quan trọng giữa sản phẩm và khách hàng, giúp doanh nghiệp bạn nổi bật trên thị trường ngày càng cạnh tranh. 🌟
👉 Hãy bắt đầu tối ưu hóa website của bạn ngay hôm nay, để không bỏ lỡ cơ hội trở thành người dẫn đầu trong ngành gỗ!
