Cách tạo nút Demo và Download mới nhất cho blogspot

Đối với các trang blog của các bạn nào mà có nhiều bài viết chia sẽ thủ thuật có kèm theo link tải file mẫu hay có mục demo xem trước, thì với bài viết chia sẽ này của mình sau đây sẽ giúp cho bài đăng của các bạn trông chuyên nghiệp à cuốn hút hơn rất nhiều. Hơn nữa mẹo hày này các bạn không sử dụng các code làm nặng theme của các bạn cũng như cực mượt và nhẹ. 


Các bạn có thể tham khảo trước mẫu nút demo và download ở bên dưới

Demo Click here Download Click here

Cách làm tuần tự theo 3 bước như sau

Bước 1: Thêm mẫu Font Awesome cho Blogger của các bạn

Bước này các bạn có thể bỏ qua nếu trên template của blog các bạn đã tích hợp sẵn bộ font awesome rồi. Nếu không có bộ font này, các bạn chép hết đoạn code bên dưới và chèn trước thẻ </head>

Lưu ý nếu các bạn nào làm chưa quen có thể back=up temlate của các bạn lại để phòng có sự cố gì sẽ quay trở lại được nhé

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css");
//]]>
</script>
<noscript>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/>
</noscript>

Bước 2: Thêm mẫu CSS cho code demo và dowload

Chép hết đoạn code bên dưới và chèn trước ]]></b:skin>

/* CSS Demo & Download Buttons By (www.TwistBlogg.com) */
.bie-slide,
 .bie-slide2 {
  position: relative;
  display: inline-block;
  height: 40px;
  width: 170px;
  line-height: 40px;
  padding: 0;
  border-radius: 50px;
  background: #fdfdfd;
  border: 2px solid #f84f4f;
  margin: 10px;
  transition: all 0.5s ease-in-out;
 }
 .bie-slide2 {
  border: 2px solid #36D7B7;
 }
 .bie-slide:hover {
  background-color: #f84f4f;
 }
 .bie-slide2:hover {
  background-color: #36D7B7;
 }
 .bie-slide:hover span.circle,
 .bie-slide2:hover span.circle2 {
  left: 100%;
  margin-left: -45px;
  background-color: #fdfdfd;
  color: #f84f4f;
 }
 .bie-slide2:hover span.circle2 {
  color: #36D7B7;
 }
 .bie-slide:hover span.title,
 .bie-slide2:hover span.title2 {
  left: 40px;
  opacity: 0;
 }
 .bie-slide:hover span.title-hover,
 .bie-slide2:hover span.title-hover2 {
  opacity: 1;
  left: 28px;
 }
 .bie-slide span.circle,
 .bie-slide2 span.circle2 {
  display: block;
  background-color: #f84f4f;
  color: #fff;
  position: absolute;
  float: left;
  margin: 5px;
  line-height: 30px;
  height: 30px;
  width: 30px;
  top: 0;
  left: 0;
  transition: .5s;
  border-radius: 50%;
 }
 .bie-slide2 span.circle2 {
  background-color: #36D7B7;
 }
 .bie-slide span.title,
 .bie-slide span.title-hover,
 .bie-slide2 span.title2,
 .bie-slide2 span.title-hover2 {
  position: absolute;
  left: 65px;
  text-align: center;
  margin: 0 auto;
  font-size: 16px;
  font-weight: bold;
  color: #f84f4f;
  transition: .5s;
 }
 .bie-slide2 span.title2,
 .bie-slide2 span.title-hover2 {
  color: #36D7B7;
 }
 .bie-slide span.title-hover,
 .bie-slide2 span.title-hover2 {
  left: 80px;
  opacity: 0;
 }
 .bie-slide span.title-hover,
 .bie-slide2 span.title-hover2 {
  color: #fff;
 }

Bước 3: Tiến hành chèn nút demo và download vào bài đăng blog

Để chèn nút demo và download trên bài đăng. Các bạn chuyển sang chế độ soạn thảo trên Html và paste hết cả đoạn vào vị trí muốn chèn thích hợp

<div id="wrap" style="text-align:center">
<a class="bie-slide" href="#" rel="no-follow" target="_blank">
  <span class="circle"><i class="fa fa-laptop"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a class="bie-slide2" href="#" rel="nofollow" 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>

Ngoài ra, các bạn cũng có thể tách riêng ra hai nút riêng biệt khác nhau

Nếu chỉ chèn nút DEMO:

Demo Click here 

thì đoạn code chèn:

<div id="wrap" style="text-align:center">
<a class="bie-slide" href="#" rel="no-follow" target="_blank">
  <span class="circle"><i class="fa fa-laptop"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
</div>

- Nếu chỉ chèn nút DOWNLOAD:

Download Click here

thì đoạn code chèn:

<div id="wrap" style="text-align:center">
<a class="bie-slide2" href="#" rel="nofollow" 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>

Ngoài ra tùy theo mục đích sử dụng của các bạn, có thể chay các icon theo ý thích hợp mục đích của bài đăng bằng cách thay ở:

<i class="fa fa-laptop"></i> và <i class="fa fa-download"></i>

Các bạn cũng có thể ham khảo thêm bài :  các ICON cực đẹp cho blogger  để tìm hiểu thêm các mẫu ICON đẹp nhé

Lưu ý nhỏ là nếu các bạn nào không muốn làm nút tròn mà thích nút vuông thì có thể chỉnh thông số tại:  border-radius: 50px  trong mục  .bie-slide,.bie-slide2{..}

Đến đây coi như các bạn đã hoàn thành việc cài đặt nút demo và download đẹp cho blog rồi đó. Các bạn cứ yên tâm là đoạn code viết bằng CSS nên code cực nhẹ , không ảnh hưởng đến tốc độ tải trang của blog nhé. Chúc các bạn làm thành công!