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

Tạo nút Demo và Download Flat UI cho Blogger

Các bước thực hiện

Bước 1: bạn chèn đoạn CSS này lên trên thẻ đóng ]]></b:skin

Có 2 giao diện cho bạn lựa chọn, tuy nhiên bạn có thể chèn cả 2 đoạn này để có thể sử dụng cả 2 mẫu giao diện theo ý của bạn.

Style 1

 .button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}

Style 2

 .button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Bước 2: Để sử dụng trong bài viết, các bạn sử dụng cấu trúc sau

Style 1

 <div style="text-align: center;">
  <ul class="button">
    <li><a class="demo" href="LINK DEMO" target="_blank">Demo</a></li>
    <li><a class="download" href="LINK DOWNLOAD" target="_blank">Download</a></li>
  </ul>
</div>
<div class="clear"></div>

Style 2 

 <div style="text-align: center;">
  <ul class="button2">
    <li><a class="demo" href="LINK DEMO" target="_blank">Demo</a></li>
    <li><a class="download" href="LINK DOWNLOAD" target="_blank">Download</a></li>
  </ul>
</div>
<div class="clear"></div>

Lời kết

Đây là một Widget Blogger làm đẹp cho blog của bạn, một phần tiện ích sẽ giúp cho blog của bạn trở nên chuyên nghiệp hơn. Tiện ích được chia sẻ bởi Arlina Design