Tạo Nút Download Cho Blog

DEMO

Tạo nút DOWNLOAD cho blog bằng việc chỉnh sửa css

Tạo nút download cho bài viết blog bằng slider cực kỳ đẹp và hấp dẫn,

nút download cho bài viết blogspot, khi bạn click vào nút download thì sẽ hiển thị silder cực kỳ hấp dẫn

Cách tạo button download cho blogger

Đầu tiên các bạn 

mở blogger lên --> html edit --> tìm thẻ ]]></b:skin>

Và dán mã dưới đây vào trước thẻ trên

#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;
}

Lưu lại mẫu 

Để đảm bảo cho mọi bài viết đều có thể sử dụng được butto với hiệu ứng silder thì các bạn vào phần cài đặt bài đăng như hình dưới và chọn tùy chọn và click vào ''Nhần ''enter'' để ngắt dòng

Cách tạo button demo và download trong bài đăng

Sau khi đã làm các bước trên , mỗi khi đăng bài và các bạn sử dụng 2 button demo và dowload, hoặc tùy ý các bạn chỉnh sửa thì các bạn sẽ đăng bài như bên dưới

Mở bài đăng mới lên -> soạn thảo chế độ html và dán mã sau vào

code để có chữ Download

<div id="wrap">
<a href="Link Download" class="btn-slide2" 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>

Sau đó chỉnh sửa các thông số bên trên theo yêu cầu của bạn
vd: từ DOWNLOAD các bạn có thể đổi thành ''TẢI VỀ'' 
Còn phần địa chỉ của 2 button demo và dowload  các bạn thay url của các bạn muốn hiển thị ở button demo và dowload thay Link Download bằng link download của bạn