Dán CSS sau: .header-logo a { position: relative; display: inline-block; overflow: hidden; /* Ẩn hiệu ứng dư */ } .header-logo a::before { content: “”; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background:…
Lưu trữ danh mục: CSS
CSS, Kiến thức Wordpress, Thủ thuật
Hiệu ứng chiếu sáng (shine effect) (hiệu ứng ánh sáng lướt qua) khi hover vào banner
22
Th2
Th2
Dán CSS sau: .banner { position: relative; width: 100%; max-width: 800px; /* Điều chỉnh độ rộng banner */ height: 250px; /* Điều chỉnh chiều cao banner */ background: url(‘https://via.placeholder.com/800×250’) no-repeat center/cover; border-radius: 10px; overflow: hidden; /* Ẩn hiệu ứng dư */…
CSS, Kiến thức Wordpress, Thủ thuật
Hiệu ứng chiếu sáng (shine effect) (hiệu ứng ánh sáng lướt qua) khi hover vào button
22
Th2
Th2
Dán CSS sau: .button { position: relative; display: inline-block; padding: 12px 24px; font-size: 16px; font-weight: bold; color: white; background: #007bff; border: none; border-radius: 8px; cursor: pointer; overflow: hidden; /* Ẩn phần dư của…
CSS, Kiến thức Wordpress, Thủ thuật
Hiệu ứng chiếu sáng (shine effect) (hiệu ứng ánh sáng lướt qua) khi hover vào hình ảnh
10
Th1
Th1
Dán CSS vào .product-small .box-image:hover::before{ -webkit-animation:shine .75s;animation:shine .75s } @-webkit-keyframes shine{ 100%{left:125%} } @keyframes shine{ 100%{left:125%} } .product-small .box-image::before{ position:absolute; top:0; left:-75%; z-index:2; display:block; content:”; width:50%; height:100%; background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%); background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%); -webkit-transform:skewX(-25deg);transform:skewX(-25deg) }
20
Th3
Th3
Bạn có thể dán code script bằng các cách sau: Cách 1: Vào Giao diện → Tùy biến → Advanced (Nâng cao) cuộn xuống Custom JS (JavaScript tùy chỉnh) Cách 2: tạo file .js riêng và enqueue nó trong functions.php Cách 3: Dùng UX Blocks (theme Flatsome) hoặc các plugin có mục dán code js…
Code function, CSS, Flatsome, Kiến thức Wordpress, Thủ thuật
Hướng dẫn Tạo shortcode bài viết liên quan cùng danh mục cho post (bài viết)
23
Th12
Th12
Khi bài viết được xuất bản, WordPress sẽ tự động thay thế shortcode này bằng danh sách các bài viết liên quan theo cùng một danh mục với bài viết hiện tại. Thêm mã sau vào functions.php: // Code tạo shortcode bài viết liên quan cho Webdy function webdy_related_post($content) { if(is_singular(‘post’)) { …
24
Th12
Th12
Mở file functions.php trong child theme của bạn (nếu chưa có child theme, bạn nên tạo child theme để tránh mất thay đổi khi update theme). Thêm đoạn code sau:
02
Th1
Th1
Dán <div class=”theme-newyear”> <img src=”//webdy.vn/public/files/uploads/2024/03/motorbike.png” width=”70″ height=”58″ class=”motorbike”> </div> <style> .theme-newyear .motorbike { left: calc(100% – 80px); max-width: 70px; position: absolute; top: -55px; transform: scaleX(1); animation: motorbikeAnimation 24s infinite ease-in-out; }@keyframes motorbikeAnimation{ 0% { left: 0; transform: scaleX(1);…
23
Th12
Th12
Trong WordPress, bạn không thể trực tiếp giấu code CSS trong database theo cách mà nó được tự động tải và sử dụng trên trang web. Tuy nhiên, CSS có thể được lưu trữ và quản lý thông qua database trong một số tình huống cụ thể, nhưng không phải là cách tối ưu để…
Code function, CSS, JS, Tối ưu website
Dư nhiều dòng trắng có ảnh hưởng đến tốc độ web hay hiệu suất trình duyệt?
24
Th12
Th12
Trong CSS hoặc JavaScript (function), việc để dư nhiều dòng trắng không trực tiếp ảnh hưởng đến tốc độ web hay hiệu suất trình duyệt. Tuy nhiên, có một số điểm cần lưu ý: 1. CSS (Style Sheets): Dòng trắng trong CSS: Trình duyệt sẽ bỏ qua tất cả các ký tự không cần thiết…