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é !
Mẫu 01, đang dùng cho các demo tiêu chuẩn trên Temz.vn
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
Để 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>Mẫu 02, đang dùng cho Hocban.vn
Mẫu này cũng đẹp phết đấy anh em, lụm vìa thay link và xài thôi ^^
<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%;">
<p style="font-size: 14px;"><a href="https://be.elementor.com/visit/?bta=223951&nci=5550" 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://elementor.com/help/wp-content/uploads/2020/01/The-Finder.gif" alt="Card image cap" width="100%" height="auto" /></a></p>
<div class="card-body" style="box-sizing: border-box; flex: 1 1 auto; padding: 1.5rem; margin-top: -2em;">
<h4 class="card-title" style="box-sizing: border-box; color: #8d0038!important; font-family: inherit; font-size: 1.3125rem; line-height: 1.3; margin-top: 0px;"><span style="font-size: 18pt;"><strong>Elementor AI</strong></span></h4>
<div class="card-text" style="box-sizing: border-box; margin-bottom: 1rem;">Cách mạng hóa việc thiết kế website, bạn đã thử chưa ?</div>
<div class="nut-bam" style="font-size: 14px;"><a href="https://be.elementor.com/visit/?bta=223951&nci=5550" target="_blank" rel="nofollow noopener sponsored"><span style="font-family: arial;">Xem thêm</span></a></div>
</div>
</div>Vẫn tiếp tục sưu tầm nhé anh em !
No Responses