TỔNG HỢP CÁCH TẠO NÚT DEMO DOWNLOAD BUTTON CHO BLOGGER WORDPRESS, WEBSITE ĐẸP GỌN NHẸ # 20

TỔNG HỢP CÁCH TẠO NÚT DEMO DOWNLOAD BUTTON CHO BLOGGER WORDPRESS, WEBSITE ĐẸP GỌN NHẸ # 20

19:57:00
A. HƯỚNG DẪN CÁCH TẠO NÚT DEMO DOWNLOAD CHO BLOGGER, WORDPRESS, WEBSITE: Có rất nhiều cách tuy nhiên cách nào nhanh đơn giản , loading trang nhanh mình tổng hợp và hướng dẫn các bạn bằng kinh nghiệm của mình thì đẹp và nhanh tiện lợi là yếu tố quan trọng cho web blog của các bạn các bạn có thể thêm tiện ích này cho tất cả các nền tảng blogspot, blog wordpress, website của bạn.

TỔNG HỢP CÁCH TẠO NÚT DEMO DOWNLOAD BUTTON CHO BLOGGER WORDPRESS, WEBSITE ĐẸP GỌN NHẸ # 20
TỔNG HỢP CÁCH TẠO NÚT DEMO DOWNLOAD BUTTON CHO BLOGGER WORDPRESS, WEBSITE ĐẸP GỌN NHẸ # 20 

B. THỰC HÀNH HƯỚNG DẪN CÁCH TẠO NÚT DEMO DOWNLOAD CHO BLOGGER
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 Button download và demo cho bài viết, chia sẻ cho mọi người cách tạo nút TẢI, DEMO và DOWLOAD trong bài viết blog với hiệu ứng slider.
1. CÁCH 1: 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 hai thẻ 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;
}


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 hai 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://daihocadidaphat.blogspot.com" 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://daihocadidaphat.blogspot.com" 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>

Thay đoạn màu xanh dương bằng địa chỉ bạn muốn liên kết

 2. CÁCH 2: CÁCH TẠO NÚT DEMO DOWNLOAD BUTTON 
demo xem có ổn không như hình ảnh load nhẹ nhanh 
NÚT DEMO DOWNLOAD BUTTON
NÚT DEMO DOWNLOAD BUTTON
demo download cho blogspot
Bước 1: Vào Mẫu=> chọn sao lưu và khôi phục. Download template hiện tại của bạn đề phòng trường hợp xấu nhất.
Bước 2:Vào Mẫu=>Chỉnh sửa HTML
Bước 3: Tìm đến đoạn code Css (tìm đến thẻ <style type='text/css'>)

Bước 4: Dán đoạn code sau vào sau thẻ <style type='text/css'>

/* Custom Button */ 
.whitebutton {margin:20px auto;padding:20px 0;width:200px;}
.whitebutton a {background:#fff;color:#666;display:block;font-size:17px;font-weight:700;
font-family:&#39;Arial&#39;,Verdana,sans-serif;height:50px;line-height:50px;text-align:center;
text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2;
border:1px solid #e0e0e0;}
.whitebutton a:before {content: &#39;\f019&#39;;font-family:FontAwesome;font-weight:normal;
padding:8px;margin-left:-12px;margin-right:6px;}
.whitebutton a, .whitebutton span {box-shadow:0 2px 5px rgba(0,0,0,0.1);}
.whitebutton span {background:#444;color:#fff;display:block;font-size:12px;font-family:&#39;Arial&#39;, Verdana,sans-serif;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;border:1px solid #333;text-transform:uppercase;
font-weight:bold;}
.whitebutton .up {background:#e46f61;border-color:#ca6256;margin:-10px auto;opacity:0;border-radius:0 0 5px 5px;transform: translate(0,-50px);transition:350ms;}
.whitebutton .down {margin:-45px auto;opacity:0;border-radius:5px 5px 0 0;transform: translate(0,-50px);transition:350ms;}
.whitebutton .down:before {content:&#39;\f14a&#39;;font-family:FontAwesome;font-weight:normal;
margin-right:6px;color:#aaa;}
.whitebutton:hover .up {opacity:1;transform: translate(0,0);}
.whitebutton:hover .down {opacity:1;transform: translate(0,-90px);}
.whitebuttondemo {margin:20px auto;padding:20px 0;width:200px;}
.whitebuttondemo a {background:#096a91;color:#fff;display:block;font-size:17px;font-weight:700;
font-family:&#39;Arial&#39;,Verdana,sans-serif;height:50px;line-height:50px;text-align:center;
text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2;
border:1px solid #096a91;}
.whitebuttondemo a:before{content:&#39;\f002&#39;;font-family:FontAwesome;font-weight:normal;
padding:8px;margin-left:-12px;margin-right:6px;}
.whitebuttondemo a, .whitebutton span {box-shadow:0 2px 5px rgba(0,0,0,0.1);}
.whitebuttondemo span {background:#444;color:#fff;display:block;font-size:12px;font-family:&#39;Arial&#39;, Verdana,sans-serif;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;border:1px solid #333;text-transform:uppercase;
font-weight:bold;}
.whitebuttondemo .up {background:#444;border-color:#333;margin:-10px auto;opacity:0;border-radius:0 0 5px 5px;transform: translate(0,-50px);transition:350ms;}
.whitebuttondemo:hover .up {opacity:1;transform: translate(0,0);}



Đây là code dùng để định dạng cho nút demo download. Để sử dụng các bạn thực hiện như sau:
<div class="whitebuttondemo"> <a href="#">Demo</a> <span class="up">click to begin</span> </div>

<div class="whitebutton"> <a href="#">Download</a> <span class="up">click to begin</span> <span class="down">1.6MB .rar</span> </div>
Các bạn thay # thành link của bạn.

Cuối cùng là xem thành quả.
C. VIDEO HƯỚNG DẪN CÁCH TẠO NÚT DEMO DOWNLOAD CHO BLOGGER 






D. KẾT LUẬN HƯỚNG DẪN CÁCH TẠO NÚT DEMO DOWNLOAD CHO BLOGGER: 
Tạo nút tải hay download hay demo , view cho web blog đều như nhau nhanh nhẹ và đẹp các bạn chú ý chọn cho mình một cách loading nhanh và đơn giản giúp tiết kiệm thời gian và nâng cao hiệu quả kiếm tiền online với blog

------------------------ cảm ơn các bạn like + share

About

Với phương pháp đào tạo Smart, giảng viên kinh nghiệm ,trải nghiệm môi trường giáo dục đào tạo từ mầm non tới đại học với các chuyên ngành mục đích từ thiện cho người không có tiền tới trường: học âm nhạc, quản trị kinh doanh, kế toán, công nghệ thông tin, kiếm tiền online, blog chia sẻ, các thủ thuật máy tính...

Next
« Prev Post
Bài trước
Next Post »
Đăng ký: Đăng Nhận xét (Atom)

VIDEO

[ Video ] [ pvid ]