Nút chia sẻ với hiệu ứng xoay

Đây là một mẫu nút chia sẻ rất đẹp với hiệu ứng xoay giúp ẩn hiện nút share làm cho nó rất bắt mắt và khiến cho độc giả thích thú với nó, nhờ đó bài viết được chia sẻ nhiều hơn.

#Xem demo

• Share t

• 

  

• his page

• 

  

#Thêm CSS

1. Đăng nhập Blogger

2. > Mẫu > Chỉnh sửa HTML

3. > Tìm thẻ ]]></b:skin> 

4. > Dán code dưới vảo trên nó

.share_button { 
width: 300px;
height: 50px; 
margin: 10px auto; 
}
.share_button ul { 
width: 50%; 
height: inherit; 
float: left; 
list-style: none; 
margin: 0 !important; 
padding: 0 !important; 
}
.share_button ul h1 { 
margin-top: 9%; 
overflow: hidden; 
width: 100%;
color: #4889F0; 
font-size: 18px; 
text-shadow:2px 2px 2px #fff; 
}
.share_button ul li { 
position: absolute; 
height: inherit; 
width: 150px; 
margin: 0 !important; 
padding: 0 !important; 
background: #EEEEEE;
-webkit-transition: all 600ms;
-moz-transition: all 600ms;
-o-transition: all 600ms;
-ms-transition: all 600ms;
transition: all 600ms;
text-align: center;
}
.share_button ul li h2 { 
display: inline-block; 
width: 32%; 
height: 40px; 
overflow: hidden; 
margin-top: 5%; 
cursor: pointer; 
border: 0 !important; 
}
.share_button ul:first-child li:first-child{
text-align: right; 
}
.share_button ul:last-child li:first-child{
text-align: left; 
}
.share_button ul:first-child li:last-child,
.share_button:hover ul:first-child li:first-child {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.share_button ul:last-child li:last-child,
.share_button:hover ul:last-child li:first-child {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.share_button:hover ul:first-child li:last-child,
.share_button:hover ul:last-child li:last-child {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}

#Thêm HTML

1. > Tìm thẻ <div class='post-footer'> 

2. > Dán code dưới vào dưới nó

 <div class='share_button'>

<ul>
<li><h1>
Share t
</h1></li>

<li><h2>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxqTjiZuEwgDF7mn7YNN-xLvF6CkTVVfRqlsAtwYsQ9OTmS4qWXBZzEwpmEQczMiZRo_5Ad8i9qZUG8hJUmTaSyiymSAvdZXNzW07kK0jddfmQ2aniJcfsm3oxV9WxtMDEdkwIIwgdQv6v/s1600/Facebook.png"/></a></h2>

<h2><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEgkNlC0E0D0tRLPE2EgJ67355ytz11Vqxsz7drh4FJ0BW7klniHrKPZQ_9z22PPwbN_Q5Ac-dt18umYQT9i2JeGpZ8PSgtLwGUWzWZVpDh-Fzt1OZB1TYIVRc5hCcsfN2hljCva-kZ85v/s1600/Twitter.png"/></a></h2>
</li>
</ul>
<ul> 
<li><h1>his page</h1></li>

<li>
<h2><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDkbFte7fhu7Pv6F-_B3vw6R7ITi923utE_yEbRezLAWNDIwMUqgsWNTuCzE7zM9ZyAy4hWSZxW2i2zx2R1AD2FPxg_hXIKnpPcBMQYQKBUO7vxObWET5c42SfjGIefUQ2l01yRWOIDIvl/s1600/Google-plus.png"/></a></h2>

<h2>
<a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1nizZ5tnUkXuU85ICHWHIbuQ-wqrOrfHXTLAmSbuQIQdbjeFZb8ZsXAidaFudLYosEuNASyBP23qf-qOFiD69P4wtvtghsL0Xf0im9bJlnehvypyWSkTKyTzu6Ykki7JtJsLaKTJp1KyB/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>

</div>

#Cập nhật

Ở bước thêm HTML mình đã có một nhầm lẫn, các bạn hãy thêm code vào trên thẻ <div class='post-footer'> chứ không phải là  <div class='post-header'> như trước.