Tạo nút DEMO và DOWNLOAD cho blog bằng việc chỉnh sửa css

Tạo nút demo và download cho bài viết blog bằng slider cực kỳ đẹp và hấp dẫn,
nút download và demo cho bài viết blogspot, khi bạn click vào nút download thì sẽ hiển thị silder cực kỳ hấp dẫn
    DEMO

Button download và demo cho bài viết chia sẻ

Trong bài viết này topchiase.net sẽ chia sẻ cho mọi người cách tạo nút DEMO và DOWLOAD trong bài viết blog với hiệu ứng slider

VD: blog của bạn chuyên viết về các bài hướng dẫn chia sẻ, và dowload chẳng hạn như những blog chuyên chia sẻ template mẫu blog thì việc chèn các nút DOWNLOAD hay DEMO là không thể thiểu, button DOWNLOAD và DEMO với hiệu ứng slider cực kỳ đẹp và hấp dẫn

Lưu ý là trước khi sử dụng cách tạo button DEMO, DOWNLOAD theo phong cách tôi hướng dẫn bên dưới, bạn hãy chắc rằng blog của bạn đã sử dụng font hợp lý

Cách tạo button download, demo  cho blogger

Đầu tiên các bạn 
mở blogger lên --> html edit --> tìm thẻ </style> hoặc ]]></b:skin>
Và dán mã dưới đây vào trước 2 thẻ trên


#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 lại mẫu 

Để đảm bảo cho mọi bài viết đều có thể sử dụng được butto với hiệu ứng silder thì các bạn vào phần cài đặt bài đăng như hình dưới và chọn tùy chọn và click vào ''Nhần ''enter'' để ngắt dòng
tao button demo download cho blog


Cách tạo button demo và download trong bài đăng

Sau khi đã làm các bước trên , mỗi khi đăng bài và các bạn sử dụng 2 button demo và dowload, hoặc tùy ý các bạn chỉnh sửa thì các bạn sẽ đăng bài như bên dưới

Mở bài đăng mới lên -> soạn thảo chế độ html và dán mã sau vào

<div id="wrap">
<a href="http://topchiase.net" 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="http://topchiase.net" 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>

Sau đó chỉnh sửa các thông số bên trên theo yêu cầu của bạn
vd: từ DEMO các bạn có thể chỉnh thành '' XEM''  hoặc DOWNLOAD các bạn có thể đổi thành ''TẢI VỀ'' 
Còn phần địa chỉ của 2 button demo và dowload  các bạn thay url của các bạn muốn hiển thị ở button demo và dowload thay http://topchiase.net  = url mà các bạn muốn hiển thị  

CHÚC CÁC BẠN THÀNH CÔNG. NHỚ +1 

Nhận xét&Bình luận

Kết nối&Chia sẻ:

Designed by www.kenhshare.net | Copyright © 2010 Template Design by Mr.Thành Công