9.32.56 PM TẠO BỘ NÚT LIKE FACEBOOK, GOOGLE+, SHARE TỔNG HỢP | |
Các bạn muốn tạo cho mình bộ nút Like Facebook, Google+, Share tổng hợp cho Blog của mình? Trên các Blog chia sẻ hiện nay, mình thấy đa số chưa đáp ứng được nhu cầu của mọi người như về hình thức, các bạn muốn tìm cho mình bộ nút tích hợp cả Like+Share? Do đó mình sẽ chia sẻ cho các bạn 2 mẫu thông dụng , tiện lợi nhất hiện nay!
Mẫu 1: Bộ nút Like Facebook, Google+, Share tổng hợp cho Blogspot theo chiều dọc.
![]()
/* LIKE G+ SHARE */ <style>
.sharing_box {
position: fixed;
top: 38%;
right: 0;
border: 0px solid #00EE00;
padding: 1px;
-moz-border-radius: 4px;
-webkit-border-radius: 0px;
border-radius: 0px;
background: #F0FFFF;
width: 50px;
min-height: 257px;
}
.sharing_box .item {
width: 50px;
margin: 1px;
}
.twitter_float iframe
{
width:50px!important;
}
</style>
<!-- SHARING BOX Fixed-Positioned Toolbox -->
<div class='sharing_box'>
<div style='text-align:center; margin-top:5px'>
</div>
<!-- TWITTER -->
<div class='item twitter_float' style='margin-left:0px'>
<a class='twitter-share-button' data-count='vertical' data-lang='en' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- FACEBOOK -->
<div class='item' style='margin-left:0px'>
<div class='fb-like' data-font='verdana' data-layout='box_count' data-send='false' data-show-faces='true' data-width='44'>
</div>
<div id='fb-root'>
</div>
</div>
<!-- G+ -->
<div class='item' style='margin-left:0px'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size='tall'></g:plusone>
</div>
<!-- OTHERSHARE -->
<div class='item' style='margin-left:0px'>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'></a>
</div>
<!-- AddThis Button END -->
</div>
</div>
<!-- FAST SHARING SCRIPT -->
<!-- TWITTER 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>
<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_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- G+ SCRIPT -->
<!-- Place this render call where appropriate -->
<script type='text/javascript'>gapi.plusone.go();</script>
<!-- STUMBLEUPON SCRIPT -->
<!-- Place this snippet wherever appropriate -->
<script type='text/javascript'>
(function() {
var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
li.src = 'https://platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
})();
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f660fb932fd0f15"></script>
<!-- END ALL -->
Mẫu 2: Bộ nút Like Facebook, Google+, Share tổng hợp cho Blogspot theo chiều ngang khá đẹp.
<!-- Share BEGIN -->
<center>
<style>
.botpost{margin: 0 0 0 10px;width:290px;height:68px;}
.google {float:left;width:290px}
.wdt_button{float:left;margin:5px}
</style>
<div class='botpost'>
<div class='google'>
<div class='wdt_button'>
<a class='addthis_button_facebook_like' fb:like:layout='box_count'/></a></div>
<div class='wdt_button'>
<a class='addthis_button_tweet' tw:count='vertical'/></a></div>
<div class='wdt_button'>
<a class='addthis_button_google_plusone' g:plusone:size='tall'/></a></div>
<div class='wdt_button'>
<a class='addthis_counter'/></a></div>
</div>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d2267003d6799cf' type='text/javascript'/>
<!-- AddThis Button END -->
</script>
</center>
Lưu Ý:
| |
Views: 256 | | |
Total comments: 0 | |