Tặng code stream phim trị giá 500k nhân dịp giáng sinh và năm mới (Áp dụng theme từ 500k) Mua ngay
Thanh toán Chính sách Liên hệ

Hướng dẫn tạo Button Demo And Download Cho Blogspot (Blogger)

Hướng dẫn tạo Button Demo And Download Cho Blogspot (Blogger)

Cập nhật ngày Bởi
Ở bài viết này, mình đã hướng dẫn các bạn tạo các nút Demo và Download làm nổi bật lên link, dành cho với Blog chuyên chia sẻ phần mềm, các ứng dụng hay theme blog, wordpress.
Hướng dẫn tạo Button Demo And Download Cho Blogspot (Blogger)

Mục Đích

  • Với hiệu ứng Slide tạo sự thích thú của người đọc
  • Giúp kéo người đọc ở lại lâu hơn
  • Giúp người xem biết đâu là link Download hay Demo cho dù họ có đọc lướt qua.
  • Tránh các comments xin link Download và thay vào đó là những comments tốt cho Blog như tks ad, Link tốt...

Thực Hiện

1. Đầu tiên các bạn vào Blogger > Mẫu > Chỉnh sửa HTML
2. Tìm thẻ đóng </head>, chèn đoạn javascript vào trước nó.
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
3. Sau đó các bạn dán đoạn css Của các button sau vào trước thẻ đóng ]]></b:skin> hay thẻ đóng </style>
 
#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;
}
4. Sau đó Save Template (Lưu mẫu) lại, thế là xong.
5. Tiếp đến để sử dụng chúng thì khi viết bài các bạn chuyển qua chế độ HTML sau đó dán đoạn HTML sau vào tương ứng:
 
<div id="wrap">
<a href="http://m.yingvn.com" class="btn-slide" 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 href="http://m.yingvn.com" class="btn-slide2" 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>
Chú ý: các bạn thay link màu xanh nước biển: http://m.ying.com thành link bạn muốn. Nếu bạn muốn chèn link demo thì thay bằng cái trên, link demo thì cái dưới.
Nâng Cao
Thay đổi màu viền thì tìm
- Tìm dòng border: 2px solid #0099cc; cái này là của cái Demo
Tìm dòng border: 2px solid #efa666; cái này của cái Download
Sau đó thay thế hai mã màu bằng màu bạn thích
Thay đổi  màu khi rê chuột vào
Tìm dòng .btn-slide:hover { và dòng .btn-slide2:hover { ngay sau dòng đó có chữ background-color có mả màu tương ứng nút demo và download và thay đổi nó thành màu của bạn
Thay đổi màu hình tròn bạn đầu khi chưa rê chuột vào
tìm dòng .btn-slide span.circle, .btn-slide2 span.circle2 { rồi tìm ngay sau dòng đó có chữ background-color: #0099cc;, đó là mả màu của nút Demo
- Còn nút download là tìm dòng .btn-slide2 span.circle2 {background-color: #efa666;}
Thay đổi màu của hình tên lửa và download khi rê chuột vào
- Tìm dòng .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 { và .btn-slide2:hover span.circle2 {  rồi men theo hai dòng đó có chữ color: đó chính là màu cảu chúng. Cái dòng dầu là nút Demo và dòng sau là Download.
Thay đổi màu chữ
Tìm dòng .btn-slide span.title-hover, .btn-slide2 span.title2, và .btn-slide2 span.title2, men theo hai dòng đó sẽ có chữ color là màu sắc của chúng và thay đồi nó.

Lời Kết

Vậy là mình đã hướng dẫn các bạn tạo Slide Demo And Download Button Cho Blogger - Blogspot, nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. 

Chúc các bạn thành công @@.

Comments

Post a Comment

Liên quan

Call
0948713329
Contact Me on Zalo