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;
&
nbsp; 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>
DienDan.Edu.Vn Cám ơn bạn đã quan tâm và rất vui vì bài viết đã đem lại thông tin hữu ích cho bạn.DienDan.Edu.Vn! là một website với tiêu chí chia sẻ thông tin,... Bạn có thể nhận xét, bổ sung hay yêu cầu hướng dẫn liên quan đến bài viết. Vậy nên đề nghị các bạn cũng không quảng cáo trong comment này ngoại trừ trong chính phần tên của bạn.Cám ơn.
