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 tới độc giả Cấp Tốc hơn hiệu suất cao và focus vào nội dung mà bạn muốn tùy ý mà không cần popup hoặc vẻ ngoài 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 fix HTML tìm tới ]]></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 tiên tiến nhất từ seocucre.com <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 post hướng dẫn tạo note bar trên phần đầu website sẻ giúp ích cho nhiều người.