» » Hướng dẫn tạo nút Demo và Download cho blogspot

Hướng dẫn tạo nút Demo và Download cho blogspot

Thứ Năm, 3 tháng 11, 2016
Screenshot_2016-04-24-19-52-03_1
Demo
Chào các bạn!
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
PicsArt_04-17-06.12.21
Chỉnh sửa mẫu ở chế độ HTML
Bước 3: Dán mã sau vào trong (sau) thẻ mở <head>
<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; }
#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; }
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
<div id="wrap">
<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>
Bước 6: Lưu mẫu
Tags: ,
Chia sẻ:
Chia sẻ