Tạo nút Social Ribbons với hiệu ứng đẹp bằng CSS cho Blogspot

tao nut social ribbons voi hieu ung dep bang css cho blogspot

Mạng xã hội là một tiện ích không thể thiếu nhằm giúp quảng bá, chia sẻ các website, weblog,... Tuy nhiên, với những nút mạng xã hội thông thường thì khó có thể làm người đọc cảm thấy chú ý tới.

Do đó, với thủ thuật này sẽ giúp bạn tạo những nút Social Ribbons, đây là những nút mạng xã hội kiểu lá cờ rất đẹp với hiệu ứng trượt từ trên xuống khi rê chuột vào chỉ với bằng CSS nên sẽ không làm ảnh hưởng tới tốc độ tải trang của bạn.

Bạn có thể nhấn vào nút DEMO bên dưới để xem thủ thuật này hoạt động như thế nào nhé!

Bây giờ, chúng ta cùng bắt đầu thực hiện nào.

Social Ribbons đẹp bằng CSS

Bước 1. Đăng nhập tài khoản Blogger > Chủ đề > Chỉnh sửa HTML.

Bước 2. Sao chép đoạn mã CSS dưới đây và dán vào trước thẻ đóng ]]></b:skin>. Bạn có thể chỉnh sửa CSS sao cho phù hợp với giao diện của bạn.

.social-ribbons {margin:-200px auto; width:300px}
.ribbon {float:left; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease; cursor:pointer; border:none; background:#069; width:95px; height:250px; position:relative; color:#fff; padding:5px; font-size:40px}
.ribbon:hover {margin-top:150px}
.ribbon:before,.ribbon:after {content:''; position:absolute; top:100%; width:0; height:0; border-top:50px solid #069}
.ribbon:before {left:0; border-right:90px solid transparent}
.ribbon:after {right:0; border-left:90px solid transparent}
.facebook {background:#3d5a98; color:#fff; margin-right:5px}
.facebook:after,.facebook:before {border-top-color:#3d5a98}
.googleplus {background:#dd4c39; color:#fff; margin-right:5px}
.googleplus:after,.googleplus:before{border-top-color:#dd4c39}
.twitter {background:#09b0ed; color:#fff}
.twitter:after,.twitter:before {border-top-color:#09b0ed}

Bước 3. Nhấn vào nút Lưu chủ đề để hoàn tất.

Bây giờ, bạn hãy chép đoạn mã HTML hiển thị dưới đây vào nơi mà bạn muốn.

<div class="social-ribbons">
  <a href="link_facebook_cua_ban" target="_blank">
    <button class="ribbon facebook"><i class="fa fa-facebook"></i></button>
  </a>
  <a href="link_googleplus_cua_ban" target="_blank">
   <button class="ribbon googleplus"><i class="fa fa-google-plus"></i></button>
  </a>
  <a href="link_twitter_cua_ban" target="_blank">
   <button class="ribbon twitter"><i class="fa fa-twitter"></i></button>
  </a>
</div>

Chúc bạn thành công!