Tạo nút demo và download cho website và blog

Để tạo một bài viết review chuyên nghiệp các bạn cần tô sáng/tạo cho nút demo và download thật chuyên nghiệp. Đó là lý do cơ bản nhất để độc giả biết bạn chuyên nghiệp đến trình độ nào.

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>





Trong đó https://vungve.com/ là link bạn muốn chuyển đến .

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 !







1 Nhận xét

vungve.com không chấp nhận bình luận thiếu văn hóa

  1. nút demo và download giúp bài viết của bạn chuyên nghiệp hơn rất nhiều

    Trả lờiXóa

Đăng nhận xét

vungve.com không chấp nhận bình luận thiếu văn hóa

Mới hơn Cũ hơn