TẠO NÚT DOWNLOAD VÀ DEMO CHO BLOGSPOT

Đối với những blog thiên về chia sẽ tài liệu, phần mềm , nhạc hay phim ảnh , clip... thì các bạn sẽ thường để lại những đường link chia sẻ và để làm đẹp cũng như rút gọn lại những đường link này, làm cho nó thu gọn vào với 1 nút nhỏ

Demo Click here Download Click here

Quá trình  thực hiện như sau :
Bước 1 :
- Đăng nhập Blogger - Mẫu  - Chỉnh Sửa HTML
- Kiểm tra xem trong template của bạn đã có đoạn code bên dưới chưa nhé , nếu chưa có các bạn copy đoạn code và dán vào trước  thẻ đóng </head>

 <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

 - Tìm đến trước thẻ đóng ]]></b:skin   hoặc </style> chèn đoạn  code 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 2 :
Các bạn quay trở lại bải đăng hoặc bài viết mới, viết bài bình thường nhé, mỗi khi các bạn cần chèn đườn link để tạo nút demo hay download vào chỗ nào thì các bạn chuyển qua tab   -  Chỉnh Sửa HTML nhé , và dán đoạn code CSS bên dưới vào:

Code 1 : Demo

<div id="wrap"> <a class="btn-slide" href="https://kho-internet.blogspot.com/" target="_blank">   <span class="circle"><i class="fa fa-rocket"></i></span>   <span class="title">Demo</span>   <span class="title-hover">Click here</span> </a> </div>

Code 2 : Download

<div>
<a class="btn-slide2" href="https://kho-internet.blogspot.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>

Code 3 : Tổng Hợp Demo - Download
<div id="wrap">
<a class="btn-slide" href="https://kho-internet.blogspot.com/" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a> 
<a class="btn-slide2" href="https://kho-internet.blogspot.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>
Chúc các bạn thành công!