Slide Demo And Download Button Cho Blogger - Blogspot

Ở bài viết trước(xem tại đâ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. và hôm nay mình sẽ chia sẽ tiếp với các bạn một mẫu khác hoàn toàn với loại kia.

Mục lục:

• Mục Đích
• Thực Hiện
• Nâng Cao 
• Lời Kết

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

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

CSS#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:

HTML<div id="wrap">
<a href="http://www.vnitworld.tk" 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://www.vnitworld.tk" 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://www.vnitworld.tk 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.

Các bạn có thể xem Demo trực tuyến dưới đây

Demo
click to view

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

Vào đây lấy màu

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

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.