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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwieKENVGCRx3yAagdAgvSIwB3kv2GWtFcfJdspcXq9LD_y2ik0S1IkWelUYH_yTzmZrATdTeJ7QfzM34sJBnN4FwzFXcG13SUVwZ89Eazc9O2CRF3s-MV8GdNJubmIJEGD9b-X3H92WiH/s1600/Arlina+Logo.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