Hướng dẫn thông báo css

Question

Nội dung chính Show

Bài cùng chủ đề
Bình luận
# HTML Code
# Chức năng đóng thanh thông báo
Kết luận

Không cần phải dùng đến hình ảnh, bạn vẫn có thể tạo được những thông báo đẹp mắt cho website với những tính năng của CSS.

1

Đầu tiên các bạn dùng đoạn mã HTML sau với nội dung thông báo muốn hiển thị

<div class="chat-bubble">
	Cảm ơn các bạn đã ghé thăm vnHow! Chúc các bạn một ngày vui vẻ :)
  <div class="chat-bubble-arrow-border"></div>
  <div class="chat-bubble-arrow"></div>
</div>

2

Tiếp theo chúng ta sử dụng đoạn CSS sau để định dạng cho thông báo

.chat-bubble {
  background-color:#EDEDED;
  border:2px solid #666666;
  font-size:35px;
  line-height:1.3em;
  margin:10px auto;
  padding:10px;
  position:relative;
  text-align:center;
  width:300px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -moz-box-shadow:0 0 5px #888888;
  -webkit-box-shadow:0 0 5px #888888;
}
.chat-bubble-arrow-border {
  border-color: #666666 transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom:-22px;
  left:30px;
}
.chat-bubble-arrow {
  border-color: #EDEDED transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom:-19px;
  left:30px;
}

3

Toàn bộ đoạn mã như sau

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
			.chat-bubble {
			  background-color:#EDEDED;
			  border:2px solid #666666;
			  font-size:35px;
			  line-height:1.3em;
			  margin:10px auto;
			  padding:10px;
			  position:relative;
			  text-align:center;
			  width:300px;
			  -moz-border-radius:10px;
			  -webkit-border-radius:10px;
			  -moz-box-shadow:0 0 5px #888888;
			  -webkit-box-shadow:0 0 5px #888888;
			}
			.chat-bubble-arrow-border {
			  border-color: #666666 transparent transparent transparent;
			  border-style: solid;
			  border-width: 10px;
			  height:0;
			  width:0;
			  position:absolute;
			  bottom:-22px;
			  left:30px;
			}
			.chat-bubble-arrow {
			  border-color: #EDEDED transparent transparent transparent;
			  border-style: solid;
			  border-width: 10px;
			  height:0;
			  width:0;
			  position:absolute;
			  bottom:-19px;
			  left:30px;
			}
		</style>
	</head>
	<body>
		<div class="chat-bubble">
			Cảm ơn các bạn đã ghé thăm vnHow! Chúc các bạn một ngày vui vẻ :)
		  <div class="chat-bubble-arrow-border"></div>
		  <div class="chat-bubble-arrow"></div>
		</div>
	</body>
</html>

4

Lưu lại đoạn mã trên vào một file chẳng hạn index.html và chạy để thấy kết quả.

5

Đoạn mã trên không chạy được trên IE6 do IE6 không hỗ trợ border transparent, để khắc phục điều này bạn thêm vào đoạn CSS sau

/* IE6 */
.chat-bubble-arrow {
    _border-left-color: pink;
    _border-bottom-color: pink;
    _border-right-color: pink;
    _filter: chroma(color=pink);
}

Bài cùng chủ đề

Bình luận

# QUÀ TẶNG VÀ KHUYẾN MẠI

Đăng ký tên miền tên miền .com chỉ 199k: TẠI ĐÂY

Hosting giá rẻ chất lượng cao chỉ 49k/tháng: TẠI ĐÂY

Cloud VPS giá rẻ chất lượng cao chỉ 120k/tháng: TẠI ĐÂY

Website giá rẻ chỉ 2.388k: TẠI ĐÂY

Nội dung chính

Tạo thanh thông báo bằng HTML và CSS cho WordPress
- # HTML Code
- # CSS Code
- # Chức năng đóng thanh thông báo
Kết luận

Tạo thanh thông báo bằng HTML và CSS cho WordPress là cách tốt nhất để hướng khách truy cập của bạn và quảng bá nội dung quan trọng nhất của trang web. Sử dụng thanh thông báo trên cùng để quảng cáo sản phẩm hoặc hiển thị thông báo quan trọng để đạt được phạm vi tiếp cận tối đa. Trong hướng dẫn này, BLog thủ thuật máy tính f4vnn sẽ chỉ cho bạn cách tạo thanh thanh thông báo cho trang web của bạn.

Trước khi bạn bắt đầu tạo thanh thông báo trên cùng, hãy xem một số lợi ích của việc đặt Hello Bar vào trang web của bạn.

Quảng bá sản phẩm để bán được nhiều hơn.
Tăng lượt thích trên mạng xã hội bằng cách đặt các nút trên mạng xã hội.
Hiển thị tin tức và sự kiện để thu hút khách truy cập.
Tăng người đăng ký bằng cách cung cấp biểu mẫu đăng ký.

