Tạo nút demo và download slider cho blogspot-Demo download button slider

Nhiều blog/web chia sẻ cần tạo điều kiện cho người dùng xem trước sản phẩm của mình thông qua hình thức demo và khi ưng ý có thể mang về dùng thông qua hình thức download.

Muốn giúp người dùng dễ dàng đạt được mục đích của mình chỉ qua vài nhấp chuột thì bài viết trên blogspot của bạn cần có hê thống nút demo và download.

Nút demo và download nhiều vô kể với các kiểu dáng khác nhau như sử dụng hình ảnh,css,animated...

Sau đây chia sẻ kiểu nút demo và download dạng slider sử dụng css kết hợp với font Awesome rất đẹp mắt và sinh động.

DEMO
Rê chuột vào nút để xem
DEMO
Bước 1
Blogspot của bạn cần có font Awesome nếu đang sử dụng font Awesome thì bỏ qua bước này.
Vào chỉnh sửa mẫu thêm link css sau vào trước thẻ </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Bước 2
Dán đoạn css sau vào trước thẻ ]]></b:skin>

#dedower {
    margin: 20px auto;
    text-align: center;
}

#dedower br {
    display: none;
}

.dtb-slide, .dtb-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;
}

.dtb-slide2 {
    border: 2px solid #efa666;
}

.dtb-slide:hover {
    background-color: #0099cc;
}

.dtb-slide2:hover {
    background-color: #efa666;
}

.dtb-slide:hover span.circle, .dtb-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.dtb-slide2:hover span.circle2 {
    color: #efa666;
}

.dtb-slide:hover span.title, .dtb-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.dtb-slide:hover span.title-hover, .dtb-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.dtb-slide span.circle, .dtb-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%;
}

.dtb-slide2 span.circle2 {
    background-color: #efa666;
}

.dtb-slide span.title,
  .dtb-slide span.title-hover, .dtb-slide2 span.title2,
  .dtb-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.dtb-slide2 span.title2,
  .dtb-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}

.dtb-slide span.title-hover, .dtb-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.dtb-slide span.title-hover, .dtb-slide2 span.title-hover2 {
    color: #fff;
}

Lưu mẫu
Bước 3
Khi post bài bạn sử dụng đoạn HTML sau
Mở đăng bài mới lên -> Bên chế độ soạn thảo văn bản HTML và dán mã sau vào.

<div id="dedower">
<a class="dtb-slide" href="Linkdemo" 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="dtb-slide2" href="Linkdownload" 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>

Trong đó:
- Link demo là URL demo bạn muốn hướng người xem tới.
- Link download URL nơi bạn để sản phẩm cho download