Xin giới thiếu cách tạo nút demo và download bên dưới bài viết cho các bạn đang có ý định phát triển website blog về thủ thuật hay chia sẻ ...
Xin giới thiếu cách tạo nút demo và download bên dưới bài viết cho các bạn đang có ý định phát triển website blog về thủ thuật hay chia sẻ template blogspot .
Cách thực hiện :
Vào blogspot -> mẫu -> chỉnh sửa HMTL .Thêm đoạn code dưới đây trước thẻ </style>
Chèn code dưới đây vào bài viết mà bạn muốn đặt nút dowload và demo
Thay YOU R-LINK-HERE bằng Link Demo
Thay YOU-LINK-HERE bằng Link Download
Rất đơn thuần thôi. người dùng đã với 2 nút Demo và download thật đẹp rồi. chú ý các bạn phải chỉnh sửa phần css tránh trùng lặp mang template sẽ gây xấu hoặc k đc như trong demo bài viết của mình.
Cách thực hiện :
Vào blogspot -> mẫu -> chỉnh sửa HMTL .Thêm đoạn code dưới đây trước thẻ </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;}
Chèn code dưới đây vào bài viết mà bạn muốn đặt nút dowload 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>
Thay YOU R-LINK-HERE bằng Link Demo
Thay YOU-LINK-HERE bằng Link Download
Rất đơn thuần thôi. người dùng đã với 2 nút Demo và download thật đẹp rồi. chú ý các bạn phải chỉnh sửa phần css tránh trùng lặp mang template sẽ gây xấu hoặc k đc như trong demo bài viết của mình.