Mẹo nhỏ: Để tìm kiếm chính xác các chia sẻ của f4vnn.com, hãy search trên Google với cú pháp: "Từ khóa" + "f4vnn". (Ví dụ: tắt update windows f4vnn). Tìm kiếm ngay

Tạo thanh thông báo bằng HTML và CSS cho WordPress

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.

Tạo thanh thông báo bằng HTML và CSS cho WordPress

Tạo thanh thông báo bằng HTML và CSS cho WordPress

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

Theo dõi trên

Logo Google new
Rate this post