Trang trí đón trung thu cho blog/website bằng hình ảnh cành hoa, mặt trăng, lồng đèn và rước đèn

Trung thu là tết đoàn viên, là nét văn hóa truyền thống của người Việt Nam bởi nó mang cho mình nguồn gốc cũng như ý nghĩa đầy thú vị. Hôm nay, Code Pro sẽ hướng dẫn các bạn trang trí blog/website đón trung thu tuyệt đẹp, cùng theo dõi ngay nào!

Trang trí đón trung thu cho blog/website bằng hình ảnh cành hoa, mặt trăng, lồng đèn và rước đèn

Các bước thực hiện

Bước 1: Thêm CSS cố định 2 bên trái, phải và ở góc dưới

.codepro-trungthu-left{position:fixed;top:0;left:0;width:166px;z-index:9999}
.codepro-trungthu-right{position:fixed;top:0;right:0;width:166px;z-index:9999}
.codepro-trungthu-bottom{position:fixed;bottom:-8px;left:0;width:333px;z-index:9999}
@media(max-width:1024px){.codepro-trungthu-left,.codepro-trungthu-right,.codepro-trungthu-bottom{display:none!important}}

Bước 2: Thêm phần hiển thị vào trước thẻ </body>

Trang trí đón trung thu cho blog/website bằng hình ảnh cành hoa, mặt trăng, lồng đèn và rước đèn

<a class="codepro-trungthu-left" href="https://www.code.pro.vn/2021/09/trang-tri-don-trung-thu-cho-blog-website-bang-hinh-anh-canh-hoa-mat-trang-long-den-va-ruoc-den.html"><img alt="Trang trí đón trung thu cho blog/website bằng hình ảnh cành hoa, mặt trăng, lồng đèn và rước đèn" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDRQDNRDJSlZRrIKuZRomBtjjivs-t1jfwB6IkfhvQKmELLo39koAHruvvI8AbA36-9RS9kfmmFhRS7fkUrw3WyDaPnOdaaQJD_2O9hha27XTfL1AXaa6eQzPwcSXGJYSDh3tjOxxqIjjg/s0/canh-hoa-long-den-trung-thu.png"/></a>
<a class="codepro-trungthu-right" href="https://www.code.pro.vn/2021/09/trang-tri-don-trung-thu-cho-blog-website-bang-hinh-anh-canh-hoa-mat-trang-long-den-va-ruoc-den.html"><img alt="Trang trí đón trung thu cho blog/website bằng hình ảnh cành hoa, mặt trăng, lồng đèn và rước đèn" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw6yXD0rFuvZkHIkxbuOnoa79ka3vPpJcf1xiyDFKBTAbhwCrGnRRZWrGIYURFqO-f5dSLLfJYTcDix5QYdk2eMXzShs4RMX4s27Maq6qnyhVE7KDl72Cs8p_tS_PxjDA-8e1QziNUBhZW/s0/mat-trang-long-den-trung-thu.png"/></a>
<a class="codepro-trungthu-bottom" href="https://www.code.pro.vn/2021/09/trang-tri-don-trung-thu-cho-blog-website-bang-hinh-anh-canh-hoa-mat-trang-long-den-va-ruoc-den.html"><img alt="Trang trí đón trung thu cho blog/website bằng hình ảnh cành hoa, mặt trăng, lồng đèn và rước đèn" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin1CJgORKie1yLvYVC3U8v7pL3Q5xMwchSkN9c0xaVLaRIFzyPzqXVM_dwFH_pAPLz_sPH7p6dUVqWKdnja7rhBQxY4r6ZaG7id6ZBf1FxmhQbSPJDo4oAPJ4F_VA0tbEvQxu93rm78FsX/s0/ruoc-den-trung-thu.png"/></a>

Bước 3: Lưu lại và tận hưởng thành quả!

Lưu ý: Để tránh nội dung bị tre phủ, hình ảnh sẽ chỉ hiển thị trên màn hình có kích thước lớn!

Lời kết

Trên đây là bộ code và hướng dẫn trang trí đón trung thu cho blog/website bằng hình ảnh cành hoa, mặt trăng, lồng đèn và rước đèn. Chúc các bạn thành công và có một ngày làm việc thật hiệu quả. Xin chào và hẹn gặp lại!

Copyright © Code Pro