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 !

Đă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