5/14/19

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 !