Hướng Dẫn Tạo Nút Demo Và Download Cho Blogger Tăng Thêm Độ Chuyên Nghiệp

Tạo Button Demo Và Download Cho Blogger 

Để làm nổi bật các bài viết, đường link bị che đi giúp cho bài viết chuyên nghiệp hơn chúng ta nên kết hợp với các Button để người dùng dễ dàng nhìn thấy và giúp trang trí thêm để làm đẹp cho blog.

Sau đây mình xin hướng dẫn cách tạo 2 nút này:

Bước 1 : Các bạn vào chỉnh sửa HTML tìm xem Blog của bạn đã có code dưới đây chưa, nếu chưa thì copy vứt vào trên thẻ </head> nha:

<script src=’//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js’/>

Bước 2 : Tìm đến  tìm đến trước thẻ đóng ]]></b:skin> hoặc </style> chèn đoạn Code bên dưới vào vào trước hai thẻ trên và bấm Save.

  #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: .2s;
}
.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: -2px;
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: 50px;
text-align: center;
margin: 0 auto;
font-size: 20px;
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;
}

Bước 3 : Khi viết bài muốn tạo nút DEMO và  DOWNLOAD thì chúng ta đổi sang chế độ HTML và dán đoạn code sau vào chỗ bạn muốn để.

<div id="wrap">
<a href="https://www.groupmmo.pro/" 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="https://www.groupmmo.pro/" 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>

Vậy là xong rồi, lưu lại và xem thành quả. Các bạn muốn đổi tên DEMO và DOWNLOAD thành tên khác cũng được nha không bị ảnh hưởng gì hết. Chúc bạn thành công!