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>

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.