1. Đăng nhập vào blog
2. Vào Chủ đề > Chỉnh sửa HTML
3. Kiểm tra website của bạn đã có đoạn code bên dưới chưa nếu chưa thì chèn code bên dưới vào trước thẻ <head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>*Tip: để tìm code bên trên đã có hay chưa các bạn vào Chủ đề > Chỉnh sửa HTML > Mở hộp tìm kiếm (Ctrl + F) tìm jquery.min.js
4. Coppy đoạn css bên dưới và chèn trước thẻ ]]><skin> hoặc </style>
#wrap {5. Lưu chủ đề
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;
}
6. Khi viết bài viết, để chèn nút Demo và Download thì bạn chuyển qua HTML sau đó dán đoạn HTML sau vào
Thay dòng chữ màu đỏ thành link của bạn<div id="wrap"><a class="btn-slide" href="https://meishima.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="btn-slide2" href="https://meishima.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>
Xem demon bên dưới
Không có nhận xét nào:
- Hiện tại mình đang bận khộng có thời gian trả lời các bạn