 |
| Demo |
Có khá nhiều trang blog chuyên về Template, nhưng một số trang vẫn chưa khoa học và đẹp bởi nút Demo và Dowload của blog khá chán, khô khan mất thẩm mỹ. Hôm nay mình sẽ hướng dẫn các bạn cách tạo nút Demo và Download đẹp cho blog bằng CSS
Bước 1: Đăng nhập vào blogger chọn mẫu
Bước 2: Chọn chỉnh sửa mẫu ở chế độ HTML
 |
| Chỉnh sửa mẫu ở chế độ HTML |
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"></link>Bước 4: Sao chép đoạn mã sau và dán nó lên trước (trên) thẻ ]]></b:skin>
#wrap { margin:20px auto; text-align:center; }Bước 5: Chèn code sau vào nơi mà các bạn muốn xuất hiện nút Demo và Download
#wrap br { display:none; }
.bie-slide,.bie-slide2 { position:relative; display:inline-block; height:50px; width:200px; line-height:50px; padding:0; border-radius:50px; background:#fdfdfd; border:2px solid #F9690E; margin:10px; transition:.5s; }
.bie-slide2 { border:2px solid #36D7B7; }
.bie-slide:hover { background-color:#F9690E; }
.bie-slide2:hover { background-color:#36D7B7; }
.bie-slide:hover span.circle,.bie-slide2:hover span.circle2 { left:100%; margin-left:-45px; background-color:#fdfdfd; color:#F9690E; }
.bie-slide2:hover span.circle2 { color:#36D7B7; }
.bie-slide:hover span.title,.bie-slide2:hover span.title2 { left:40px; opacity:0; }
.bie-slide:hover span.title-hover,.bie-slide2:hover span.title-hover2 { opacity:1; left:40px; }
.bie-slide span.circle,.bie-slide2 span.circle2 { display:block; background-color:#F9690E; color:#fff; position:absolute; float:left; margin:5px; line-height:42px; height:40px; width:40px; top:0; left:0; transition:.5s; border-radius:50%; }
.bie-slide2 span.circle2 { background-color:#36D7B7; }
.bie-slide span.title,.bie-slide span.title-hover,.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { position:absolute; left:90px; text-align:center; margin:0 auto; font-size:16px; font-weight:bold; color:#F9690E; transition:.5s; }
.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { color:#36D7B7; left:80px; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { left:80px; opacity:0; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { color:#fff; }
<div id="wrap">Bước 6: Lưu mẫu
<a class="bie-slide" href="Chỗ Chèn Link Demo" target="_blank">
<span class="circle"><i class="fa fa-laptop"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a class="bie-slide2" href="Chỗ Chèn Link Download " 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>
No comments:
Post a Comment