Home » 2015 » Tháng hai » 3 » TẠO BỘ NÚT LIKE FACEBOOK, GOOGLE+, SHARE TỔNG HỢP
9.32.56 PM
TẠO BỘ NÚT LIKE FACEBOOK, GOOGLE+, SHARE TỔNG HỢP
tao bo nut like facebook, google+, share tong hop
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.

tao bo nut like facebook, google+, share tong hop
<!-- 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 Ý:
  • Khi bạn để lại bình luận vui lòng không spam, không dùng những từ ngữ thô tục lăng mạ người khác.
  • Các bài viết trên iFox chỉ mang tính chất chia sẻ thông tin tham khảo, các bạn nên cân nhắc kỹ lưỡng trước khi xem hoặc tải nội dung bài viết, cẩn thận lừa đảo và virut.
  • Chúng tôi sẽ không chịu trách nhiệm với các bài viết do thành viên đăng lên trên các kênh của iFox.
  • Nếu trường hợp bạn phát hiện bài viết là hình thức lừa đảo hoặc nội dung bài viết sai thực tế, bạn vui lòng gửi báo cáo tới admin để được giải quyết, chúng tôi sẽ xử lý nghiêm các bài viết vi phạm.
  • iFox Media luôn hướng tới mục tiêu cộng đồng giao lưu vui vẻ, lịch sự, nhiệt tình.
  • Hãy để lại cảm nhận của bạn, chúng tôi vui vẻ đón nhận và sẽ cố gắng phát huy trang web một cách tốt nhất để phục vụ các bạn.
  • Cảm ơn bạn đã quan tâm và ủng hộ iFox Media, chúc bạn một ngày làm việc hiệu quả!
Views: 256 | Added by: Admin | Tags: Thủ Thuật Web
Total comments: 0
avatar