Rất dễ dàng tạo thanh thông báo bằng HTML và CSS cho WordPress. Ngoài ra, bạn có thể sử dụng jQuery để thêm chức năng đóng trên thanh điều hướng trên cùng. Ở đây, chúng tôi sẽ cung cấp một tập lệnh đơn giản để thêm thanh thông báo trên cùng vào trang web bằng HTML, CSS và jQuery.

# HTML Code

HTML sau đây hiển thị một thanh thông báo cố định ở đầu trang web với biểu tượng đóng.

<div id="hellobar-bar" class="regular closable">
    <div class="hb-content-wrapper">
        <div class="hb-text-wrapper">
            <div class="hb-headline-text">
                <p><span>Chào mừng bạn đến với Blog thủ thuật máy tính f4vnn</span></p>
            </div>
        </div>
        <a href="https://f4vnn.com/" target="_blank" class="hb-cta hb-cta-button">
            <div class="hb-text-holder">
                <p>Truy Cập Ngay</p>
            </div>
        </a>
    </div>
    <div class="hb-close-wrapper">
        <a href="javascript:void(0);" class="icon-close">&#10006;</a>
    </div>
</div>

# CSS Code

CSS sau được sử dụng để thiết kế và tạo kiểu cho thanh thông báo trên cùng và nội dung tương đối.

body{
    margin: 0;
    padding: 0;
    width: 100%;
}
#hellobar-bar {
    font-family: "Open Sans", sans-serif;
    width: 100%;
    margin: 0;
    height: 30px;
    display: table;
    font-size: 17px;
    font-weight: 400;
    padding: .33em .5em;
    -webkit-font-smoothing: antialiased;
    color: #5c5e60;
    position: fixed;
    background-color: white;
    box-shadow: 0 1px 3px 2px rgba(0,0,0,0.15);
}
#hellobar-bar.regular {
    height: 30px;
    font-size: 14px;
    padding: .2em .5em;
}
.hb-content-wrapper {
    text-align: center;
    text-align: center;
    position: relative;
    display: table-cell;
    vertical-align: middle;
}
.hb-content-wrapper p {
    margin-top: 0;
    margin-bottom: 0;
}
.hb-text-wrapper {
    margin-right: .67em;
    display: inline-block;
    line-height: 1.3;
}
.hb-text-wrapper .hb-headline-text {
    font-size: 1em;
    display: inline-block;
    vertical-align: middle;
}
#hellobar-bar .hb-cta {
    display: inline-block;
    vertical-align: middle;
    margin: 5px 0;
    color: #ffffff;
    background-color: #22af73;
    border-color: #22af73
}
.hb-cta-button {
    opacity: 1;
    color: #fff;
    display: block;
    cursor: pointer;
    line-height: 1.5;
    max-width: 22.5em;
    text-align: center;
    position: relative;
    border-radius: 3px;
    white-space: nowrap;
    margin: 1.75em auto 0;
    text-decoration: none;
    padding: 0;
    overflow: hidden;
}
.hb-cta-button .hb-text-holder {
    border-radius: inherit;
    padding: 5px 15px;
}
.hb-close-wrapper {
    display: table-cell;
    width: 1.6em;
}
.hb-close-wrapper .icon-close {
    font-size: 14px;
    top: 15px;
    right: 25px;
    width: 15px;
    height: 15px;
    opacity: .3;
    color: #000;
    cursor: pointer;
    position: absolute;
    text-align: center;
    line-height: 15px;
    z-index: 1000;
    text-decoration: none;
}

# Chức năng đóng thanh thông báo

Một dòng jQuery sẽ được sử dụng để ẩn thanh thông báo trên cùng khi nhấp vào nút (x).

Vì chúng ta sẽ sử dụng jQuery, nên trước tiên hãy bao gồm thư viện jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Để ẩn thanh thông báo, hãy sử dụng jQuery fadeOut () trong onclick của liên kết neo đóng (x).

<a href="javascript:void(0);" class="icon-close" onclick="$('#hellobar-bar').fadeOut()">&#10006;</a>

Kết luận

Trong ví dụ trên, chúng ta đã tạo một thanh thông báo trên cùng đơn giản với một số nội dung cơ bản với HTML và CSS. Bạn có thể thay đổi nội dung và kiểu của thanh thông báo trên cùng theo yêu cầu của mình. Hy vọng với tạo thanh thông báo bằng HTML và CSS cho WordPress sẽ có ích với bạn, chúc bạn thành công.

Tham khảo : https://www.codexworld.com/create-top-notification-bar-html-css-jquery/

Bài Viết Cùng Chuyên Mục
Game & Apk Mod Acapella Việt Template BLogspot Liên Kết URL

programming css CSS thông báo