Tạo nút demo và download cho blogspot với hiệu ứng cực đẹp

Đối với những bạn làm blog về mảng game , phần mềm , nhạc hay phim ảnh , clip , chia sẻ tài liệu . . . thì các bạn sẽ thường để lại những đường link chia sẻ dạng như thế này Clip nhạc edm hot nhất tháng 10 -2017 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ỏ như này :

Demo Click here

Các bạn xem bản Demo ở đây

Quá trình thực hiện như sau :
Giai đoạn 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;
}

- Lưu Mẫu ( Saves ) Template Lại
Đến đây coi như các bạn đã hoàn thành giai đoạn 1

Giai đoạn 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://hpmda.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://hpmda.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://hpmda.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://hpmda.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>

Tất cả các thủ thuật trên đã được mình áp dụng thành công và mới chia sẻ nhé , nếu có bất cứ thắc mắc nào các bạn có thể liên hệ với mình tại mục Contact hoặc mail cho mình qua địa chỉ hòm thư : hpmdav@gmail.com

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

Lưu Ý :
- Tham gia group Hỏi Đáp nhanh nhất Tại đây để được trả lời nhanh nhất
- Không Nói tục chửi bậy , hoặc spawm tại mục Bình Luận
- Nếu có sao chép hay sử dụng bài viết vui lòng ghi rõ nguồn

Hoàng Phong MDA Group

Tạo nút demo và download cho blogspot với hiệu ứng cực đẹp

Không có nhận xét nào:

Đăng nhận xét