Thứ Năm, Tháng Mười Hai 8, 2022

Tạo banner trượt cho web wordpress theme flatsome

- Advertisement -

Có 1 đoạn code html và css sẽ giúp bạn Tạo banner trượt cho web wordpress theme flatsome rất đẹp , nhẹ và rất có ích nhé !

Tạo banner trượt cho web wordpress theme flatsome

Cùng bạn cùng xem demo sau khi đặt nhé.

Tạo banner trượt cho web wordpress theme flatsome
Tạo banner trượt cho web wordpress theme flatsome

Cách tạo banner trượt cho web wordpress theme flatsome

Sau đây bạn vào Global Settings / FOOTER SCRIPTS và chèn đoạn code này vào:

<div class=”banner_fix banner_fix_left” style=”top: 60px;”>
<a href=”http://tinvanphong.net/”><img alt=”tinvaphong.net”
src=”https://binance24h.online/wp-content/uploads/2022/05/exel.jpg”></a>
</div>
<div class=”banner_fix banner_fix_right” style=”top: 60px;”>
<a href=”http://tinvanphong.net/”><img alt=”tinvaphong.net” src=”https://binance24h.online/wp-content/uploads/2022/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 )

Sau khi đặt xong nhớ coppy code css sau dán vào nhé:

<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ú ý : ví như bỏ vào text box css thì đừng để thẻ <style></style> nhé có chiếc 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é.

Code CSS này khi Zoom web banner sẽ ko trồng lên content rất hợp lý và đẹp mắt nhé.

Cảm ơn các bạn đã đọc bài viết này của An Nhiên

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

 

5/5 - (3 bình chọn)

Bài Viết Liên Quan

46,788FansLike

Bài Viết Mới