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

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

Viết bình luận (17)
Xếp theo

  1. theme bá long it đang được dùng nhìu lắm

    Trả lờiXóa
  2. E nên tắt quảng cáo dạng popup vì nó gây ảnh hưởng đến ng đọc e ạ. Tỷ lệ thoát sẽ cao.
    #Góp #Ý

    Trả lờiXóa