";var nuttaibut = "<\/i> T\u1ea3i th\u00eam<\/span>"; Code thông báo popup xuất hiện khi truy cập vào trang web Trang chủGiới thiệuBlogPhần mềmThủ thuậtTiện íchRút gọn liên kếtVòng quay may mắnLiên hệ HomePhần mềmCode thông báo popup xuất hiện khi truy cập vào trang web Nguyễn Văn Luyến 4 năm trướcCode thông báo popup xuất hiện khi truy cập vào trang web Mục lụcCác bạn truy cập vào trang web caodem.com thì sẽ thấy xuất hiện một bảng thông báo popup với bốn góc bo tròn, tông màu đen, trong rất chuyên nghiệp phải không?. Thì đây chính là popup được mình thêm vào, để giúp cho người dùng có thể dễ dàng nhận được những thông báo cực kỳ quan trọng mà không phải bỏ lỡ. Và dưới đây là cách để tạo ra một bảng thông báo popup đơn giãn và cực kỳ nhẹ nhàng mà không cần sử dụng đến plugin.Bước 1Đầu tiên các bạn cần mở file header.php trong thư mục theme mà bạn đang sử dụng lên.Tìm tới thẻ mở các bạn thêm vào cho mình đoạn codeonload="thongbaopopup()" và lúc này thẻ mở body của bạn sẽBước 2Mở file footer.php trong thư mục theme mà bạn đang sử dụng lên và thêm vào đoạn code bên dưới, ngay trên thẻ đóng .×Xin chàoCảm ơn bạn đã ghé thăm trang web của mình, chúc bạn một ngày mới vui vẽ và tràn đầy hạnh phúc!Chú ý: với đoạn code ở trên, bạn hãy thay đổi nội dung thông báo theo nhu cầu của mình nhé.Tiếp tục thêm đoạn code bên dưới, ngay dưới thẻ đóng .Code thêm đúng như hình trên là ok nhé.Bước 3Cuối cùng bạn mở file style.css trong thư mục theme mà bạn đang sử dụng lên và thêm vào đoạn code bên dưới./* Thong bao Popup */.tbpopup .tboverlay {position:fixed;top:0px;left:0px;width:100vw;height:100vh;background:rgba(0,0,0,0.7);z-index:1;display:none;}.tbpopup .tbcontent {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);background:#fff;max-width:500px;z-index:2;text-align:center;padding:20px;box-sizing:border-box;font-family:"Open Sans",sans-serif;border-radius:20px;display: block;position: fixed;box-shadow:0px 0px 10px #111;}@media (max-width: 700px) {.tbpopup .tbcontent {width:90%;}}.tbpopup .tbclose-btn {cursor:pointer;position:absolute;right:20px;top:20px;width:35px;height:35px;color:#ff4444;font-size:30px;font-weight:600;line-height:35px;text-align:center;border-radius:50%;}.tbpopup.active .tboverlay {display:block;}.tbpopup.active .tbcontent {transition:all 300ms ease-in-out;transform:translate(-50%,-50%) scale(1);}.tbbuttom{background:#00cc00;color:#fff}Và sau khi đã thêm 3 bước như trên, xóa cache của plugin tăng tốc WordPress nếu có, nhấn CTRL + F5 để trình duyệt tải lại trang web của bạn và xem kết quả nhé!Lưu ý quan trọng: Với cách làm này thì popup thông báo sẽ xuất hiện ở tất cả các trang trên trang web của bạn. Nếu bạn chỉ muốn popup chỉ hiển thị duy nhất ở trang chủ, thì thêm đoạn code ở bước 2 vào trong thẻ if bên dưới. .. code .. Code sau khi thêm vào sẽ có dạng như sau:×Xin chàoCảm ơn bạn đã ghé thăm trang web của mình, chúc bạn một ngày mới vui vẽ và tràn đầy hạnh phúc!Như vậy là mình đã hướng dẫn xong cách để thêm một popup thông báo vào website WordPress rồi đó. Chúc bạn thành công!Nguồn: //caodem.com/code-thong-bao-popup-xut-hin-khi-truy-cp-vao-trang-web/Thẻ: Code hay • Wordpress40 lượt xem | 0 bình luận Nguyễn Văn LuyếnLuôn luôn lắng nghe, lâu lâu mới hiểu Đề xuất cho bạnHướng dẫn sử dụng công cụ ký số văn bản theo Nghị định 30/2020/NĐ-CP 3 tháng trướcPhần mềm Winamp phần mềm phát nhạc một thời đã “hồi sinh” 3 tháng trướcPhần mềm chụp màn hình và ghi chú nhanh Snap IT 7 tháng trướcvnTools – Công cụ hỗ trợ chuyển chữ hoa, chữ thường, đọc số thành số…. 8 tháng trướcQuy định mới về đào tạo lái xe hạng B1, B2, C áp dụng từ ngày 1.6.2024 8 tháng trướcỨng dụng Mô phỏng 120 tình huống giao thông trên điện thoại V2.0.0 11 tháng trướcBộ cài đặt phần mềm ÔN TẬP MÔ PHỎNG phiên bản V2.0.0 11 tháng trướcHướng dẫn cập nhật phần mềm ÔN TẬP MÔ PHỎNG từ phiên bản v1.2.2 lên v1.2.3 1 năm trước Razer ra mắt thêm một phiên bản mới cho dòng Blade 15 Huawei MateBook X Pro có thêm tùy chọn màu sắc Pink Gold tuyệt đẹp Liên hệ Bình luận gần đâyAddin Word xuất Mail Merge có chức năng cắt ra…Nguyễn Văn Luyến 7 tháng trướcƯng dụng này rất hay cho người hay thực hiện các biểu mâu, thư mời,...Quy định mới về đào tạo lái xe hạng B1,…Nguyễn Văn Luyến 7 tháng trướcChuẩn bị lại lên giáTiện ích tiếng Việt trên Word năm 2022 miễn phíChuyển Đổi Số 12 tháng trướcCó trang nguồn mình tải á, bạn qua trang đó xem thử. Mình cài được bình thường áFont chữ thư pháp FZ Tiểu Tự Việt HoáChuyển Đổi Số 12 tháng trướcMỉnh cũng thấy cái gì hay hay lưu lại trên trang cá nhân khi nào cần lấy ra dùng thôi à. Cảm ơn bạn nhiều!Font chữ thư pháp FZ Tiểu Tự Việt Hoáquang tuấn 12 tháng trướcok cám ơn addTiện ích tiếng Việt trên Word năm 2022 miễn phíĐàm kiên 1 năm trướcsao không thấy hướng dẫn khắc phục lỗi the macro vậyTiện ích tiếng Việt trên Word năm 2022 miễn phíĐàm kiên 1 năm trướcfile tải về chỉ có 3 file hướng dẫn chứ không có file cài đặt nhéGoogle tung dấu tick xanh trong GmailNguyễn Văn Luyến 2 năm trướcBài viết hay Có nhiều lượt xemNewspaper v9.0 Premium WordPress Themes1385 lượt xemBộ cài đặt phần mềm ÔN TẬP MÔ PHỎNG phiên bản V2.0.01313 lượt xemTiện ích tiếng Việt trên Word năm 2022 miễn phí1180 lượt xemAddin Word xuất Mail Merge có chức năng cắt ra nhiều file và gửi mail798 lượt xemFont chữ thư pháp FZ Tiểu Tự Việt Hoá712 lượt xemZaloMessengerEmailZaloMessengerEmail Trang chủ Zalo Hỗ trợ Messenger Liên hệ Đồng ý Cookie Trang web này sử dụng Cookie để nâng cao trải nghiệm duyệt web của bạn và cung cấp các đề xuất được cá nhân hóa. Bằng cách chấp nhận để sử dụng trang web của chúng tôi Tôi chấp nhận
Các bạn truy cập vào trang web caodem.com thì sẽ thấy xuất hiện một bảng thông báo popup với bốn góc bo tròn, tông màu đen, trong rất chuyên nghiệp phải không?. Thì đây chính là popup được mình thêm vào, để giúp cho người dùng có thể dễ dàng nhận được những thông báo cực kỳ quan trọng mà không phải bỏ lỡ. Và dưới đây là cách để tạo ra một bảng thông báo popup đơn giãn và cực kỳ nhẹ nhàng mà không cần sử dụng đến plugin.
onload="thongbaopopup()"
và lúc này thẻ mở body của bạn sẽ
Mở file footer.php trong thư mục theme mà bạn đang sử dụng lên và thêm vào đoạn code bên dưới, ngay trên thẻ đóng .
×Xin chàoCảm ơn bạn đã ghé thăm trang web của mình, chúc bạn một ngày mới vui vẽ và tràn đầy hạnh phúc!
Cảm ơn bạn đã ghé thăm trang web của mình, chúc bạn một ngày mới vui vẽ và tràn đầy hạnh phúc!
Chú ý: với đoạn code ở trên, bạn hãy thay đổi nội dung thông báo theo nhu cầu của mình nhé.
Tiếp tục thêm đoạn code bên dưới, ngay dưới thẻ đóng .
Cuối cùng bạn mở file style.css trong thư mục theme mà bạn đang sử dụng lên và thêm vào đoạn code bên dưới.
/* Thong bao Popup */.tbpopup .tboverlay {position:fixed;top:0px;left:0px;width:100vw;height:100vh;background:rgba(0,0,0,0.7);z-index:1;display:none;}.tbpopup .tbcontent {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);background:#fff;max-width:500px;z-index:2;text-align:center;padding:20px;box-sizing:border-box;font-family:"Open Sans",sans-serif;border-radius:20px;display: block;position: fixed;box-shadow:0px 0px 10px #111;}@media (max-width: 700px) {.tbpopup .tbcontent {width:90%;}}.tbpopup .tbclose-btn {cursor:pointer;position:absolute;right:20px;top:20px;width:35px;height:35px;color:#ff4444;font-size:30px;font-weight:600;line-height:35px;text-align:center;border-radius:50%;}.tbpopup.active .tboverlay {display:block;}.tbpopup.active .tbcontent {transition:all 300ms ease-in-out;transform:translate(-50%,-50%) scale(1);}.tbbuttom{background:#00cc00;color:#fff}
.tbpopup .tbcontent {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);background:#fff;max-width:500px;z-index:2;text-align:center;padding:20px;box-sizing:border-box;font-family:"Open Sans",sans-serif;border-radius:20px;display: block;position: fixed;box-shadow:0px 0px 10px #111;}@media (max-width: 700px) {.tbpopup .tbcontent {width:90%;}}
.tbpopup .tbclose-btn {cursor:pointer;position:absolute;right:20px;top:20px;width:35px;height:35px;color:#ff4444;font-size:30px;font-weight:600;line-height:35px;text-align:center;border-radius:50%;}
.tbpopup.active .tboverlay {display:block;}
.tbpopup.active .tbcontent {transition:all 300ms ease-in-out;transform:translate(-50%,-50%) scale(1);}.tbbuttom{background:#00cc00;color:#fff}
Lưu ý quan trọng: Với cách làm này thì popup thông báo sẽ xuất hiện ở tất cả các trang trên trang web của bạn. Nếu bạn chỉ muốn popup chỉ hiển thị duy nhất ở trang chủ, thì thêm đoạn code ở bước 2 vào trong thẻ if bên dưới. .. code .. Code sau khi thêm vào sẽ có dạng như sau:
Như vậy là mình đã hướng dẫn xong cách để thêm một popup thông báo vào website WordPress rồi đó. Chúc bạn thành công!
Nguồn: //caodem.com/code-thong-bao-popup-xut-hin-khi-truy-cp-vao-trang-web/