Hướng dẫn tạo nút Demo và Nút Download cho Blogger đẹp và đơn giản - Mẫu 1

 



Mình xin chia sẻ cách tạo nút Live Demo và Nút Download như trên hình như sau:

1. Vào chủ đề >  Chỉnh sửa HTML
2. Backup lại toàn bộ mã trước khi chỉnh sửa.
3. Nhấp chuột vào ô chứa mã
4. Ctrt + F tìm " ]]> "

Trước dấu ]]> hãy dán đoạn CSS Code này vô, xem hình cho dễ hình dung



Đoạn code để Copy
 
.button { -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); background:url("http://www.zurb.com/images/overlay-button.png") repeat-x scroll 0 0 #222222; border-bottom:1px solid rgba(0, 0, 0, 0.25); color:#FFFFFF !important; cursor:pointer; font-weight:bold; line-height:1; overflow:visible; font-size:17px; padding:8px 19px 9px; position:relative; text-decoration:none; text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25); width:auto; } .demobutton { background-color:#999999; text-align:center; width:150px; } .demobutton:hover { background-color:#00A0EE; } .downloadbutton { background-color:#91BD09; text-align:center; width:150px; } .downloadbutton:hover { background-color:#00AC00; } .button:hover { -moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); -webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); }

 Sau khi lưu lại, bạn vào soạn thảo chuyển qua chế độ HTML


dán đoạn code sau  để tạo nút Demo và nút Download

+ Nút DOWNLOAD 

<a class="button downloadbutton" href="Thay Link Download Vào" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Download</span></a>

 + Nút LIVE DEMO

<a class="demobutton button" href="Thay Link Demo Vào" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Live Demo</span></a>

 Sau khi thay xong, các bạn hãy nhấp " Xem trước" để thấy thành quả nhé


Chúc các bạn thành công !

Nguyễn Khoa Đăng

Kết nối, học hỏi, thành công

Đăng nhận xét

Cảm ơn bạn đã ghé thăm blog của mình, hi vọng nội dung bài viết làm bạn hài lòng!

Mới hơn Cũ hơn