Cách tạo nút download cho blogspot

Cách tạo nút download cho blogspot

 Hôm nay, mình sẽ hướng dẫn các bạn tạo ra nút download như hình bên dưới. 

Download 1

 

Với 1 nút download đẹp và 1 đường link thô sơ thì người dùng sẽ có xu hướng lựa chọn nút download hơn là đường link. 

Đối với các blogger làm về mảng chia sẻ phần mềm, tài liệu hay tài nguyên thì đương nhiên sẽ đi kèm với nút download cho mỗi bài viết. Vì vậy việc tạo một button download đẹp người dùng sẽ dễ dàng nhìn thấy và blog của bạn sẽ trông đẹp mắt hơn. Với một vài đoạn code đơn giản bằng cách sử dụng CSS bạn sẽ có ngay một button đẹp bằng cách dưới đây.

Tạo nút download cho Blogspot 

Bước 1: Truy cập vào Blogger > Mẫu (Template) > Chỉnh sửa HTML (Edit HTML)
 
Bước 2: Kiểm tra xem template của bạn đã có đoạn code dưới chưa, nếu chưa thì chèn thêm vào trước thẻ </head>
<link href=’https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css’ rel=’stylesheet’/>
Bước 3: Tìm đến trước thẻ đóng ]]> </b:skin>

và chèn đoạn CSS bên dưới vào.
#wrap { margin: 20px auto; text-align: center; } #wrap br { display: none; }
.btn-slide, .btn-slide2 { position: relative; display: inline-block; height: 50px; width: 200px; line-height: 50px; padding: 0; border-radius: 50px; background: #fdfdfd; border: 2px solid #0099cc; margin: 10px; transition: .5s; }

.btn-slide2 { border: 2px solid #efa666; }

.btn-slide:hover { background-color: #0099cc; }

.btn-slide2:hover { background-color: #efa666; }

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc; }

.btn-slide2:hover span.circle2 { color: #efa666; }

.btn-slide:hover span.title, .btn-slide2:hover span.title2 { left: 40px; opacity: 0; }

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 { opacity: 1; left: 40px; }

.btn-slide span.circle, .btn-slide2 span.circle2 { display: block; background-color: #0099cc; color: #fff; position: absolute; float: left; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; left: 0; transition: .5s; border-radius: 50%; }

.btn-slide2 span.circle2 { background-color: #efa666; }

.btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { position: absolute; left: 90px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: bold; color: #30abd5; transition: .5s; }

.btn-slide2 span.title2, .btn-slide2 span.title-hover2 { color: #efa666; left: 80px; }

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 { left: 80px; opacity: 0; }

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 { color: #fff; }

Bước 4: Save lại Template.
Bước 5: Khi viết bài viết, bạn muốn chèn nút Downoad vào bài viết thì chuyển qua chế độ soạn thảo HTML và dán đoạn HTML sau vào nơi bạn muốn hiển thị.
Nút Download style 1

button download css demo 1

 

<div id="wrap">
<a class="btn-slide" href="http://www.gocsuutam.com/" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Download</span>
  <span class="title-hover">Click here</span>
</a>
Nút Download style 2
button download css demo 2
<a class="btn-slide2" href="http://www.gocsuutam.com/" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>
Lưu ý: Thay đường link www.gocsuutam.com thành đường link của bạn. Ngoài ra, bạn có thể tùy chỉnh lại CSS tùy ý để phù hợp với template của bạn.
Chúc các bạn thành công. Nếu có câu hỏi thì bình luận bên dưới nhaaaaaaaa
Show 7 Comments

7 Comments

  1. Can you be more specific about the content of your article? After reading it, I still have some doubts. Hope you can help me.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *