Blogger
TẠO THANH THÔNG BÁO ĐẸP VÀ ĐƠN GIẢN CÓ NÚT TẮT CHO BLOGSPOT
Chào các bạn, bài viết trước đó, mình đã giới thiệu cho các bạn một mẫu popup thông báo nhỏ nằm dưới góc màn hình. Có lẽ nó vẫn chưa đủ đẹp mắt, vì vậy bài viết hôm này Bờm Khùng sẽ chia sẻ đến các b…
Chào các bạn, bài viết trước đó, mình đã giới thiệu cho các bạn một mẫu popup thông báo nhỏ nằm dưới góc màn hình. Có lẽ nó vẫn chưa đủ đẹp mắt, vì vậy bài viết hôm này Bờm Khùng sẽ chia sẻ đến các bạn mẫu thanh thông báo đẹp hơn, màu đỏ đính trên đầu trang web có kèm nút X để tắt.
Cách thực hiện
Bước 1. Chèn CSS vào trước ]]></b:skin>
Bước 2. Chèn script trước thẻ </head>
Bước 3. Chèn HTML vào sau thẻ <body>
Tổng kết
Với vài đoạn code ngắn, bạn đã có thêm một thanh thông báo khá đẹp và đơn giản, không nặng, không ảnh hưởng đến tốc độ load trang. Thanh thông báo này rất phù hợp cho những blog đang cần tuyển cộng tác viên, thông báo bán blog, bán template,... chẳng hạn. Chúc bạn thành công!
DEMO TẠI BÀI VIẾT NÀY CHO MỌI NGƯỜI
Cách thực hiện
Bước 1. Chèn CSS vào trước ]]></b:skin>
#closeelement { position: fixed; z-index: 9999999; top: 0; left: 0; padding: 15px; background: #ff6c6c; color: #fff; width: 100%; max-width: 100%; font: 400 18px Roboto; text-align: center; transition: .5s; box-sizing: border-box; letter-spacing: -.5px; }
#closeelement a { background: rgba(0,0,0,.1); color: #fff; padding: 15px 25px; position: absolute; right: 0; top: 0; }
Bước 2. Chèn script trước thẻ </head>
<script type='text/javascript'>
function closeelement(){
div = document.getElementById("closeelement");div.style.display="none";}
setTimeout(closeelement, 9999999);
</script>
Bước 3. Chèn HTML vào sau thẻ <body>
<div id='closeelement'><a href='javascript:closeelement();'><i class='fa fa-times'/></a>Đây là demo, bấm vào button bên phải để tắt!<br/><b>bacsiwindows.com</b></div>
Tổng kết
Với vài đoạn code ngắn, bạn đã có thêm một thanh thông báo khá đẹp và đơn giản, không nặng, không ảnh hưởng đến tốc độ load trang. Thanh thông báo này rất phù hợp cho những blog đang cần tuyển cộng tác viên, thông báo bán blog, bán template,... chẳng hạn. Chúc bạn thành công!
DEMO TẠI BÀI VIẾT NÀY CHO MỌI NGƯỜI
Related post
Hung.Pro.VN
Nhà thiết kế WebTôi là admin trang Hung.Pro.VN là một người có đam mê với Blogspot, kinh nghiệm 5 năm thiết kế ra hàng trăm mẫu Template blogpsot như" Bán hàng, bất động sản, landing page, tin tức...
Nhận xét
Đăng nhận xét