Thêm nút Download và Demo vào trong Blogger với hiệu ứng CSS đẹp

Thêm nút Download và Demo vào trong Blogger - trong bài viết này tôi sẽ chia sẻ một bài hướng dẫn cách thêm nút Download và Demo bằng css đ...

Bài viết liên quan:

Thêm nút Download và Demo vào trong Blogger - trong bài viết này tôi sẽ chia sẻ một bài hướng dẫn cách thêm nút Download và Demo bằng css đẹp cho blogger. Hướng dẫn này có thể áp dụng cho các blogger template và wordpress theme.

Nút Demo và Download được tạo ra với CSS với hiệu ứng hover chuột. Hai biểu tượng này được lấy từ fontawesome. Vì vậy, trước khi bắt đầu hướng dẫn này bạn cần thêmfontawesome vào trong blog của bạn.

Đầu tiên bạn vào Blogger Dashboard > Template > Edit HTML và chèn code bên dưới vào trước thẻ đóng</style> 

.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:'\f135';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:'\f019';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;}

Lưu giao diện lại
Khi đăng bài mới, bạn chuyển qua phần  HTML Code , copy code bên dưới và chèn link của bạn vào chỗ YOUR-LINK-THERE khi muốn tạo nút Download và Demo

<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>

Kết quả

• DEMO
• DOWNLOAD