Chào mừng bạn đến với Vietech Blog
Tôi hy vọng sau khi đọc tiêu đề bài viết, bạn đã hiểu rằng trong blog này tôi sẽ thảo luận về điều gì. Ngay cả khi bạn không hiểu thì bạn chỉ cần nhìn lên trên cùng có logo SVG của TA mà tôi đã tìm được và nó chỉ ẩn đi sau khi cuộn xuống.
Vì vậy, hôm nay chúng ta sẽ nói về Cách thêm Logo SVG động trên Blogger ẩn sau khi cuộn xuống.
Đầu tiên chúng ta sẽ thảo luận về cách thêm phần này vào blog của bạn. Sau đó, ở phần cuối, chúng ta sẽ thảo luận về một số thông tin blog quan trọng.
 |
| Cách thêm Logo SVG trên Blogger |
Trước khi bắt đầu, vui lòng sao lưu mẫu blog của bạn cho bất kỳ loại lỗi nào và quy trình khôi phục dễ dàng.
Cách thêm Logo SVG với chuyển động Blogger
Làm theo các bước dưới đây một cách cẩn thận để cài đặt thành công svg trên tiêu đề của bạn.
Bước 1: Đăng nhập vào bảng điều khiển Blogger của bạn.
Bước 2: Sau đó bấm vào phần Chủ đề.
Bước 3: Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'Tùy Chỉnh'.
Bước 4:- Bây giờ bấm vào chỉnh sửa HTML.
Bước 5: Bây giờ hãy tìm kiếm
<!--[ Header widget ]-->, vì thẻ này phổ biến trong hầu hết các chủ đề và dán mã SVG của bạn { Bởi vì trong mã được đánh dấu bên dưới, tôi đã sử dụng mã SVG TA của mình tìm được để làm ví dụ } phía trên <!--[ Header widget ]--><div class='headerSvg' id='svgLogo'>
<svg viewbox="0 0 89.65 63.88" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:blue}.cls-2{fill:blue}.cls-3{fill:blue}
.darkMode .cls-1{fill:#ffffff}
.darkMode .cls-2{fill:#44bd32}
.darkMode .cls-3{fill:#fbc531}
</style></defs><g data-name="Layer 2" id="Layer_2"><g data-name="Layer 1" id="Layer_1-2"><path class="cls-1" d="M44.65,41.18l.9-1.13.15-.18c.63-.8,1.27-1.56,1.92-2.3l8.93-25a2.27,2.27,0,0,1,2.14-1.74h.38a2.11,2.11,0,0,1,1.16.38,2.83,2.83,0,0,1,1,1.46l4.12,11.75A23.06,23.06,0,0,1,72.84,23a19.61,19.61,0,0,1,3.39.3L70.72,7.86a10.68,10.68,0,0,0-4.56-5.92A13.81,13.81,0,0,0,58.88,0,14.6,14.6,0,0,0,51.6,1.94,10.78,10.78,0,0,0,47,7.86L30.42,54.56A55.54,55.54,0,0,0,44.65,41.18Z"><path class="cls-2" d="M80.87,36.38,79.72,36a16,16,0,0,0-5.29-.87,20,20,0,0,0-5.09.69l9,25.27H89.65Z"><path class="cls-3" d="M60.19,29.06a42.48,42.48,0,0,0-6.77,5.3,65.78,65.78,0,0,0-6.16,6.76c-.34.42-.68.84-1,1.28-6.89,9-13.91,14-20.19,16.75l-.32.13V10.68H39.9V0H0V10.68H15.05V62.05a31.38,31.38,0,0,1-5.15.1,22.59,22.59,0,0,1-5.55-1l0,.34A20.28,20.28,0,0,0,7,62.76a31.35,31.35,0,0,0,3.12.7,32.78,32.78,0,0,0,8.16.29A36.5,36.5,0,0,0,26.63,62c6.42-2.12,13.79-6.37,21.48-14.36,1.46-1.51,2.87-2.87,4.25-4.1a55.78,55.78,0,0,1,7-5.34,35.68,35.68,0,0,1,7.5-3.73c5.89-2,10.47-1.47,13.57-.38V26.75C77.42,25.26,70.06,22.91,60.19,29.06Z"></path></path></path></g></g></svg>
</div>
Nếu mẫu của bạn có tính năng chế độ tối và nếu bạn muốn có một màu khác trên logo khi ở chế độ tối, bạn có thể tùy chỉnh mã theo nhu cầu của mình. Mỗi mẫu có thể có một lớp chế độ tối khác nhau, vì vậy hãy điều chỉnh nó, bạn có thể thay thế lớp được đánh dấu bằng lớp chế độ tối mẫu của bạn. Bạn cũng có thể thay đổi màu chế độ tối cho SVG.
Bước 6: Bây giờ, thêm các Mã CSS sau đây vào]]></b:skin> thẻ.
/* HEADER */ header .headerSvg{display:flex;align-items:center;justify-content:center;margin-right:5px;-webkit-transition:all .5s ease;transition:all .5 ease;background:transparent;opacity:1;visibility:visible} header .headerSvg.hidden{transform:scale(0);opacity:0;visibility:hidden;-webkit-transition:all .2s ease;transition:all .2s ease} header .headerSvg svg{width:28px;height:28px} header .headerTitle{-webkit-transition:all .2s ease);transition:all .2s ease} header .headerTitle.slide{margin-left:-33px;-webkit-transition:all .4s ease;transition:all .4s ease}
Bạn có thể tùy chỉnh CSS này theo ý mình nếu muốn tăng giảm kích thước của logo.
Cách tạo hiệu ứng logo SVG khi cuộn xuống
Bây giờ, chúng tôi sẽ thêm một tập lệnh Kiểu hoạt ảnh để ẩn Logo bằng hoạt ảnh trượt khi cuộn.
Sao chép tập lệnh bên dưới và dán ngay trên thẻ
</body>.<script>/*<![CDATA[*//* Header Scroll */ function headScroll() {const distanceY = window.pageYOffset || document.documentElement.scrollTop, shrinkOn = 20, headerEl = document.getElementById('header'), svgLogo = document.getElementById('svgLogo'), headT = document.querySelector('.headerTitle');if (distanceY > shrinkOn) {headerEl.classList.add("stick");svgLogo.classList.add("hidden");headT.classList.add("slide")} else {headerEl.classList.remove("stick");svgLogo.classList.remove("hidden");headT.classList.remove("slide")} } window.addEventListener('scroll', headScroll); /*]]>*/</script>
SVG là gì?
SVG (Đồ họa véc tơ có thể mở rộng) là một định dạng hình ảnh véc tơ dựa trên XML. Nó được phát triển như một tiêu chuẩn cho đồ họa vector và được phát hành lần đầu tiên vào năm 1999.
Chúng là một loại đồ họa vector hiện đại hơn với sự hỗ trợ từ tất cả các trình duyệt và phần mềm đồ họa chính và chúng có thể mở rộng theo bất kỳ kích thước nào mà không làm giảm chất lượng, khiến chúng trở nên lý tưởng để sử dụng trong thiết kế web.
Về cơ bản, Chúng được tạo bằng một chương trình minh họa và bao gồm các đường dẫn, hình dạng, đường cong và đường thẳng, đồng thời chúng cũng có khả năng hoạt hình.
Tại sao bạn nên thích SVG hơn PNG?
Có nhiều lý do để thích SVG hơn PNG, nhưng bạn chỉ nên sử dụng SVG cho tác phẩm nghệ thuật cường độ thấp; logo, biểu tượng và đồ họa đơn giản.
Như tôi đã đề cập trong SVG là gì? rằng SVG dựa trên vectơ, đường dẫn, hình dạng và nền và nó cho phép độ phân giải vô hạn có nghĩa là Sử dụng SVG, bạn không bị giới hạn ở pixel.
Hãy xem ví dụ dưới đây:
Bây giờ Thu phóng cả hai hình ảnh một Cả hai hình ảnh có cùng kích thước lưu trữ gần 1kb, nhưng khi chúng tôi phóng to cả hai hình ảnh, chúng tôi nhận thấy rằng hình ảnh đầu tiên bị giảm chất lượng khi chúng tôi phóng to nhưng hình ảnh thứ hai thì không.
Bởi vì hình ảnh đầu tiên ở định dạng .PNG và hình ảnh thứ hai ở định dạng .SVG.
Tôi hy vọng bạn hiểu rằng SVG có độ phân giải vô hạn và chúng không bị giới hạn ở pixel .
Bây giờ Bật chế độ tối, bạn sẽ thấy rằng chúng tôi có thể thay đổi màu của SVG ở chế độ tối nhưng chúng tôi không thể thay đổi màu của png.
Vì vậy, Nhìn chung, đây là những lý do chính để chọn SVG Trên PNG trong các tác phẩm nghệ thuật có cường độ thấp.
- Độ phân giải vô hạn
- Kết xuất nhanh hơn SVG
- Hoạt hình có thể được thêm vào
Đọc 5 lý do bạn nên sử dụng SVG thay vì PNG của growfox để có cái nhìn sâu hơn về từng điểm.
Làm cách nào để tạo Logo SVG?
Có hai khả năng để tạo Logo SVG. Đầu tiên, bạn đã có Logo PNG hoặc khác, bạn không có bất kỳ logo nào và muốn tạo logo từ đầu.
Tạo SVG từ số không?
Tạo Logo SVG từ kỹ năng thiết kế đồ họa bằng không, có nhiều phần mềm mà bạn có thể tạo logo SVG của riêng mình nhưng Adobe Illustrator là phần mềm nổi tiếng nhất để tạo SVG.
Adobe Illustrator là một ứng dụng cao cấp, nó yêu cầu gói đăng ký để hoạt động trên ứng dụng này và chỉ khả dụng cho máy tính để bàn.
Nếu bạn muốn nhận AI Miễn phí thì chỉ cần bình luận bên dưới.
Dưới đây là một số ứng dụng và trang web để chỉnh sửa SVG.
- Canva (Ứng dụng và Web)
- JustinMind (Máy tính để bàn)
- Vecteezy Editor (Máy tính để bàn và Web)
- Inkspace (Máy tính để bàn và Android)
- Sketsa (Máy tính để bàn và Web)
- Vectr (Máy tính để bàn)
Bạn cũng có thể tạo Biểu trưng hoặc đồ họa SVG trong Trình chỉnh sửa hình ảnh như Canva và Xuất chúng sang Định dạng trong suốt+SVG. sau đó, chỉ cần nén nó.
Nếu bạn muốn có hướng dẫn thích hợp về " Cách tạo Logo SVG trên các ứng dụng hoặc trang web khác nhau " thì hãy bình luận bên dưới.
Bạn cũng có thể chuyển đổi PNG sang SVG nhưng nó sẽ không hoạt động bình thường như SVG đã tạo.
Danh sách một số trang web nơi bạn có thể chuyển đổi PNG sang SVG:Tải xuống Biểu trưng SVG
Bạn cũng có thể tải xuống các logo từ các trang web cung cấp vector như Shutterstock, freepik, envanto và tùy chỉnh chúng theo lựa chọn của bạn.
Theo mặc định, hầu hết các trang web đồ họa vector đều cung cấp Định dạng EPS và bạn có thể dễ dàng chuyển đổi EPS sang SVG và Nhận Logo SVG của mình.
Làm cách nào để thêm Biểu trưng SVG trong Tiêu đề?
Thêm Biểu trưng SVG trong tiêu đề vào Trang web Blogger không phải là khoa học tên lửa và nó sẽ không yêu cầu nhiều kiến thức về HTML, CSS hoặc JS.
Thực hiện theo các bước trên để thêm logo SVG vào trang web của bạn.
Tóm lại
Vì vậy, đây là tất cả về Cách Thêm Biểu trưng SVG Hoạt hình trên Blogger Ẩn Sau khi Cuộn xuống. Tôi hy vọng bạn đã thích bài viết này. Nếu bạn có bất kỳ câu hỏi nào, vui lòng bình luận bên dưới. Hãy ghé thăm chúng tôi một lần nữa để biết thêm bài viết như thế này.