Thêm button Download và Demo cho Blogspot

Bạn đang làm website bằng blogspot và không biết thêm một nút ( button) thế nào? Trong bài viết này mình sẽ hướng dẫn các bạn thêm nút Demo và Download bằng CSS vào blog của bạn . Bạn có thế xem qua demo dưới đây :

Live Demo

Download


Các bạn thấy được chứ ! Ok bây giờ chúng ta bắt đầu làm :

1. Vào Blogger Dashboard > Template > Edit HTML

2. Backup template trước khi chỉnh sửa .

3. Ctrl + F tìm ]]></b:skin> rồi Paste đoạn code dưới đây vào trước đó

Code:
.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); }                             

4. Save lại Template

Bây giờ cứ khi nào cần thêm nút ( button ) thì các bạn thêm mã sau vào trong " EDIT HTML"

Button DEMO

<a class="demobutton button" href="YOUR DEMO LINK HERE" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Live Demo</span></a>

Button Download

<a class="button downloadbutton" href="YOUR DOWNLOAD LINK HERE" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Download</span></a>

5. Các bạn có thể thay đổi tên DEMO và DOWNLOAD bằng tên khác và chỉnh sửa kích thước button trong code CSS ở trên. Bây giờ vào xem thành quả thôi