Trong bài viết này mình 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 . Thêm nút Download và Demo ...
Trong bài viết này mình 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.
 |
| Thêm nút Download và Demo vào trong Blogger |
Nút Demo và Download được tạo ra bằng CSS với hiệu ứng hover chuột. Hai biểu tượng này được lấy từ font awesome.
Vì vậy, trước khi bắt đầu hướng dẫn này bạn cần thêm font awesome vào trong blog của bạn.
⛨ Hướng dẫn chi tiết thêm Font Awesome
filter_1 Đầu tiên bạnĐăng nhập vào Blogger > Chủ đề > Tùy chỉnh chọn Edit HTML. 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 lại giao diện chủ đề.filter_3 Khi bạn tạo bài viết mới bạn chuyển qua
Chế độ xem HTML , 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à nút 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>⛨ Nút DEMO / DOWNLOAD
CHIA SẺ CHO BẠN BÈ
