Tạo banner trượt cho website sử dụng theme Flatsome

Trong làm web nhiều lúc khoảng không bỏ trống muốn đặt cái gì đó , với 1 đoạn code html và css sẽ giúp bạn Tạo banner trượt cho website wordpress theme flatsome rất đẹp, nhẹ và hữu dụng nhé!

Tạo banner trượt cho website sử dụng theme Flatsome

Trong quản trị admin bạn vào Flatsome/Advance/FooterScripts xong chèn đoạn mã dưới đây vào:

<div class="banner_fix banner_fix_left" style="top: 60px;">
<a href="#"><img alt="tinvaphong" src="/wp-content/uploads/2024/05/exel.jpg"></a>

</div>


<div class="banner_fix banner_fix_right" style="top: 60px;">
<a href="#"><img alt="tinvaphong" src="/wp-content/uploads/2024/05/exel.jpg"></a>
</div>

Bạn có thể chèn trực tiếp vào theme (file head hoặc file tương tự trong themes nhé). Lưu ý nhớ thay link ảnh /wp-content/uploads/2024/05/exel.jpg bằng ảnh của bạn nhé!

Bây giờ dùng đoạn CSS bên dưới cho đẹp

<style>
.banner_fix_left {
right: calc((1240px) + (100% - 1240px)/2);
transition: all .3s;
}

.banner_fix {
display: block;
position: fixed;
margin-top: 100px;
}
.banner_fix_right {
left: calc((1240px) + (100% - 1240px)/2);
transition: all .3s;
}
</style>

Chú ý: Nếu bỏ vào text box css thì đừng để thẻ <style> nhé

Với dòng css trên right: calc((1240px) + (100% – 1240px)/2); ( đang định nghĩa layout của bạn là 1240px ) nếu layout của bạn là số khác bạn có thể thay lại cho phù hợp nhé

Với dòng code css này khi Zoom web bannner sẽ không chòng lên conten rất hợp lý

Chúc bạn thành công!