Tạo nút Demo và Download cho blogspot #1

Hiện nay có rất nhiều blog chuyên viết về đề tài share Template cho blogspot, nếu để ý kỹ chúng ta sẽ thấy trên blog của họ có nút "DEMO" và nút "DOWNLOAD" với nhiều hiệu ứng khác nhau và trông khá là bắt mắt.

Chính điều này khiến blog của các blogger trông rất chuyên nghiệp, khoa học và gọn gàng.

Thoạt nhìn thì cũng khá đơn giản nhưng để tạo được 2 nút đó cũng là một vấn đề nan giải cho các blogger mới vào nghề. Sau đây mình sẽ hướng dẫn các bạn cách để tạo nút "DEMO" và "DOWNLOAD" với hiệu ứng rất kool cho các blog chuyên về Template. Để tạo được 2 nút này cũng khá là đơn giản.

Bước 1:Chúng ta mở phần chỉnh sửa "Mẫu" và chọn chỉnh sửa "HTML". Chúng ta tìm đến thẻ "</style>" và dán đoạn code dưới đây vào đằng trước thẻ vừa tìm được.

.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:&#39;\f135&#39;;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:&#39;\f019&#39;;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;}

Thế là đã xong Bước 1 quá dễ dàng.

Bước 2: Quá đơn giản là chúng ta chỉ cần dán đoạn code sẽ xuất hiện  nút  "DEMO" và "DOWNLOAD" vào vị trí theo ý muốn của mình.

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

Giờ blog của chúng ta sẽ trở nên chuyên nghiệp và đẹp hơn cả.

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