Hướng dẫn tạo nút CODE (Button) DEMO và DOWNLOAD Đẹp Blogger Blogspot

Hiện nay nhiều trang web Blogger Blogspot sử dụng để giới thiệu Template, CODE, giới thiệu sản phẩm và Hiệu Ứng nút DEMO và DOWNLOAD là rất cần thiết. Bởi vì những hiệu ứng CSS bắt mắt sẽ tạo thiện cảm với người dùng. Dưới đây là một số mẫu nút DEMO và DOWNLOAD mình sưu tầm được hi vọng các bạn sẽ thích

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

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>

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

Bước 1: Đăng nhập vào Blogger
Bước 2: Chọn Dashboard> Template> Edit HTML

Bước 3: Tìm đoạn code: ]]></b:skin>

Bước 4: Thêm đoạn mã sau lên trước code ]]></b:skin> vừa tìm được

/* Button Demo and Download by leetblogger.com ----------------------------------------------- */ .buttonx{display:inline-flex;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#FFF!important;border:2px solid #FFF!important;background-color:#0070b0!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important} .buttonx:hover{background-color:#f78d1d!important;background:0} .buttonx:active{position:relative;top:1px}

Bước 5: Lưu template lại
Đây là code để hiện nút Demo và Download Các bạn chèn vào bài viết nơi muốn cái nút đó hiển thị

 <div style="text-align: center;margin: 10px 0;"><a class="buttonx" href="http://codeseo.net/ " target="_blank">Demo</a><a class="buttonx" href=" http://codeseo.net/" target="_blank">Download</a></div>

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

Bước 1: Tìm code ]]></b:skin> chứa trong template
Bước 2: Coppy đoạn code sau đây và dán lên trước thẻ ]]></b:skin> 

/* CSS Simple Button Flat UI by Libra Yanada */ #wrap { margin:20px auto; text-align:center; } #wrap br { display:none; } .btn { display:inline-block; position:relative; font-family:'Source Sans Pro', Helvetica, sans-serif; background:#3b3f48; padding:6px 14px; font-size:14px; margin:0 3px; color:#fff!important; border-radius:3px; border:none; text-transform:uppercase; text-decoration:none; transition:all 0.3s ease-out; } .btn.down { background:#3b3f48; color:#fff!important; } .btn.down:hover,.btn.down:active,.btn:hover,.btn:active { background:#fc4f3f; color:#fff; } a.btn.down:hover,a.btn.down:active,a.btn:hover,a.btn:active { color:#fff; } .btn i { margin-left:10px; font-weight:normal; font-family:FontAwesome; }

Lưu mẫu lại
Bước 3: Coppy đoạn code này vào nơi các thánh muốn cái nút đó xuất hiện và nhớ thay url của các chế vào nhé!

<div id="wrap"> <a class="btn down" href="#" rel="nofollow" target="_blank">Button 1 <i class="fa fa-paper-plane"></i></a><br /> <a class="btn down" href="#" rel="nofollow" target="_blank">Button 2 <i class="fa fa-file"></i></a></div> 

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

Bước 1: Bạn coppy và chèn đoạn mã sau lên trước thẻ ]]></b:skin>

 /* CSS Simple Button */ #wrap { margin:20px auto; text-align:center; } #wrap br { display:none; } .btn { display:inline-block; position:relative; font-family:'Source Sans Pro', Helvetica, sans-serif; background:#fff ; padding:10px 14px; font-size:14px; margin:0 3px; color:#fff !important; border-radius:3px;border:none; text-transform:uppercase; text-decoration:none; transition:all 0.3s ease-out;border:#F20000 3px solid } .btn.down { background:#fff ; color:#F20000 !important; } .btn.down:hover,.btn.down:active,.btn:hover,.btn:active { background:#333; color:#fff ; } a.btn.down:hover,a.btn.down:active,a.btn:hover,a.btn:active { color:#F20000 ; } .btn i { margin-left:10px; font-weight:normal; font-family:FontAwesome; } .quickedit{ display:none; }

Bước 2: Lưu mẫu
Bước 3: Chèn mã sau vào bài viết, nơi mà các bác muốn xuất hiện nút Demo và Download

<div id="wrap"> <a class="btn down" href=" Links Demo " rel="nofollow" target="_blank"> Demo <i class="fa fa-paper-plane"></i></a><br /> <a class="btn down" href=" Links Download" rel="nofollow" target="_blank">Download <i class="fa fa-file"></i></a></div> 

Những code nút button DEMO và DOWNLOAD mình sẽ dần tổng hợp bên trên mọi người thường xuyên ghé thăm tham khảo nhé
Chúc các bạn có một Blog tuyệt vời !