Chào mừng các bạn đã quay trở lại với Blog NamIT. Hiện tại do nhu cầu của Bloger là chia sẻ tài liệu, template, software, ... . Nên nút Demo và Download đẹp rất cần thiết cho Blogs nên hôm nay mình sẽ giới thiệu đến các bạn cách tạo nút Demo & Download Hover tuyệt đẹp.

HƯỚNG DẪN TẠO NÚT DEMO & DOWNLOAD HOVER TUYỆT ĐẸP CHO BLOGSPOT

Demo

Demo
Click here



Download
Click here

Các bước tạo nút Demo và Download cho Blogspot / Blogger:
1. Đăng nhập vào Blogger
2. Ở menu bên trái chọn Chủ đề ⇒ Chọn Chỉnh sửa HTML
3. Thêm mã dưới đây vào trước thẻ </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

4. Tìm đến trước thẻ đóng ]]></b:skin> hoặc </style> chèn đoạn css bên dưới vào.

/* Code Share By NamIT.Com */
#wrap {margin: 20px auto;text-align: center;}
#wrap br {display: none;}
.mk-slide, .mk-slide2 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 50px;background: #fdfdfd;border: 2px solid #3f826d;margin: 10px;transition: .5s;}
.mk-slide2 {border: 2px solid #ead96b;}
.mk-slide:hover {background-color: #3f826d;}
.mk-slide2:hover {background-color: #ead96b;}
.mk-slide:hover span.circle, .mk-slide2:hover span.circle2 {left: 100%;margin-left: -45px;background-color: #fdfdfd;color: #3f826d;}
.mk-slide2:hover span.circle2 {color: #ead96b;}
.mk-slide:hover span.title, .mk-slide2:hover span.title2 {left: 40px;opacity: 0;}
.mk-slide:hover span.title-hover, .mk-slide2:hover span.title-hover2 {opacity: 1;left: 40px;}
.mk-slide span.circle, .mk-slide2 span.circle2 {display: block;background-color: #3f826d;color: #fff; position: absolute;float: left;margin: 5px;line-height: 42px;height: 40px;width: 40px;top: 0;left: 0;transition: .5s;border-radius: 50%;}
.mk-slide2 span.circle2 {background-color: #ead96b;}
.mk-slide span.title,
.mk-slide span.title-hover, .mk-slide2 span.title2,
.mk-slide2 span.title-hover2 {position: absolute;left: 60px;text-align: center;margin: 0 auto;font-size: 16px;font-weight: bold;color: #30abd5;transition: .5s;}
.mk-slide2 span.title2,
.mk-slide2 span.title-hover2 {color: #efa666;left: 80px;}
.mk-slide span.title-hover, .mk-slide2 span.title-hover2 {left: 80px;opacity: 0;}
.mk-slide span.title-hover, .mk-slide2 span.title-hover2 {color: #fff;}
/* END CODE */

4. Lưu Chủ đề

5. Khi viết bài viết, để chèn nút Demo và Download thì bạn chuyển qua chế độ HTML sau đó dán đoạn HTML sau vào vị trí bạn muốn hiển thị:

<div id="wrap">
<a class="mk-slide" href="https://namittn.blogspot.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://namittn.blogspot.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>

6. Cuối cùng hãy Xuất bản bài đăng và xem kết quả