Cách tạo nút Download đẹp cho Blogger

Hôm nay mình sẽ hướng dẫn các bạn cách tạo nút Download đẹp cho Blogger. Với nút download đẹp sẽ mang lại trải nghiệm tốt cho người dùng, dễ dàng xác định liên kết, đẹp mắt và rất chuyên nghiệp.

Đố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 đẹp cho Blogger

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.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.

Chúc các bạn thành công!

Cách tạo nút Download đẹp cho Blogger

Tạo nút Download đẹp cho Blogger

1 Comments