Chia sẻ các bạn code logo của trang thanh toán online và logo một số ngân hàng Việt Nam, các logo này chạy ngang màn hình dưới chân trang hoặc cũng có thể hiển thị ở đầu trang nếu bạn muốn nhưng tốt nhất vẫn đặt dưới chân trang và trên footer nhìn hợp hơn.
 |
| Các logo của các trang thanh toán online và logo ngân hàng chạy từ phải sang trái |
Đề xuất cho bạn: Các điều kiện hiển thị dữ liệu trong tùy chọn trang bài viết của widget Blog version 2
Sử dụng thẻ marquee để các logo chạy từ phải sang trái, dừng lại khi hover và tiếp tục chạy khi không hover, dưới đây là code html và css.
<style>
.payment-method{float:left;width:100%}
.payment-method ul{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin:0;padding:0;list-style:none;white-space:nowrap;overflow-x:auto}
.payment-method li{background:#f0f4f7;float:left;padding:10px;border-radius:3px}
.payment-method li:not(:last-child){margin-right:10px}
.payment-method img{width:116px;height:55px}
</style>
<div class="payment-method">
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">
<ul>
<li><img alt='zalo pay' height='55' loading='lazy' src='https://cdn.jsdelivr.net/gh/thietkeblogspot/images/zalo_pay.png' width='116'/></li>
<li><img alt='visa' height='55' loading='lazy' src='https://cdn.jsdelivr.net/gh/thietkeblogspot/images/visa.png' width='116'/></li>
<li><img alt='master card' height='55' loading='lazy' src='https://cdn.jsdelivr.net/gh/thietkeblogspot/images/master_card.png' width='116'/></li>
<li><img alt='vietcombank' height='55' loading='lazy' src='https://cdn.jsdelivr.net/gh/thietkeblogspot/images/vietcom_bank.png' width='116'/></li>
<li><img alt='vietinbank' height='55' loading='lazy' src='https://cdn.jsdelivr.net/gh/thietkeblogspot/images/vietin_bank.png' width='116'/></li>
<li><img alt='bidvbank' height='55' loading='lazy' src='https://cdn.jsdelivr.net/gh/thietkeblogspot/images/bidv_bank.png' width='116'/></li>
<li><img alt='sacombank' height='55' loading='lazy' src='https://cdn.jsdelivr.net/gh/thietkeblogspot/images/sacom_bank.png' width='116'/></li>
<li><img alt='eximbank' height='55' loading='lazy' src='https://cdn.jsdelivr.net/gh/thietkeblogspot/images/exim_bank.png' width='116'/></li>
<li><img alt='scbbank' height='55' loading='lazy' src='https://cdn.jsdelivr.net/gh/thietkeblogspot/images/scb_bank.png' width='116'/></li>
<li><img alt='vietcapitalbank' loading='lazy' src='https://cdn.jsdelivr.net/gh/thietkeblogspot/images/vietcapital_bank.png' width='116'/></li>
</ul>
</marquee>
</div>
Bạn có thể chọn chèn code trong tiện ích HTML/JavaScript trong bố cục tiện ích hoặc chèn trực tiếp trong chỉnh sửa HTML của chủ đề
- Trường hợp chèn vào widget, copy tất cả code chèn vào xong di chuyển tiện ích vào vị trí hiển thị.
- Trường hợp chèn trong theme thì chèn code HTML vào vị trí muốn xong chèn css trong <b:skin> hoặc chèn code css trước thẻ đóng </head> là xong.
Các bạn có thể tìm logo png của các trang thanh toán khác hoặc các ngân hàng khác trên mạng để thêm hoặc thay vào cho phù hợp nhớ đặt kích thước logo đều nhau 116x55
Tham khảo thêm: Tận dụng tối đa thẻ dữ liệu mặc định của bài viết thay vì lấy dữ liệu trong nguồn cấp
