OK Bắt đầu nào! Lets go =))
BƯỚC 1: Truy cập vào Blogger > Chủ đề > Chỉnh sửa HTML
BƯỚC 2: Kiểm tra xem template của mọi người có đoạn code bên dưới chưa, nếu chưa thì chèn thêm nó vào trước thẻ đóng </head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
BƯỚC 3: Tìm đến trước thẻ đóng ]]></b:skin> hoặc </style> và chèn đoạn CSS dưới đây vào.

<pre class="code">
#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;
}
</pre>

BƯỚC 4: Lưu mẫu lại

BƯỚC 5: Khi đăng bài mới nếu bạn muốn thêm nút DEMO hoặc DOWNLOAD thì các bạn chuyển sang chế độ viết HTML và dán đoạn code dưới đây vào phần tương ứng.

<div id="wrap"><a class="btn-slide" href="http://www.7blog.info/" 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="btn-slide2" href="http://www.7blog.info/" 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Ú Ý: Nhớ thay đoạn link màu đỏ thành link mà bạn muốn trỏ đến.
Vậy là xong rồi đó. Đơn giản đúng không! Chúc các bạn thành công nhé!
Công Cụ TEST Thử CODE JS CSS HTML Trước Khi Coppy
- - 2 bình luận
CHUYÊN MỤC

BÌNH LUẬN (2)

  1. Trả lời
    1. Thay fa fa-rocket thành icon em muốn thay, VD fa fa-star chẳng hạn.

      Xóa

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé