Chia sẻ code làm bảng thông báo đẹp cho WordPress

Code làm bảng thông báo đẹp cho WordPress: Bạn muốn tạo một bẳng thông báo và muốn đặt nó ở dưới hoặc ở đâu đó trong nội dung bài viết của mình trên WordPress để người dùng có thể chú ý đến cái mà bạn muốn mọi người biết đến. Hôm nay rảnh ngồi nghịch, những bạn chuyên code thì mình không nói nhé, cái này chỉ dành cho anh em nào gà code như mình thôi nhé.

Code làm bảng thông báo đẹp cho WordPress

Vì mình không phải chuyên code nên mọi thứ có thể chưa hợp lý và code có thể rườm rà, nhưng đối với anh em vọc thì có cái để vọc sẽ dễ dàng hơn.

CÓ THỂ BẠN QUAN TÂM:
– Tạo thanh thông báo bằng HTML và CSS cho WordPress
– Tùy biến trang đăng nhập không cần Plugin cho WordPress
– Tạo trang chuyển hướng download cho WordPress

# Code html bảng thông báo

Dưới đây là code của thông báo, các bạn nhớ chỉnh sửa lại nội dung cho phù hợp với bạn nhé.

<div class="wpbcap wpbcap-16762 wpbcap-">
<div class="su-box su-box-style-noise" id="" style="border-color:#f70d28;border-radius:6px">
<div class="su-box-title" style="background-color:#f70d28;color:#FFFFFF;border-top-left-radius:4px;border-top-right-radius:4px">Welcome to f4vnn.com</div>
<div class="su-box-content su-u-clearfix su-u-trim" style="border-bottom-left-radius:4px;border-bottom-right-radius:4px">
<p>Là một web/blog cá nhân, chủ yếu chia sẻ kiến thức về máy tính, internet, công nghệ và thủ thuật WordPress, Blogger...Thủ thuật được tổng hợp từ kinh nghiệm và trên Internet. Mình hi vọng một điều là: Tại đây, các bạn có thể học thêm được rất nhiều kinh nghiệm và thủ thuật khi sử dụng máy tính ^_^</p>
<p><strong>ĐỪNG QUÊN ĐĂNG KÝ <strong><a href="https://www.facebook.com/blogshare24/?modal=admin_todo_tour">FANPAGE</a></strong> ĐỂ NHẬN THỦ THUẬT MỚI NHẤT NHÉ!</strong></p>
</div>
</div>
</div>

# Css bảng thông báo

Dưới đây là Css để làm đẹp cho bảng.

.su-box {
    margin: 0 0 1.5em;
    border-width: 2px;
    border-style: solid;
}
.su-box-title {
    display: block;
    padding: .5em 1em;
    font-weight: 700;
    font-size: 1.2em;
}
.su-box-content {
    background-color: #fff;
    color: #444;
    padding: 1em;
}

Kết luận

Đây là một bảng thông báo đơn giản để bạn đặt vào nội dung bài viết, bạn có thể đặt bất cứ chỗ nào mà bạn muốn đặt nó trong nội dung bài viết nhé. Hy vọng với bài chia sẻ code làm bảng thông báo đẹp cho WordPress mà Blog thủ thuật máy tính f4vnn đã chia sẻ sẽ có ích với bạn, chúc bạn thành công.