Hướng dẫn tạo nút download và demo trong blogspot 2018

Đối với những trang web blog về chia sẻ phần mềm hoặc blog chuyên về chia sẻ template miễn phí thì việc tích hợp thêm tính năng tạo nút download là một việc hết sức cần thiết nhất là những trang muốn kiếm thêm thu nhập từ việc rút gọn link download đó như mình chẳng hạn :D. Vậy làm thế nào để blog của bạn có 1 nút download và demo đẹp lại chuẩn seo , Hãy cũng template blog việt đi tìm câu trả lời trong bài viết này nhé

Sau khi tạo xong nút download và demo ( dùng để xem trước ) các bạn sẽ có thành quả như thế này đây, rất đẹp phải không 😉

Demo Click here Download Click here

Và sau đây là các bước để thực hiện rất đơn giản thôi các bạn cùng làm theo mình nhé

Đầu tiên các bạn mở Blogger lên --> html edit --> tìm thẻ </style> hoặc ]]></b:skin>

Và dán mã dưới đây vào trước 1 trong hai thẻ trên và bấm Save (lưu lại).

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

}

Sau đó các bạn muốn nút download và demo hiển thị ở đâu trong bài viết thì các bạn chèn thêm đoạn code sau bằng cách chuyển sang tab HTML và paste :

* Chú ý là đổi đường link " https://templateblogviet.blogspot.com/ " thành link bạn muốn nhé

Và bây giờ hãy tận hưởng thành quả của mình đi nào. Một nút download và demo cực đẹp sẽ tạo thêm điểm nhấn trong blog của các bạn . Hi vọng template blog việt đã mang lại cho các bạn 1 thủ thuật blog hữu ích. Hãy luôn đồng hành cùng mình nhé để xem được nhiều thủ thuật thú vị hơn nha