Tạo thanh Thông báo với hiệu ứng Chạy chữ - Marquee Notification Bar gọn nhẹ bằng CSS

Add Marquee Notification Bar to Blogger

Widget Thông báo là một trong những tiện ích phổ biến trong Blogger. Nó cũng giúp tăng lượng truy cập cho blog bạn bằng cách tăng số lượt xem trang khi click vào link thông báo. Trong bài này Iris Tips sẽ chia sẻ cho các bạn cách tạo thanh Notification cùng hiệu ứng động với sự hỗ trợ của tag marquee.

CSS

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS dưới đây vào trước thẻ ]]></b:skin>

#wcnot-cont{top:0;left:0;z-index:9999999;position:fixed;width:100%;background:#222222;color:#ffffff;font:16px georgia;box-shadow:2px 2px 5px  #444444;-moz-box-shadow:2px 2px 5px  #444444;-web-kit-box-shadow:2px 2px 5px  #444444;-goog-ms-box-shadow:2px 2px 5px  #444444}
#wc-movtext{text-align:center;padding:8px;font-family:Verdana,"Times New Roman",Georgia,Serif;font-size:12px;color:#ffffff}
#wc-movtext a{color:#ffffff;text-decoration:none;font:16px georgia}
#wc-movtext a:hover{color:yellow;text-decoration:none}

HTML

2Trở lại Bố cục >> Thêm tiện ích HTML/Javascript và chọn 1 trong 2 style sau:

2a. Style 1

• DEMO

<div id='wcnot-cont'>
<div id="wc-movtext">
<marquee  behavior='alternate' direction="left"
            onmouseover="this.stop();"
            onmouseout="this.start();">

<p>
<a href='http://iris-tips.blogspot.com/'>Thông báo 1</a> | 
<a href='http://iris-tips.blogspot.com/'>Thông báo 2</a> | 
<a href='http://iris-tips.blogspot.com/'>Thông báo 3</a> | 
<a href='http://iris-tips.blogspot.com/'>Thông báo 4</a>
</p>
</marquee>
</div>
<div>

2b. Style 2

• DEMO

<div id='wcnot-cont'>
<div id="wc-movtext">
<marquee direction="left"
            onmouseover="this.stop();"
            onmouseout="this.start();">

<p>
<a href='http://iris-tips.blogspot.com/'>Thông báo 1</a> | 
<a href='http://iris-tips.blogspot.com/'>Thông báo 2</a> | 
<a href='http://iris-tips.blogspot.com/'>Thông báo 3</a> | 
<a href='http://iris-tips.blogspot.com/'>Thông báo 4</a>
</p>
</marquee>
</div>
<div>

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by w2b/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm