Hướng dẫn tạo nút Demo và Nút Download cho Blogger đẹp và đơn giản - Mẫu 2

 


Ở phần này mình sẽ hướng dẫn các bạn tạo nút  Demo và nút Download như hình !

1. Vào chủ đề > Chỉnh sửa HTML
2. Backup lại toàn bộ mã trước khi chỉnh sửa.
3. Nhấp chuột vào ô chứa mã
4. Ctrt + F tìm " 
</style> "

Trước thẻ 
</style> hãy dán đoạn Code này vô và lưu lại, xem hình cho dễ hình dung
Nếu chưa hiểu bạn có thể xem lại hướng dẫn ở mẫu 1

Đoạn code để Copy
 
.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important} .btn ul {margin:0;padding:0} .btn li{display:inline;margin:5px;padding:0;list-style:none;} .demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out} .demo {background-color:#3498DB;} .download {background-color:#1ABC84;} .demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;} .download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;} .demo:before {content:&#39;\f135&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;} .download:before {content:&#39;\f019&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

  Sau khi lưu lại, bạn vào soạn thảo chuyển qua chế độ HTML



  Dán đoạn code sau  để tạo nút Demo và nút Download

+ Nút DOWNLOAD 

<div style="text-align: center;"> <ul class="btn"> <li><a class="download" href="THAY LINK VÀO" target="_blank">DOWNLOAD</a></li> </ul> </div>

 + Nút LIVE DEMO

<div style="text-align: center;"> <ul class="btn"> <li><a class="demo" href="THAY LINK VÀO" target="_blank">DEMO</a> </li> </ul> </div>

 Sau khi thay xong, các bạn hãy nhấp " Xem trước" để thấy thành quả nhé

Nguyễn Khoa Đăng

Kết nối, học hỏi, thành công

Đăng nhận xét

Cảm ơn bạn đã ghé thăm blog của mình, hi vọng nội dung bài viết làm bạn hài lòng!

Mới hơn Cũ hơn