Chia sẽ button share hiệu ứng hover khi rê chuột đẹp cho blogspot

Cập nhật: 19 thg 7, 2018
Rảnh nên chia sẽ cho mọi người button share hiệu ứng khá đẹp do mình edit cho mọi người cùng sử dụng nhé ^^


CÁCH THỰC HIỆN:

1. Cách bạn chèn đoạn code bên dưới vào trước thẻ ]]></b:skin>
/*===============
= Social Box lebalongit
===================*/
.social-box{float:left;width:100%;display:inline-flex;}
.instagram{background-color:#458eff;}
.pinterest{background-color:#C92228;}
.reddit{background-color:#ff4500;}
.instagram,.pinterest,.reddit{width:20%;height:50px;border-radius: 20px;}
.instagram a,.pinterest a,.reddit a{display:block;text-decoration:none;font-size:10px;padding: 8px 0 30px 0;text-align:center;width:68%;margin:auto;}
.instagram a i,.pinterest a i,.reddit a i{display:block;font-size:2em;padding:5px;background-color:#fff;border-radius:10px;width:20px;text-align:center;margin:0 auto;margin-bottom:20px;border:solid 3px #fff;-webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);transform:rotate(-25deg);}
.instagram a i{color:#458eff;}
.pinterest a i{color:#C92228;}
.reddit a i{color:#ff4500;}
.instagram:hover i,.pinterest:hover i,.reddit:hover i{color:#fff;border-radius:50px;background-color:transparent;margin-bottom:15px;-webkit-transform:rotate(-0deg);-moz-transform:rotate(-0deg);-o-transform:rotate(-0deg);transform:rotate(-0deg);}
2. Tiếp theo chèn code bên dưới vào nơi bạn muốn nó hiển thị thường là dưới thẻ tag:
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='social-box'><span>Share:</span>
<div class='instagram'>
<a class='wow slideInUp animated' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' style='visibility: visible; animation-name: slideInUp;' target='_blank'><i class='fa fa-facebook-official'/></a>
</div>
<div class='pinterest'>
<a class='wow slideInUp animated' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' style='visibility: visible; animation-name: slideInUp;' target='_blank'><i class='fa fa-google-plus'/></a>
</div>
<div class='reddit'>
<a class='wow slideInUp animated' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' style='visibility: visible; animation-name: slideInUp;' target='_blank'><i class='fa fa-twitter'/></a>
</div>
</div>
</b:if>
Lời kết:
Chúc các bạn thành công nếu có thắc mắc hay yêu cầu gì bình luận ngay bên dưới nhé <3