Uy Tín Chất Lượng - Đồng Hành Cùng Khách Hàng
Đăng nhập | Đăng ký
Danh mục sản phẩm
Bởi
Tài liệu

Hướng dẫn tạo nút Download cho blogspot.

Ngày 07/05/2024

Xin chào bạn ở bài viết này, chúng ta sẽ giới thiệu bạn cách tạo nút Download đẹp cho Blogger. Sử dụng một nút download có thiết kế đẹp sẽ cải thiện trải nghiệm của người dùng, giúp họ dễ dàng nhận biết và tạo ra một ấn tượng chuyên nghiệp cho blog của bạn.chúng ta sẽ tìm hiểu cách tạo nút Download đẹp cho Blogger. Sử dụng một nút download


Đối với các blogger chia sẻ phần mềm, tài liệu hoặc tài nguyên, việc bổ sung nút download vào mỗi bài viết là vô cùng quan trọng. Điều này giúp người dùng truy cập và tải về nội dung một cách thuận tiện. Bằng cách sử dụng một số mã code CSS đơn giản, bạn có thể tạo ra một nút download đẹp như sau:

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ẻ đóng  </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 chì 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.tinhteso.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.tinhteso.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>
Các bạn chú ý nhé thay website www.tinhteso.com bằng link tải nhé.