Hi All,
Hiện nay, Blog ngày càng phổ biến và được rất nhiều người lựa chọn
sử dụng với các mục đích khác nhau như: chia sẻ đam mê cá nhân, Blog nhạc, Blog
phim, Blog hướng dẫn, Blog bán hàng,... Và hầu hết các loại blog đều sẽ có các
mục download dùng để chia sẽ tài liệu, video, nhạc,... Cho nên, lựa chọn bộ
Button Demo và Download đẹp cho Blog là hết sức cần thiết.
Share bộ button demo và download đẹp cho bài viết Blog
Hướng dẫn tạo bộ Button Demo và
Download cho bài viết Blog:
Bước 1: Đăng nhập Blogger --> Template --> Edit HTML,
sử dụng tổ hợp Ctrl + F và
tìm thẻ </style> hoặc ]]></b:skin>
Dán đoạn code dưới đây vào trước 2 thẻ nói trên, sau đó click Save (Lưu lại).
<style type='text/css'>
#wrap{margin:20px
auto;text-align:center}
#wrap br{display:none}
.btn-slide,.btn-slide2{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:50px;background:#fdfdfd;border:2px
solid #0099cc;margin:10px;transition:.5s}
.btn-slide2{border:2px solid
#efa666}
.btn-slide:hover{background-color:#0099cc}
.btn-slide2:hover{background-color:#efa666}
.btn-slide:hover
span.circle,.btn-slide2:hover
span.circle2{left:100%;margin-left:-45px;background-color:#fdfdfd;color:#0099cc}
.btn-slide2:hover
span.circle2{color:#efa666}
.btn-slide:hover
span.title,.btn-slide2:hover span.title2{left:40px;opacity:0}
.btn-slide:hover
span.title-hover,.btn-slide2:hover span.title-hover2{opacity:1;left:40px}
.btn-slide
span.circle,.btn-slide2
span.circle2{display:block;background-color:#0099cc;color:#fff;position:absolute;float:left;margin:5px;line-height:42px;height:40px;width:40px;top:0;left:0;transition:.5s;border-radius:50%}
.btn-slide2 span.circle2{background-color:#efa666}
.btn-slide
span.title,.btn-slide span.title-hover,.btn-slide2 span.title2,.btn-slide2
span.title-hover2{position:absolute;left:90px;text-align:center;margin:0
auto;font-size:16px;font-weight:bold;color:#30abd5;transition:.5s}
.btn-slide2
span.title2,.btn-slide2 span.title-hover2{color:#efa666;left:80px}
.btn-slide
span.title-hover,.btn-slide2 span.title-hover2{left:80px;opacity:0}
.btn-slide
span.title-hover,.btn-slide2 span.title-hover2{color:#fff}
</style>
Bước 2: Sau khi đã hoàn thành các thao tác ở bước 1,
mỗi khi đăng bài, nếu có nhu cầu sử dụng bộ Button Demo và Download, bạn copy
đoạn code sau vào chế độ htlm của bài đăng tại vị trí bạn muốn hiển thị.
<div id="wrap">
<a href="http://frog-art.blogspot.com " class="btn-slide" target="_blank">
<span
class="circle"><i class="fa
fa-rocket"></i></span>
<span
class="title">Demo</span>
<span
class="title-hover">Click here</span>
</a>
<a href=" http://frog-art.blogspot.com " class="btn-slide2" target="_blank">
<span
class="circle2"><i class="fa
fa-download"></i></span>
<span
class="title2">Download</span>
<span
class="title-hover2">Click here</span>
</a>
</div>
Thay đường link màu đỏ bằng link demo và download của
bạn!
Ok! Vậy là bạn đã hoàn thành xong việc trang bị bộ Button Demo và Download cho blog của mình. Bây giờ thì chỉ việc viết bài và hưởng thụ thành quả!
Nếu bạn thấy hay, nhớ like cho mình nhé! Cám ơn đã ghé thăm!
Ok! Vậy là bạn đã hoàn thành xong việc trang bị bộ Button Demo và Download cho blog của mình. Bây giờ thì chỉ việc viết bài và hưởng thụ thành quả!
Nếu bạn thấy hay, nhớ like cho mình nhé! Cám ơn đã ghé thăm!