Tạo Tiện ích Box Social Media Button Cho Blogspot với hiệu ứng tuyệt đẹp

Khi bạn đã có một Blog/Website đang phát triển và bạn muốn nó phát triển hơn nữa thì Social Media là một phương tiện thúc đẩy sự phát triển của Web phát triển rất nhanh chóng.

Với lượng độc giả vô cùng lớn trên mạng xã hội, thì việc đưa Blog/Web các bạn lên đấy sẽ giúp cho độc giả dễ tiếp cận, hoặc là tiếp cận một cách nhanh chóng với Blog/Web của bạn ! Tăng Traffic

Không luyên thuyên , dài dòng nữa. Hôm nay mình sẽ chia sẻ tới các bạn Tiện ích Box Social Media Button Cho Blogspot với hiệu ứng tuyệt đẹp.


Mình tóm gọn hết Code vào một phần luôn nhé ! Các bạn lấy về Add vào Widget Blog nhé!

<style>
.box-share{
height:200px;}
.share{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%) rotate(45deg);
width: 50px;
height: 50px;
}
.share ul{
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100%
}
.share ul li{
position: absolute;
top: 0;
left: 0;
list-style: none;
width: 100%;
height: 100%;
background: #fff;
transition: 0.5s;
overflow: hidden;
transform: scale(0) ;
border-radius: 10px;
}
.share ul.active li{
transform: scale(0.95);
}
.share ul li a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 50px;
font-size: 20px;
color: #262626;
transition: 0.5s;
}
.share ul li a:hover{
color: #fff !important;
background: #2196f3
}
.share ul li a .fab {
transform: rotate(-45deg);
}
.share ul.active li:nth-child(1)
{
top:-100%;
left: -100%;
transition-delay: 0s;
}
.share ul.active li:nth-child(2)
{
top:-100%;
left: 0;
transition-delay: 0.2s;
}
.share ul.active li:nth-child(3)
{
top:-100%;
left: 100%;
transition-delay: 0.4s;
}
.share ul.active li:nth-child(4)
{
top:0;
left: 100%;
transition-delay: 0.6s;
}
.share ul.active li:nth-child(5)
{
top:100%;
left: 100%;
transition-delay: 0.8s;
}
.share ul.active li:nth-child(6)
{
top:100%;
left: 0;
transition-delay: 1s;
}
.share ul.active li:nth-child(7)
{
top:100%;
left: -100%;
transition-delay: 1.2s;
}
.share ul.active li:nth-child(8)
{
top:0;
left: -100%;
transition-delay: 1.4s;
}
.toggle
{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
background: #e91e63;
transform: scale(0.95);
overflow: hidden;
border-radius: 10px;
z-index: 1;
cursor: pointer;
}
.toggle:before
{
content: '\f1e0';
font-family: fontAwesome;
position: absolute;
top: 0;
left: 0;
width:100%;
height: 100%;
text-align: center;
color: #fff;
font-size: 20px;
line-height: 50px;
transform: rotate(-45deg);
}
#HTML1{background:#f2f2f2}
.toggle.active:before
{
content: '\f00d';
font-family: fontAwesome;
    text-align: center;
color: #fff;
font-size: 20px;
line-height: 50px;
transition: 0.5s;
}
</style>
<div class="box-share">
<div class="share">
<div class="toggle"></div>
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-skype"></i></a></li>
<li><a href="#"><i class="fab fa-tumblr"></i></a></li>
<li><a href="#"><i class="fab fa-whatsapp"></i></a></li>
</ul>
</div>
</div>
  <script type="text/javascript">
  $(document).ready(function(){
  $('.toggle').click(function(){
  $('.toggle').toggleClass('active')
  $('ul').toggleClass('active')
  })
  })
  </script>

Hãy đảm bảo Blog/Web của bạn có sẵn Jquery và fontawesome để code có thể được hoạt động nhé !
Chúc các bạn thành công !

Tham gia bình luận

( [img] url [/img] Để Comment gửi hình ảnh. )

18 Comments

  1. Chưa tậu domain hả e?

    ReplyDelete
  2. Blog ra trò phết ! Cái Box này nhìn đẹp nhỉ

    ReplyDelete
  3. thêm thanh cuộn cho khung chứa code đi nhé b,nhìn dài quá

    ReplyDelete
  4. mình có thể hợp tác liên kết blogger được không bạn

    Tên hiển thị: Anh QUI-IT Network
    Mô tả:Chuyên viên phần mềm - phần cứng - mạng
    Link blog: https://www.duongngocqui007.xyz

    ReplyDelete
    Replies
    1. Blog chính của bạn là gì ?

      Delete
    2. https://www.duongngocqui-blogger.xyz

      Delete
    3. Oke Nhé. Hợp tác vui vẻ !

      Delete
  5. Cảm ơn ông. Năm mới vui vẻ nhé

    ReplyDelete
    Replies
    1. Cảm ơn ô.
      [img]https://cdnmedia.thethaovanhoa.vn/Upload/tyTrfgkgEUQwPYuvZ4Kn1g/files/2019/01/0101/chuc-mung-nam-moi-2019.jpg[/img]

      Delete
    2. À mà cái giao diện tối tôi fix lỗi lưu cookie rồi nhé. Qua test xem

      Delete
    3. Thêm css này nha
      img{max-width:100%}
      - Css By A Hưng
      Vô chủ đề=>chỉnh sửa template

      Delete
    4. Để ảnh trên mobile nó nhỏ bớt :v ko biết áp dụng đc mọi blog ko mà thử đi :v trên mobile ảnh to qá

      Delete
    5. Đúng không để ý thật :v Để tí thử

      Delete
  6. Replies
    1. Đẹp thì sài luôn đi chứ hả:)))

      Delete