Hi ! Ở bài viết trước mình có giới thiệu cách tạo hiệu ứng Lazy Load cho blogspot với các bạn rồi đúng không ạ. Trong bài viết này mình sẽ hướng dẫn các bạn cài đặt nút "Button" Flat đơn giản mà đẹp cho blogspot. Bài viết này mình chủ yếu viết cho nhưng bạn mới bắt đầu làm quen với code và chưa biết kỹ thuật lập trình để tạo những phần tử cơ bản. Các bạn có trình độ cao hơn có thể đọc và tham khảo rồi cùng mình góp ý đưa ra những lời khuyên tại box comment bên dưới bài viết này nhé.
Cũng không có gì phức tạp cả. điều bạn cần làm là làm theo những hướng dẫn của mình ở phía dưới bài viết này thôi.
1. Thêm đoạn CSS bên dưới này trước thẻ </style>
2. Khi viết bài viết mới bạn muốn thêm button mà bạn đã tạo. Hãy chuyển qua tab HTML và chèn thêm 1 trong 2 dòng lệnh phía dưới vào sao cho phù hợp.
Nếu có bất kỳ thắc mắc nào hãy để lại comment của bạn ở phía dưới bài viết này bạn nhé. Mình sẽ giúp đỡ và trả lời bạn sớm nhất có thể. Chúc các bạn thành công.
Cũng không có gì phức tạp cả. điều bạn cần làm là làm theo những hướng dẫn của mình ở phía dưới bài viết này thôi.
1. Thêm đoạn CSS bên dưới này trước thẻ </style>
#wrap {margin:20px auto;text-align:center;}
a.btn {display:inline-block;position:relative;font-family:'Open Sans',sans-serif;text-decoration:none;font-weight:700;background:#30abd5;letter-spacing:.5px;padding:10px 20px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #22313F;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;}
a.btn:hover {background:#30abd5;color:#fff;box-shadow:inset 0px -50px 0px #22313F;}
a.btn:active {color:#05555e;box-shadow:inset 0px -50px 0px #f5f7fa;}
a.btn.warn {background:#f5f7fa;color:#05555e;box-shadow:inset 0 0 0 #30abd5;}
a.btn.warn:hover {background:#f5f7fa;color:#fff;box-shadow:inset 0px -50px 0px #30abd5;}
a.btn.warn:active {color:#fff;box-shadow:inset 0px -50px 0px #30abd5;} 0px -50px 0px #30abd5;}
Okay giờ tới bước 2 của phần này.2. Khi viết bài viết mới bạn muốn thêm button mà bạn đã tạo. Hãy chuyển qua tab HTML và chèn thêm 1 trong 2 dòng lệnh phía dưới vào sao cho phù hợp.
<div id="wrap"><a class="btn" href="#">Button</a></div>
<div id="wrap"><a class="btn warn" href="#">Button</a></div>
3. Đơn giản là Xong ! Bạn có thể xem lại bài viết của mình rằng button của bạn đã hiện hay chưa thôi.
Nếu có bất kỳ thắc mắc nào hãy để lại comment của bạn ở phía dưới bài viết này bạn nhé. Mình sẽ giúp đỡ và trả lời bạn sớm nhất có thể. Chúc các bạn thành công.
Cài đặt nút "Button" Flat đơn giản mà đẹp cho Blogspot
Reviewed by Vũ Thế Khoa
on
3/09/2016
Rating:

No comments: