Tạo Nút Demo và Download Đẹp Cho Blogger


Đầu tiên các bạn mở Blogger lên -->Mẫu --> Chỉnh Sửa HTML --> tìm thẻ </style> hoặc ]]></b:skin>
Và dán mã dưới đây vào trước hai thẻ trên và bấm Save (lưu lại).
  • <style type='text/css'>
  • #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}
  • </style>




Tiếp Đến: Cách tạo button Demo và Download trong bài đăng

mỗi khi bạn viết bài mà cần đến 2 nút này thì bạn vào soạn thảo bằng html để chèn code sau:


  • <div id="wrap"><a href="http://viethoanggduong.blogspot.com/" class="btn-slide" target="_blank"> <span class="circle"><i class="fa fa-phone-square"></i></span> <span class="title">Liên Hệ</span> <span class="title-hover">Click here</span> </a> <a href="http://viethoanggduong.blogspot.com/" 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>

Thay http://viethoanggduong.blogspot.com/ thành địa chỉ mà bạn muốn


0 bình luận

Mã Hóa Code

Loading...