D

Tạo nút Demo và Download tuyệt đẹp cho Blogspot

Tạo nút Demo và Download tuyệt đẹp cho Blogspot Bạn đang sở hữu một blog lưu trữ, chia sẻ tài nguyên trên mã nguồn  blogger/blogsp...

Mọi bài đăng được viết bởi tác giả của blog, vui lòng ghi nguồn ghi copy bài đăng từ trang này

Tạo nút Demo và Download tuyệt đẹp cho Blogspot

Bạn đang sở hữu một blog lưu trữ, chia sẻ tài nguyên trên mã nguồn blogger/blogspot? Bạn muốn có một nút Demo – Download thật đẹp để trang trí cho các bài viết thêm sinh động, bắt mắt? Ngày hôm nay, mình xin chia sẻ tới các bạn cách tạo nút Demo và Download mà mình sưu tầm được. Chỉ với vài đoạn mã đơn giản thôi, các bài viết của bạn chắc chắn sẽ thu hút độc giả hơn rất nhiều đó.

LÀM SAO ĐỂ TẠO NÚT DEMO VÀ DOWNLOAD CHO BLOGSPOT?

Bước đầu tiên, chúng ta sẽ thêm biểu tượng icon và tạo phong cách bằng CSS cho 2 nút này. Với icon, hãy chắc rằng blog của bạn đã được cài đặt Font Awesome nhé.
Tiếp đến là thêm CSS, tại trang quản trị blogger, bạn vào Chủ đề > Chỉnh sửa HTML. Sau đó dùng tổ hợp phím Ctrl + F tìm thẻ đóng </b:skin> hoặc </style> , dán vào phía trên thẻ này đoạn mã dưới đây:
#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;}
Chọn Lưu chủ đề để hoàn tất quá trình cài đặt.

SỬ DỤNG NÚT DEMO VÀ DOWNLOAD

Khi viết bài viết, để chèn nút Demo và Download, bạn cần chuyển sang tab soạn thảo bằngHTML, sau đó nhập đoạn code dưới đây vào ví trí bạn muốn hiển thị.
<div id="wrap">
<a class="btn-slide" href="http://diimax-it.tk/" 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="btn-slide2" href="http://diimax-it.tk/" 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>
Lưu ý:
    Thay http://diimax-it.tk bằng liên kết chuyển hướng khi người dùng click vào nút. 
    Thay fa fa-rocket và fa fa-download bằng mã icon Font Awesome mà bạn thích.

TỔNG KẾT

Với vài bước đơn giản phía trên, bạn đã có thể tự tạo nút Demo và Download tuyệt đẹp cho blog của mình rồi. Nếu gặp bất cứ khó khăn gì trong quá trình cài đặt, đừng ngại bình luận ngay xuống phía dưới bài viết này nhé.

Tạo nút Demo và Download tuyệt đẹp cho Blogspot Reviewed by Dii Max IT on tháng 2 13, 2017 Rating: 5

Không có nhận xét nào:

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé

Phát Triển BởiDii Max | Facebook

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Dii Max IT. Được tạo bởi Blogger.