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.
</b:skin> hoặc </style> , dán vào phía trên thẻ này đoạn mã dưới đây: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.
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
on
tháng 2 13, 2017
Rating:
Reviewed by Dii Max
on
tháng 2 13, 2017
Rating:
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é