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.