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é!


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
Nguồn Tính Getter Blog
- - 5 bình luận CHUYÊN MỤC

BÌNH LUẬN (5)

  1. Blog dạng copy bài đéo ghi nguồn thì khỏi làm blog làm gì nhé :) Còn cái template tải về sửa luôn phần footer luôn :) Xàm lồn :)

    Trả lờiXóa
    Trả lời
    1. Con chưa chỉnh xong ông nội ơi -_-
      Cho con time đi <3
      Có ji sai thì nói lun đi sửa mẹ một lần :)

      Xóa

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé