Tạo nút Demo và Download cho Blogger

Tạo nút Demo và Download cho bài viết blog bằng slider cực kỳ đẹp và hấp dẫn, nút download và demo cho bài viết blogspot, khi bạn click vào nút download thì sẽ hiển thị silder cực kỳ hấp dẫn Button download và demo cho bài viết, chia sẻ cho mọi người cách tạo nút DEMO và DOWLOAD trong bài viết blog với hiệu ứng slider.
Cách tạo button Download, Demo cho blogger.
Đầu tiên các bạn mở Blogger lên --> html edit --> tìm thẻ </style> hoặc ]]></b:skin>
Và dán mã dưới đây vào trước hai thẻ trên và bấm Save (lưu lạ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;
}

Cách tạo button Demo và Download trong bài đăng

Sau khi đã làm các bước trên , mỗi khi đăng bài và các bạn sử dụng hai button Demo và Dowload, hoặc tùy ý các bạn chỉnh sửa thì các bạn sẽ đăng bài như bên dưới.

Mở bài đăng mới lên -> soạn thảo chế độ html và dán mã sau vào.
Vậy là xong

STAR QUÁCH

Tạo nút Demo và Download cho Blogger

Thầy Quách Nhị

Phản Hồi Độc Giả

STAR QUÁCH

Tạo nút Demo và Download cho Blogger

Thầy Quách Nhị

Bài Viết Cùng Chuyên Mục

Phản Hồi Độc Giả