Bộ nút Share Buttons CSS mờ trong suốt cho Blogger/Blogspot
Bộ nút Share Buttons CSS mờ trong suốt cho Blogger/Blogspot cực kỳ đẹp mắt đấy nhé!
Live Demo
Đầu tiên bạn cần thêm CSS vào HTML của Blog
@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*=”zocial-“]:before {
font: 2.5cm/2cm ‘zocial’, sans-serif;
color: white;
line-height: 2.2;
}
.post-social .facebook {
background: #3B5998;
}
.post-social .twitter {
background: #4099FF;
}
.post-social .googleplus {
background: #db5a3c;
}
.post-social .social {
float: left;
}
.post-social .zocial-facebook {
margin: 0 15px;
}
.post-social .zocial-twitter {
margin: 0 25px;
}
.post-social .zocial-googleplus {
margin: 0 25px;
}
.post-social li {
min-width: 180px;
width: 210px;
height: 80px;
cursor: pointer;
list-style: none;
text-align: left;
float: left;
}
.post-social li:hover [class*=”zocial-“]:before {
opacity: 0.5;
text-align: right;
}
.post-social li:hover iframe {
opacity: 1;
}
.post-social li iframe {
margin-top: 30px !important;
opacity: 0;
transition: all .3s ease-in-out;
}
.post-social li .fb_ltr {
margin: 30px 20px !important;
}
Tiếp theo bạn cần thêm HTML & Javascript vào HTML Blog của bạn
<ul class=”post-social”>
<li class=”facebook”>
<span class=”social zocial-facebook”></span>
<div class=”fb-like” data-send=”false” data-layout=”button_count” data-width=”250″ data-show-faces=”true”></div>
</li>
<li class=”twitter”>
<span class=”social zocial-twitter”></span>
<a href=”https://twitter.com/share” class=”twitter-share-button” data-via=”Rushtips”>Tweet</a>
</li>
<li class=”googleplus”>
<span class=”social zocial-googleplus”></span>
<g:plusone size=”medium”></g:plusone>
</li>
</ul>
<script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=”//platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script>
<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/all.js#xfbml=1”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>