Vây để tạo được nút demo và download các bạn cần làm những gì ?
Đơn giản các bạn chỉ cần copy và dán vào html của website/blog của bạn thôi.Đầu tiên các bạn cần vào chủ đề html của website/blog của bạn, sau đó vào chỉnh sửa html nếu là blog.
Sau đó các bạn tìm thẻ <head> và thêm đường dẫn script sau và sau thẻ <head> hoặc sau thẻ đóng </head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>Sau khi bạn thêm script trên rồi các bạn thêm css cho nội dụng demo và download nhé.
Code thêm trước thẻ </style> và sau thẻ <style>Code css như sau:
#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; }
Sau đó bạn lưu lại template nhé !
Sau đó các bạn vào phần bài đăng và tạo bài đăng mới.
Các bạn đăng bài bình thường và các bạn muốn hiển thị nút demo và download ở đâu thì các bạn chuyển sang chế độ HTML và soạn nội dung demo và download như sau.
<div id="wrap">
<a class="mk-slide" href="https://vungve.com/" 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 class="mk-slide2" href="https://vungve.com/" 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>
OK. Như vậy Web Hay đã hướng dẫn thành công cho các bạn muốn tạo nút demo và download cho blog cũng như website của mình. Chúc các bạn có những phút giây hữu ích và thành công !
