Tạo nút demo download cho blogspot chuẩn seo

Có rất nhiều cách để tạo nút demo download cho blogspot mà bạn có thể tìm thấy trên mạng. Tuy nhiên, hầu hết các nút này được tạo bằng photoshop hoặc hình ảnh, còn không thì cũng không được đẹp, không được như ý muốn. Hoặc ít nhiều ảnh hưởng đến tốc độ load của blog.

Mình đã tìm được 1 cách để tạo nút demo download này mà không ảnh hưởng đến tốc độ tải trang. Cách tối ưu nhất cho blog của bạn.

Cách tạo nút demo download cho blogspot

Bước 1: Vào Mẫu=> chọn sao lưu và khôi phục. Download template hiện tại của bạn đề phòng trường hợp xấu nhất.

Bước 2:Vào Mẫu=>Chỉnh sửa HTML

Bước 3: Tìm đến đoạn code Css (tìm đến thẻ <style type='text/css'>)

Bước 4: Dán đoạn code sau vào sau thẻ <style type='text/css'>

/* Custom Button */ 
.whitebutton {margin:20px auto;padding:20px 0;width:200px;}
.whitebutton a {background:#fff;color:#666;display:block;font-size:17px;font-weight:700;
font-family:'Arial',Verdana,sans-serif;height:50px;line-height:50px;text-align:center;
text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2;
border:1px solid #e0e0e0;}
.whitebutton a:before {content: '\f019';font-family:FontAwesome;font-weight:normal;
padding:8px;margin-left:-12px;margin-right:6px;}
.whitebutton a, .whitebutton span {box-shadow:0 2px 5px rgba(0,0,0,0.1);}
.whitebutton span {background:#444;color:#fff;display:block;font-size:12px;font-family:'Arial', Verdana,sans-serif;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;border:1px solid #333;text-transform:uppercase;
font-weight:bold;}
.whitebutton .up {background:#e46f61;border-color:#ca6256;margin:-10px auto;opacity:0;border-radius:0 0 5px 5px;transform: translate(0,-50px);transition:350ms;}
.whitebutton .down {margin:-45px auto;opacity:0;border-radius:5px 5px 0 0;transform: translate(0,-50px);transition:350ms;}
.whitebutton .down:before {content:'\f14a';font-family:FontAwesome;font-weight:normal;
margin-right:6px;color:#aaa;}
.whitebutton:hover .up {opacity:1;transform: translate(0,0);}
.whitebutton:hover .down {opacity:1;transform: translate(0,-90px);}
.whitebuttondemo {margin:20px auto;padding:20px 0;width:200px;}
.whitebuttondemo a {background:#096a91;color:#fff;display:block;font-size:17px;font-weight:700;
font-family:'Arial',Verdana,sans-serif;height:50px;line-height:50px;text-align:center;
text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2;
border:1px solid #096a91;}
.whitebuttondemo a:before{content:'\f002';font-family:FontAwesome;font-weight:normal;
padding:8px;margin-left:-12px;margin-right:6px;}
.whitebuttondemo a, .whitebutton span {box-shadow:0 2px 5px rgba(0,0,0,0.1);}
.whitebuttondemo span {background:#444;color:#fff;display:block;font-size:12px;font-family:'Arial', Verdana,sans-serif;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;border:1px solid #333;text-transform:uppercase;
font-weight:bold;}
.whitebuttondemo .up {background:#444;border-color:#333;margin:-10px auto;opacity:0;border-radius:0 0 5px 5px;transform: translate(0,-50px);transition:350ms;}
.whitebuttondemo:hover .up {opacity:1;transform: translate(0,0);}

Đây là code dùng để định dạng cho nút demo download. Để sử dụng các bạn thực hiện như sau:

<div class="whitebuttondemo"> <a href="#">Demo</a> <span class="up">click to begin</span> </div>

<div class="whitebutton"> <a href="#">Download</a> <span class="up">click to begin</span> <span class="down">1.6MB .rar</span> </div> 

Các bạn thay # thành link của bạn.
Cuối cùng là xem thành quả.
Đây là cách tạo nút demo download mình tìm được trên 1 trang chia sẻ thủ thuật và đang áp dụng các bạn có thể xem demo của mình tại đây. Chúc các bạn thành công.

Share :

Tweet

✚

Related Post