Cách Tạo Nút Demo Và Download Cho Blogspot Có Hiệu Ứng Đẹp

hi xin chào anh chị em hôm nay mạnh villa hướng dẫn cho anh chị em cách tạo nút demo download có hiệu ứng siêu đẹp luôn ,rồi nhớ làm theo mình nhé

CáchTạo Nút Demo Và Download

Hướng dẫn Cách tạo nút Demo và Download mới nhất cho blogspot Siêu Đẹp

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

Bước 1.

 cách Thêm mẫu Font Awesome cho Blogger của các bạn. (nếu trên template của các bạn đã tích hợp sẵn bộ font awesome rồi thì hãy bỏ qua bước này).còn  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> 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. 

các bạn Thêm mẫu CSS cho Demo và Dowload. các bạn 

Chép hết đoạn mã 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>

vậy là xong rồi nè các bạn nhớ làm đúng các bước nhé

Sau khi làm xong thì thành quả của chúng ta sẽ giống như vậy nè

Demo Click here Download Click here