Tạo note bar trên phần đầu website

Tính năng tạo wellcome bar ở header sẻ giúp bạn gửi thông báo đến độc giả nhanh hơn hiệu quả và focus vào nội dung mà bạn muốn tùy ý mà không cần popup hoặc cách thức khác làm phiền tới độc giả.


Tạo note thông báo trên phần đầu website

> Tạo ngôi sao rich snippets chuẩn html5
> [Services] Tối ưu SEO blogspot và fix lỗi w3c

Bắt đầu tạo note bar hiển thị header website.

Demo tạo note bar trên phần đầu website <

>CSS

Vào chỉnh sửa HTML tìm đến ]]></b:skin> hoặc </style> ,tiếp theo thêm đoạn code sau vào sau đoạn mã mà bạn tìm được
#welcome_bar{width:auto;height:auto;display:block;text-align:center;line-height:1.6em;padding:8px 20px;background:#ff847e;color:#fff;position:relative;margin:0 auto;font-weight:normal}
#welcome_bar a{background:#3B81DE;color:#fff;padding:0 6px;border:1px solid transparent;border-radius:4px;font-weight:bold;}
#close_welcome_bar {display:inline-block;cursor:pointer;padding:0 4px;position:absolute;top:0px;right:5px;font-weight:bold;font-size:18px}

> HTML

Bạn thêm đoạn html này vào widget HTML/JAVASCRIPT hoặc trước phần </BODY>
<div id='welcome_bar'> Cập nhật nội dung mới nhất từ tips24h.net <a href='#URL'>Chi tiết</a>
<span data-target='#welcome_bar' id='close_welcome_bar'>&#215;</span> </div>

> JS

Thêm đoạn code này vào trước </BODY> hoặc widget HTML/JAVASCRIPT
<script type='text/javascript'> //<![CDATA[ var button=document.querySelector("#close_welcome_bar");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="none"==t.style.display?"block":"none"}); //]]> </script>
Hy vọng bài viết hướng dẫn tạo note bar trên phần đầu website sẻ giúp ích cho nhiều người.
Donate MoMo: 035.45.48.599
Bài đăng mới hơn Bài đăng mới hơn Bài đăng cũ hơn Bài đăng cũ hơn

Bài đăng khác

Nhận xét

Đăng nhận xét