Hướng dẫn tạo nút Demo và Download cho blogger #3

Nút Demo và Download

Ở bài trước mình đã hướng dẫn các thánh tạo nút Demo và Download nhưng chưa đáp ứng đủ nhu cầu vọc vạch thẩm mỹ của các chế. Hôm nay mình share tiếp cách tạo nút Demo và Download trông cũng khá đẹp, cách làm cũng tương tự như 2 bài trước.
Rất đơn giản.
Bước 1: Tìm code ]]></b:skin> chứa trong template
Bước 2: Coppy đoạn code sau đây và dán lên trước thẻ ]]></b:skin> 

/* CSS Simple Button Flat UI by Libra Yanada */ #wrap { margin:20px auto; text-align:center; } #wrap br { display:none; } .btn { display:inline-block; position:relative; font-family:'Source Sans Pro', Helvetica, sans-serif; background:#3b3f48; padding:6px 14px; font-size:14px; margin:0 3px; color:#fff!important; border-radius:3px; border:none; text-transform:uppercase; text-decoration:none; transition:all 0.3s ease-out; } .btn.down { background:#3b3f48; color:#fff!important; } .btn.down:hover,.btn.down:active,.btn:hover,.btn:active { background:#fc4f3f; color:#fff; } a.btn.down:hover,a.btn.down:active,a.btn:hover,a.btn:active { color:#fff; } .btn i { margin-left:10px; font-weight:normal; font-family:FontAwesome; }

Lưu mẫu lại
Bước 3: Coppy đoạn code này vào nơi các thánh muốn cái nút đó xuất hiện và nhớ thay url của các chế vào nhé!

<div id="wrap"> <a class="btn down" href="#" rel="nofollow" target="_blank">Button 1 <i class="fa fa-paper-plane"></i></a><br /> <a class="btn down" href="#" rel="nofollow" target="_blank">Button 2 <i class="fa fa-file"></i></a></div> 

Chúc các chế thành công!