Thêm nút Download và Demo vào trong Blogger với hiệu ứng CSS đẹp

Thêm nút Download và Demo vào trong Blogger - trong bài viết này tôi sẽ chia sẻ một bài hướng dẫn cách thêm nút Download và Demo bằng css đẹp cho blogger. Hướng dẫn này có thể áp dụng cho các blogger template và wordpress theme.

Nút Demo và Download được tạo ra với CSS với hiệu ứng hover chuột. Hai biểu tượng này được lấy từ fontawesome. Vì vậy, trước khi bắt đầu hướng dẫn này bạn cần thêmfontawesome vào trong blog của bạn.

Đầu tiên bạn vào Blogger Dashboard > Template > Edit HTML và chèn code bên dưới vào trước thẻ đóng</style> 

.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

Lưu giao diện lại
Khi đăng bài mới, bạn chuyển qua phần  HTML Code , copy code bên dưới và chèn link của bạn vào chỗ YOUR-LINK-THERE khi muốn tạo nút Download và Demo

<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>

Kết quả:

• DEMO
• DOWNLOAD
Nguồn http://lecanhphong.blogspot.com/

Chú thích: Vị trí đặt Source Code trên, ngoài chổ thẻ </style> ra, mình còn có thể đặt nó ở trên thẻ đóng </b:skin> cũng được nhé bạn.

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..