Thảo Luận

×Close

Cách tạo nút Demo và Download đẹp cho Blogspot / Blogger



Các Bước Thực Hiện

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="https://www.starcuongit.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://www.starcuongit.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>
*CHÚ Ý: Nhớ thay đoạn link màu đỏ thành link mà bạn muốn trỏ đến.

Lời Kết

Vậy là xong rồi đó. Đơn giản đúng không! Chúc các bạn thành công nhé!

➥ Nhập địa chỉ Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
➥ Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
➥ Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.

2 nhận xét
Hiển thị
  1. Nặc danh16 tháng 10

    icon thì sao đổi a :D

    Trả lờiXóa
    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ới hơn Cũ hơn

Oops!! CÓ VẺ NHƯ BẠN ĐANG BẬT ADBLOCK

Quảng cáo giúp StarCuongIT.Com duy trì website và tiếp tục chia sẻ các thủ thuật đến bạn.

Bạn vui lòng tắt Adblock hoặc cho QuangNinhBay.Com vào danh sách trắng trong công cụ chặn quảng cáo của bạn. Cảm ơn!

×