Hello, chào anh em ! Lâu quá mình mới quay lại chủ đề thú vị này, đó là tổng hợp những mẫu HTML CSS (responsive) làm sẵn để anh em đem ráp vào website cho tiện và nhanh chóng. Trong bài này mình chia sẻ đến anh em Mẫu banner quảng cáo HTML CSS responsive (kiểu dọc) lắp bên sidebar của website WordPress. Anh em nào có nhu cầu thì hót về xài nhé !
Với mẫu này mình đã tinh chỉnh lại để làm banner giới thiệu theme Nevo – một theme WordPress rất ngon lành do người Việt Nam phát hành trên WordPress.org | Banner này có các thành phần như: ảnh, tiêu đề nội dung, nội dung, nút nhấn và đầy đủ các vị trí chèn link. Demo tham khảo: demo.temz.vn/nevo-free
Ví dụ về sử dụng Banner quảng cáo HTML CSS responsive (kiểu dọc)
Để sử dụng thì anh em copy đoạn HTML CSS sau và đem dán vào phần HTML widget trên website WordPress hoặc Blogspot (Blogger). Sau đó sửa lại nội dung và link ảnh cho phù hợp với nhu cầu thôi. Ngoài ra phần nút nhấn và ảnh có link trỏ về trang đích, ae cũng sửa lại link cần trỏ của ae nhé !
<div class="card" style="background-clip: border-box; background-color: white; border-radius: 0.375rem; border: 0.0625rem solid rgba(0, 0, 0, 0.05); box-sizing: border-box; color: #495057; display: flex; flex-direction: column; font-family: Nunito, sans-serif; font-size: 14px; min-width: 0px; overflow-wrap: break-word; position: relative; width: 100%;"><a href="https://wordpress.org/themes/nevo/" target="_blank" rel="noopener"><img class="card-img-top alignnone" style="border-style: none; border-top-left-radius: calc(0.3125rem); border-top-right-radius: calc(0.3125rem); box-sizing: border-box; vertical-align: middle; width: 100%;" src="https://demo.temz.vn/nevo-free/wp-content/uploads/2023/08/Blue-Modern-Letter-C-Tech-Logo-Design.jpg" alt="Card image cap" width="100%" height="auto" /></a><div class="card-body" style="box-sizing: border-box; flex: 1 1 auto; padding: 1.5rem;"><h4 class="card-title" style="box-sizing: border-box; color: #343a40; font-family: inherit; font-size: 1.3125rem; line-height: 1.3; margin-bottom: 1.25rem; margin-top: 0px;">Quảng cáo</h4><div class="card-text" style="box-sizing: border-box; margin-bottom: 1rem;">Đây là quảng cáo sử dụng HTML CSS để tối ưu hiển thị trên các thiết bị khác nhau.</div><a class="btn btn-sm btn-primary" style="background: linear-gradient(#489dff, #288cff) repeat-x #288cff; border-radius: 0.375rem; border: 0.0625rem solid #288cff; box-shadow: none; box-sizing: border-box; color: white; cursor: pointer; display: inline-block; font-size: 0.765625rem; font-weight: 600; line-height: 1.5; padding: 0.55rem 1rem; text-align: center; text-decoration-line: none; transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; user-select: none; vertical-align: middle; white-space: nowrap;" href="https://wordpress.org/themes/nevo/" target="_blank" rel="noopener">Tải Về</a></div><div></div></div>
Nếu có tùy chỉnh được thêm hoặc sưu tầm được thêm mẫu nào mình sẽ cập nhật ở đây nhé anh em. À, ngoài ra nếu anh em có mẫu thiết kế nào đẹp đẹp xin để lại link bên dưới bình luận để mình tham khảo với nhé, cảm ơn anh em !
