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

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...
tháng 7 18, 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

Chia sẽ button share hiệu ứng hover khi rê chuột đẹp cho blogspot Chia sẽ button share hiệu ứng hover khi rê chuột đẹp cho blogspot Hứa Anh Chức8.8stars based on9reviewsRả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...
  • Blog bạn bè:
  • Ephoto360 |
  • Thủ thuật Windows |
  • Star Thịnh IT |
  • Code đây rồi |
  • Văn Tuấn Blog |
  • Star Dũ IT |
  • Star Mạnh Blog |
  • Tiến Đức Blog |
  • NgLDuy Blog |
  • Đặt liên kết