Tạo Nút Mạng Xã Hội Hover Cực Đẹp Cho Blogspot

Xin chào tất cả các bạn, hôm nay rảnh chẳng biết làm gì, lang thang bên Ảnh Đẹp Blog thì thấy cái cột mạng xã hội cực đẹp này. Và hôm nay, mình xin hướng dẫn các bạn tạo button mạng xã hội hover cực đẹp cho blogspot. Không linh tinh luyên thuyên nữa, chúng ta cũng bắt đầu nhé!


XEM DEMO

CÁC BƯỚC THỰC HIỆN

Bước 1: Các bạn vào Blogger Bố cục Thêm tiện ích HTML/Javascript.
Bước 2: Các bạn dán toàn bộ code này vào đó.
<div class="widget-content"> <style> .iuauthor-item {padding:15px 10px;text-align:center;} .iuauthor-item .image-wrap {position:relative;overflow:hidden;border-radius:50%; -webkit-transform: translate3d(0px,0px,0px);transform: translate3d(0px,0px,0px);width:80%; height:auto;margin:0 auto;margin-bottom:15px;} .iuauthor-item .image-wrap:before {content: '';display:block;position:absolute; border-radius:50%;border:10px solid #f9f9f9;border-image-source:initial;border-image-slice:initial;border-image-width:initial;border-image-outset:initial;border-image-repeat:initial;opacity:0.7;margin:auto;top:0px;right:0px;bottom:0px;left:0px; -webkit-transition: all 0.4s linear;transition: all 0.4s linear;} .iuauthor-item .social {position:absolute;width:92.5%;height:92.5%;border-radius:50%; background-color:#f9f9f9;opacity:0;margin:auto;top:0px;right:0px;bottom:0px;left:0px;font-size:0px;text-align:center;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transition: all 0.3s linear;transition: all 0.3s linear;} .social.linear-3s .social-inner {position:absolute;width:100%;padding:15px 0;top:50%;left:50%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);} .social-inner .fa {margin:0px 5px;font-size:16px;color:#fff;width:32px;height:32px;padding:8px; border-radius:50%;} .image-wrap:hover .social.linear-3s {opacity:0.95;-webkit-transform: scale(1);transform: scale(1);} .image-wrap:hover:before {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);} .social-inner .fa-google-plus {background:#d64431!important;} .social-inner .fa-twitter {background:#00aced!important;} .social-inner .fa-facebook {background:#3b5998!important;} .social-inner .fa-youtube {background:#cb2027!important;} </style> <div class="iuauthor-item"> <div class="image-wrap"> <img alt="Revoltify" class="img-circle author_avatar img-responsive" src="//2.bp.blogspot.com/-S_QQa65ZemI/VMHoJ_VqdII/AAAAAAAAB3o/dl0c7BH3mnE/s1600/Arlina%2BLogo.png" title="Revoltify" /> <br /> <div class="social linear-3s"> <div class="social-inner"> <a href="URL Facebook của bạn" target="_blank" title="Follow Us On Facebook"><i class="fa fa-facebook"></i></a> <a href="URL Twitter của bạn" target="_blank" title="Follow Us On Twitter"><i class="fa fa-twitter"></i></a> <a href="URL Google của bạn" target="_blank" title="Follow Us On Google Plus"><i class="fa fa-google-plus"></i></a> <a href="URL Youtube của bạn" target="_blank" title="Follow Us On Youtube"><i class="fa fa-youtube"></i></a> </div> </div> </div> </div> </div> <div class="clear"> </div>
Thay những phần in đậm trong blockquote thành URL của bạn.
Bước 3: Lưu lại và hưởng thụ thành quả thôi!

LỜI KẾT

Trên đây là các bước để tạo button mạng xã hội hover cực đẹp cho blogspot rồi. Riêng mình thì mình thấy nó rất đẹp. Nếu các bạn thấy bài viết bổ ích thì đừng quên cho mình 1 share & 1 comment nhé. Những comment của bạn là nguồn động lực cho mình đấy. Còn bạn nào muốn mình hỗ trợ gì thì đừng ngần ngại comment phía dưới bài viết này nhé! Chúc các bạn thành công! 😉😋
Source-code: http://www.arlinadzgn.com/
Editor-code: chuyenmucanhdep.blogspot.com
Tác giả bài viết: Tính Getter
Thời gian đăng bài: Thứ Năm, 23 tháng 11, 2017
Tổng số bình luận: 38

38 nhận xét:

  1. Admin mà giật cả 2 top cmt thế sao chơi :3

    Trả lờiXóa
  2. Trả lời
    1. Mỗi tội nhìn nó hơi dài và phình, hihi

      Xóa
    2. Hình dạng nó tròn nên phải chấp nhận thôi :v

      Xóa
  3. Top bình luận 2 cái đều có tác giả thế này ae sao ngoi lên :3

    Trả lờiXóa
  4. Trả lời
    1. Chắc lọc liên kết nên có thể em đã xóa nhầm, để tí nữa em đặt lại nhé! :v

      Xóa
    2. Ok anh, do bữa giờ bận học nên quên đặt cho anh :3

      Xóa
  5. Trả lời
    1. Đã cập nhật rồi nhé :v À mà anh xem phần Mạng xã hội bên sidebar trái đó anh :3

      Xóa
  6. Trả lời
    1. Thôi, anh tha cho em :v Với lại chưa có ý tưởng nữa đây -_-

      Xóa
  7. qua tương tác với em đây chúc e ngày chủ nhật vui vẽ!

    Trả lờiXóa
  8. - Temp bên chuyenmuccanhdep đẹp vãi

    Trả lờiXóa
  9. - Chủ nhật vui vẻ nhé các người bạn !!! Qua tương tác blog tui nhé

    Trả lờiXóa
  10. Tương tác Blog đi mấy cụ :v Hôm nay em rảnh :v

    Trả lờiXóa