Hướng dẫn tạo nút dowload cho blogspot

Hướng dẫn cách tạo nút dowload cho blogspot hiện nay có rất nhiều, nhưng sau đây mình sẽ hướng dẫn các bạn tạo nút dowload cho blogger với hiệu ứng css rất đẹp mắt kết hợp với fa fa icon.

Code nút tải cho blogspot , các bạn làm như sau

Đầu tiên các bạn tới phần Template > Edit HTML > Rồi các bạn dán phần code dưới phần b:skin

.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;}

 Hướng Dẫn Đăng Bài

Khi Đăng Bài Thì Các Bạn Chuyển Qua Phần HTML > Copy Đoạn Code Bên Dưới Rồi Dán Vào. Các Bạn Thay Dòng Chữ YOUR-LINK-HERE Thành Link URL 

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

Tweet