Nút chia sẻ với hoạt ảnh đẹp bằng CSS3 cho Blogger

Chào các bạn, như bạn đã biết thì minh đã chia sẻ một vài loại nút chia sẻ qua mạng xã hội, và hôm nay mình lại muốn chia sẻ thêm một lần nữa. Bộ nút chia sẻ này cũng với hiệu ứng đóng mở khi rê chuột vào nhưng theo một cách khác. Về các nút chia sẻ này thì không có gì nhiều để nói, mời các bạn xem ở dưới đây.

Nút chia sẻ với hoạt ảnh khá đẹp bằng CSS3 cho Blogger

Đăng nhập vào Blogger » Mẫu » Chỉnh sửa HTML

Tìm đến thẻ ]]></b:skin> và thêm đoạn css sau lên trê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);
}

Tiếp tục mình sẽ tạo hàm include để dễ chỉnh sửa cũng như xóa đi khi không cần nữa

<b:includable id='kslzoneShareb'>
<b:if cond='data:blog.pageType == "item"'>
<div class='share_button'>
 <ul>
  <li>
  <h1>Chia sẻ bài viết này</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/AVvXsEhjN6Obr97Tb7Zvxbio0WkcpdM05ZLdHQqcSfY-gS6-CnrV2Y7jj9DypsS9AfKVjn1KBN0BvwyvogiMCeYkMhkV6UL0ykkVq_QhXZ6GvYjNMdr4-MxnZbYoY9xvWvIqQScn83NeJl8DqrCp/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/AVvXsEg-ZZ0HL5cvjAObV3DRQlE4d4gE80PsecONtxO2K6VsQHLkgSUao4BDzpANu5PdetD6qPxTI6_chJk6UjbEHWmPNaHfad5zJ8uYYYGwT6j0KWl_fzeVrWGK2CEUjC1puinahXgmly2KY5rl/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/AVvXsEi2W-NOw6ZP6G-pX0kyQbxm0PYXTW4YKoerToJe0hPkUIU2zaTDQWkWS2fYiurwP3Hr5N7sHjXSm3wXrex3g2FyjFMGVCDbgD76Niaq1sse8b6BMxzDDCpp1Fw-wbqIHx__7wPssubYrxM7/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/AVvXsEiDCeQZM0EuHwC9my9_7qoiKsG-D0Tf6kXryC86BnvZeGjnVTdrz1ah-K3SVyNZ0BHL_4oB426oZGm7CXb1NolYGBuSpIFA9ZFCPygWYkqWCBwUd_qPI2_pUosArrd95NuBHtP_FOeIIrrb/s1600/Pinterest.png"/></a>
  </h2>
  </li>
 </ul>
</div>
</b:if>
</b:includable>

Cuối cùng chèn vào vị trí mong muốn của bạn v.d. cuối bài đăng bạn tìm đến thẻ

<div class='post-footer'>

và chèn đoạn mã này dưới nó

<b:include name='kslzoneShareb'/>

Lời kết

Hiện nay có rất nhiều loại nút chia sẽ được tùy biến với vô vàn màu sắc và hiệu ứng, do đó nếu lựa chọn hoặc tùy biến nó đúng với tông màu của blog, bạn sẽ thu hút được hơn đến người dùng về việc chia sẻ bài viết của bạn.

Nguồn: KlsZone