Tạo nút Demo và Download cho bài viết trong blogspot

Chào các bạn, nếu bạn phát triển 1 Blog chuyên về các tài nguyên, code, phần mềm thì không thể thiếu những link để download những tài nguyên đó. Và trong bài viết này, mình xin hướng dẫn các bạn Tạo nút Demo và Download cho bài viết trong blogspot.

Nó có tác dụng gì?

Tác dụng gì ư? Nó sẽ hiển thị 1 khung có hiện demo và nút download cho độc giả tiện xem demo và download tài nguyên của bạn. Ngoài ra nó còn giúp Blog của bạn trông chuyên nghiệp và dễ thu hút độc giả hơn.

Các bạn có thể xem demo: tại đây

Tạo nút Demo và Download cho bài viết trong blogspot

Trước tiên, bạn hãy dán đoạn code bên dưới vào trước thẻ ]]></b:skin> trong template của bạn.

[CENTER]#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;

}[/CENTER]

Như vậy là xong phần CSS. Bây giờ để có thể chèn được khung Demo và Download vào bài viết trong Blog, bạn phải cài đặt như hình ở phần cài đặt bài viết như hình:

Sau đó để chèn khung này vào bài viết thì bạn cần phái bật chế độ soạn thảo là HTML lên rồi chèn đoạn code này vào vị trí mong muốn:

<div id="wrap"><a href="http://www.trandinhduc.xyz/" class="btn-slide">  <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="http://www.trandinhduc.xyz/" class="btn-slide2">  <span class="circle2"><i class="fa fa-download"></i></span>  <span class="title2">Download</span>  <span class="title-hover2">Click here</span></a></div>

Trong đó, bạn thay http://www.trandinhduc.xyz/ lần lượt là link của nút Demo và nút Download khi độc giả click vào.


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