 |
| Demo and Download Botton Blogspot |
Rất nhiều bạn hỏi mình cách tạo nút Demo và Download có hiệu ứng shadow (đổ bóng) đẹp cho blogspot, hôm nay 4TipsVn mới có dịp viết 1 bài nhỏ mong sẽ giúp ích cho các bạn.
Cách chèn
Trước hết cái nút Demo và Download này là do 4TipsVn tự edit nên không có trên mạng, chỉ có share tại trang 4TipsVn. Vì vậy bác nào có coppy bài viết thì để lại nguồn cho e ạ!Cách chèn rất đơn giản gồm 2 bước nhỏ
Bước 1: Các bạn chèn đoạn CSS sau lên trước thẻ ]]>&llt;/b:skin>, thẻ này nằm trong Mẫu (Template), các bạn mở mẫu ra edit rồi tìm thẻ trên sẽ thấy. Chèn xong lưu mẫu lại
/* CSS Simple Button Flat UI by 4TipsVn */ #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:#4CB04E; padding:6px 14px; font-size:14px; margin:0 3px; color:#fff!important; text-shadow: rgba(100, 100, 100, 0.34902) 0px 2px 3px;border-radius:3px; border:none; text-transform:uppercase; text-decoration:none; transition:all 0.3s ease-out;-webkit-box-shadow: 2px 0 7px rgba(0,0,0,.3);-moz-box-shadow:2px 0 7px rgba(0,0,0,.3);box-shadow:2px 0 7px rgba(0,0,0,.3)} .btn.down { background:#4CB04E; color:#fff!important; text-shadow: rgba(100, 100, 100, 0.34902) 0px 2px 3px;} .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; }
Bước 2: Chèn đoạn code sau vào bài viết, nơi mà các bạn muốn cái nút Demo và Download đó xuất hiện. Nhớ thay Link Download và Demo của các bạn nha!
<center>
<div id="wrap">
<a class="btn down" href="http://origin-btemplate.blogspot.com/" rel="nofollow" target="_blank">Demo <i class="fa fa-paper-plane"></i></a>
<a class="btn down" href="https://www.mediafire.com/download/92c21sggzg4tp49" rel="nofollow" target="_blank">Download <i class="fa fa-file"></i></a></div>
</center>
Nhớ chèn nốt cái font Awesome lên sau thẻ <head> nếu template bạn chưa có nhé! Nếu có rồi thì thôi! Font ngay bên dưới.
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>