Tạo Nút Demo Download động dưới bài viết của blog với CSS3

Chắc hẳn các bạn rất muốn Blog mình trở nên chuyên nghiệp với các nút của CSS3 này phải không, khi dùng CSS3 này sẽ tạo ra các nút mà bạn không cần chèn hình như có sẵn trên mạng Bây giờ bắt đầu thực hiện

Bước 1: Đăng nhập vào Blogger
Bước 2: Chọn Mẫu -> Chỉnh sửa HTML
Bước 3: Dùng tổ hợp phím là Ctrl + F để tìm thẻ ]]></b:skin>
Bước 4: Copy đoạn css bên dưới & dán trên 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;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;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}

Bước vừa làm là chỉ thêm css, bước tiếp theo sẽ làm cho xuất hiện 2 nút dưới bài viết

Khi các bạn đã hoàn thành bài viết thì chuyển qua tab HTML & thêm đoạn copy đoạn code này rồi dán vào

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

Trong đó phần chữ màu đỏ là điền địa chỉ (link demo), còn phần chữ màu xanh là điền địa chỉ (link download).

CHÚC CÁC BẠN THÀNH CÔNG!

Author : Admin

Share this

Related Posts