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.
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
<div id="wrap">
<a class="btn-slide" href="http://www.binhpro.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
<a class="btn-slide2" href="http://www.binhpro.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.binhpro.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.
Dinzz Hoàng 👇
Cảm ơn bạn đã theo dõi bài viết của Dinzz Hoàng. Bấm theo dõi để nhận được nhiều thông tin hữu ích khác nhaaa
Không có nhận xét nào:
Đăng nhận xét