Hey yo, Ở bài viết này Chúng tôi sẽ hướng dẫn các bạn cách thêm nút Demo và Download cho Blogspot. Demo bạn có thể xem trực tiếp tại các bài viết trong Blog của chúng tôi. Cách làm cũng khá đơn giản, chúng ta bắt đầu thực hiện nhé ^^
- Bước 1: Đăng nhập vào Blogger > Mẫu > Chỉnh sửa HTML
- Bước 2: Sao chép đoạn CSS dưới đây và Paste vào bên trên ]]></b:skin> hoặc bên trên </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}
- Bước 3: Sau khi viết bài bạn chuyển sang Tab HTML và chèn đoạn Code vào nơi mà bạn muốn hiển thị.
<div style="text-align:center;"><ul class="btn"><li><a class="demo" href="Your-Link" target="_blank">CONTACT</a></li><li><a class="download" href="Your-Link" target="_blank">DOWNLOAD</a></li</ul></div>À mà khoan, nhớ thay Your-Link bằng Link mà bạn muốn chuyển hướng đến nhé ^^
Chúc các bạn thành cô
