Hướng Dẫn Tạo Nút Download Và Nút Demo trên Blogspot

Tạo nút Download và nút Demo cực kì đẹp và độc trên blogspot của mình

Nút Download và Demo cực đẹp cho Blogspot

Đầu tiên các bạn đăng nhập vào blog của các bạn, 

Vào phần Mẫu ==> Chỉnh Sửa Html

Tiếp theo các bạn bấm Ctrl + F và điền vào ]]></b:skin> hoặc </style> rồi nhấn enter để tìm một trong hai thẻ trên

Sau đó các bạn copy đoạn code dướ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 past vào DƯỚI một trong hai thẻ vừa tim được và lưu lại thế là xong

Tiếp Đến Là Phần Thêm Nút Download va Demo vào bài viết

Trong khi viết bài xong rồi các bạn muốn chèn nút Download và Demo vào bài viết các bạn chuyển sang tab HTML   và copy đoạn code này past vào dưới bài viết đó trong phần HTML

<div id="wrap">
<a href="//buiminhquang.tk" class="btn-slide" 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 href="//buiminhquang.tk" 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>

thay đoạn buiminhquang.tk bằng link download của các bạn :D thế là xong :D