Để tạo được button như hình thì ta cần phải khai báo font awesome cho blog.
Các bạn xem trong template của mình đã khai báo font chưa nhé.
Để xem các bạn vào phần Mẫu > Chỉnh sửa html > Ctrl +F > Tìm thẻ <head>
trong thẻ đó bạn tìm xem có dòng code này không
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
Nếu có rồi thì thôi,nếu chưa có các bạn thêm dòng code đó vào sau thẻ <head> là được.
Bây giờ ta sẽ thực hiện thủ thuật này:
Các bạn vào Mẫu > Chỉnh sửa html > Ctrl+F > Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>
.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;}
Khi đăng bài các bạn chuyển qua tab HTML coppy đoạn code bên dưới vào,thay phân Link_Here thành link bạn cần chuyển hướng tới.
<div style="text-align: center;">Chúc bạn thành công với thủ thuật này
<ul class="btn">
<li><a class="demo" href="LINK_HERE" target="_blank"><i class="fa fa-rocket" aria-hidden="true"></i> LIVE DEMO</a></li>
<li><a class="download" href="LINK_HERE" target="_blank"><i class="fa fa-download" aria-hidden="true"></i> DOWNLOAD</a></li>
</ul>
</div>
Không có nhận xét nào:
Đăng nhận xét