Tạo nút Demo và Download cho Blogspot với hiệu ứng đẹp

Tạo nút Download trong 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ẹ.



  • Pure CSS. 
  • Trọng lượng nhẹ.
  • Đã sử dụng các biểu tượng Font Awesome. 
  • Một sự kết hợp đơn giản của HTML và CSS. 
  • Hiệu ứng Di chuột tuyệt vời. 
  • Văn bản cũng thay đổi khi di chuột. 
  • Dễ dàng tùy chỉnh.



Hướng dẫn Cách tạo nút Demo và Download mới nhất cho blogspot:

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

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

<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>

Cứ như vậy, mỗi bài viết mà bạn muốn tạo nút Demo và Download thì hãy chèn đoạn mã ở bước 3 vào bài viết nhé!

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

0 Comments