Hướng dẫn chi tiết cách tạo nút Download đẹp cho Blogger có hiệu ứng
Trong thế giới nội dung số, việc tạo ra những nút Download không chỉ thuận tiện cho người đọc mà còn phản ánh sự chuyên nghiệp của trang web. Đặc biệt, đối với những Blogger sử dụng nền tảng Blogger, việc tạo nên những nút Download đẹp mắt có thể làm tăng đáng kể trải nghiệm người dùng, qua đó khuyến khích hành động tải xuống tài liệu, ảnh, hoặc nội dung khác. Bài viết này sẽ hướng dẫn bạn từng bước cách tạo nút Download đẹp cho Blogger, từ thiết kế đến tích hợp vào blog của mình.
Tạo nút Download đẹp Blogger |
Bây giờ các bạn sẽ xem qua demo của nút Download này xem có đẹp không nhé :))
Dưới đây là Demo cho nút Download các bạn nhé. Di chuyển chuột vào button Download nè.
Cách tạo nút download đẹp cho blogger
Trước hết, việc có kiến thức cơ bản về HTML và CSS là điều kiện tiên quyết. Đây là ngôn ngữ xương sống giúp tạo ra và tùy chỉnh nút Download theo ý muốn. Một nút Download đẹp không chỉ đơn giản là về màu sắc hay hình dạng, mà còn cần phải hài hòa với thiết kế tổng thể của blog. Cân nhắc sử dụng công cụ thiết kế trực tuyến hoặc phần mềm đồ họa để tạo nên thiết kế. Sau khi có thiết kế, bước tiếp theo là chuyển đổi thiết kế đó thành mã HTML/CSS. Điều này đòi hỏi bạn phải biết cách sử dụng các thẻ HTML cơ bản và CSS để tạo hình dạng, màu sắc, và hiệu ứng cho nút.
Bây giờ, mình sẽ hướng dẫn các bạn các bước chi tiết để tích hợp vào Blogger.
Bước 1: Đăng nhập vào trang quản lý Blogger
Bước 2: Ấn vào Chủ đề
→ Chỉnh sửa HTML
Bước 3: Bạn hãy copy đoạn CSS dưới đây và dán vào phía trên ]]></b:skin>
.glow-on-hover svg{vertical-align: -6px; width: 21px; height: 21px;margin-right:6px}
.glow-on-hover{padding:10px 14px;border:none;outline:none;color:#fff;background:#111;cursor:pointer;position:relative;z-index:0;border-radius:6px!important}.glow-on-hover:before{content:'';background:linear-gradient(45deg,red,#ff7300,#fffb00,#48ff00,#00ffd5,#002bff,#7a00ff,#ff00c8,red);position:absolute;top:-2px;left:-2px;background-size:400%;z-index:-1;filter:blur(5px);width:calc(100% + 4px);height:calc(100% + 4px);animation:glowing 20s linear infinite;opacity:0;transition:opacity .3s ease-in-out;border-radius:10px}.glow-on-hover:active{color:#000}.glow-on-hover:active:after{background:0 0}.glow-on-hover:hover:before{opacity:1}.glow-on-hover:after{z-index:-1;content:'';position:absolute;width:100%;height:100%;background:#111;left:0;top:0;border-radius:10px}.home .glow-on-hover:after{background:#1e73be;border-radius:5px}@keyframes glowing{0%{background-position:0 0}50%{background-position:400% 0}100%{background-position:0 0}}@keyframes topBubbles{0%{background-position:5% 90%,10% 90%,10% 90%,15% 90%,25% 90%,25% 90%,40% 90%,55% 90%,70% 90%}50%{background-position:0 80%,0% 20%,10% 40%,20% 0%,30% 30%,22% 50%,50% 50%,65% 20%,90% 30%}100%{background-position:0 70%,0% 10%,10% 30%,20% -10%,30% 20%,22% 40%,50% 40%,65% 10%,90% 20%;background-size:0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%}}@keyframes bottomBubbles{0%{background-position:10% -10%,30% 10%,55% -10%,70% -10%,85% -10%,70% -10%,70% 0%}50%{background-position:0 80%,20% 80%,45% 60%,60% 100%,75% 70%,95% 60%,105% 0%}100%{background-position:0 90%,20% 90%,45% 70%,60% 110%,75% 80%,95% 70%,110% 10%;background-size:0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%}}
Bước 4: Lưu chủ đề lại.
Bước 5: Bạn vào BÀI ĐĂNG MỚI
và đăng bài như bình thường, chỗ nào muốn hiện Button Download thì bạn dán đoạn code dưới đây vào vị trí đó là được.
<div style="text-align: center;"><a href="#" rel="nofollow noopener"><button class="glow-on-hover" type="button"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>Download Now</button></a></div>
Các câu hỏi thường gặp về cách tạo nút Download đẹp cho Blogger
Làm thế nào để tạo nút Download không cần biết về HTML/CSS?
Bạn có thể sử dụng các công cụ tạo nút trực tuyến hoặc plugin dành cho Blogger để tạo nút Download mà không cần kiến thức về HTML/CSS.
Tôi có thể tối ưu hóa nút Download cho SEO như thế nào?
Đảm bảo sử dụng từ khóa phù hợp trong tên nút và mô tả, tối ưu hóa kích thước ảnh và mã nguồn để tăng tốc độ tải trang, và thiết kế nút phản hồi trên mọi thiết bị.
Nút Download của tôi không hiển thị đúng cách trên điện thoại, làm sao đây?
Điều này có thể do mã HTML/CSS không được thiết kế để phản hồi (responsive). Bạn cần kiểm tra và chỉnh sửa mã để đảm bảo nó tương thích với mọi kích thước màn hình.
Kết luận
Trên đây là toàn bộ hướng dẫn chi tiết cách tạo nút Download đẹp cho Blogger có hiệu ứng. Điều này không chỉ giúp tăng cường trải nghiệm người dùng mà còn thể hiện sự chuyên nghiệp và sáng tạo của blog. Bạn hãy áp dụng thử xem thế nào nhé! Và nếu có bất kỳ thắc mắc nào hãy để lại bình luận mình sẽ giải đáp.
Thông tin liên hệ:
Thành Trương Blog
Chịu trách nhiệm nội dung: Nguyễn Thành Trương
Địa chỉ: Xã Tân Thành, Huyện Bình Tân, Tỉnh Vĩnh Long
Email: thanhtruongblog@gmail.com
Số điện thoại: 0973.898.830
Website: https://www.thanhtruongblog.com/
Join the conversation
➥ Bạn có thể Upload Ảnh bất kì để lấy link và dán vào khung bình luận và ấn xuất bản ảnh sẽ được tải lên.
➥ Không spam trong khung bình luận, hạn chế viết tắt.
➥Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin