[ Tin nhắn mới · Thành viên · Nội quy diễn đàn · Tìm kiếm · RSS ]
  • Page 1 of 1
  • 1
Forum moderator: Quản trị viên, Administrators  
Tạo bộ nút share tổng hợp like facebook, tweet, google +
Administrators
Data: Thứ ba, 2015-08-18, 5:51 PM
Offline
Bài viết: 71

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!

Kiểu 1: Like theo chiều dọc.

IMG Demo:
   

Code
<!-- 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 -->

Kiểu 2 : Like theo chiều ngang.

IMG Demo:

Code
<!-- 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>

Kiểu 3: Chiều ngang kèm theo hiệu ứng. Nguồn [ terocket.com ]
Lưu ý: Thay đổi những URL sau cho phù hợp với ban.
  • http://twitter.com/địa chỉ twitter của bạn Ví dụ: http://twitter.com/ nvt-ucoz-net
  • https://plus.google.com/địa chỉ google của bạn Ví dụ: https://plus.google.com/ nvt-ucoz-net
  • https://www.facebook.com/địa chỉ facebook của bạn Ví dụ: https://www.facebook.com/ nvt-ucoz-net
  • http://www.địa chỉ trang của bạn/feeds/posts/default Ví dụ: http://nvt.ucoz.net/feeds/posts/default


IMG Demo:

Code
<div class="container">
<ul class="action-bar clearfix">
<li>
<a href="http://twitter.com/địa chỉ twitter của bạn" class="like">
<span class="zocial-twitter"></span>
<span class="tooltip">Follow</span>
</a>
</li>
<li>
<a href="https://plus.google.com/địa chỉ google của bạn" class="favourite">
<span class="zocial-googleplus"></span>
<span class="tooltip">Circle us</span>
</a>
</li>
<li>
<a href="https://www.facebook.com/địa chỉ facebook của bạn" class="comment">
<span class="zocial-facebook"></span>
<span class="tooltip">Like us</span>
</a>
</li>
<li>
<a href="http://www.địa chỉ trang của bạn/feeds/posts/default" class="share">
<span class="zocial-rss"></span>
<span class="tooltip">Subscribe</span>
</a>
</li>
</ul>
</div>
<style>
@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
   font-family: 'zocial', sans-serif;
}
/* ---------- GENERAL ---------- */
a { text-decoration: none; }
ul {
list-style: none;
margin: 0;
padding: 0;
}
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after { clear: both; }
.container {
display: block;
height: 64px;
position: relative;
width: 256px;
}
/* ---------- Action Bar ---------- */
.action-bar li {
float: left;
}
.action-bar a {
-webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
color: #e7e7e7;
display: block;
font-size: 32px;
height: 64px;
line-height: 64px;
position: relative;
text-align: center;
-webkit-transition: background .3s;
-moz-transition: background .3s;
-ms-transition: background .3s;
-o-transition: background .3s;
transition: background .3s;
width: 64px;
}
.action-bar a:hover .tooltip {
margin-top: 16px;
opacity: 1;
}
.tooltip {
border-radius: 3px;
font-size: 14px;
height: 28px;
left: 50%;
line-height: 28px;
margin: 0 0 0 -50px;
opacity: 0;
position: absolute;
top: 100%;
-webkit-transition: margin-top .3s, opacity .3s;
-moz-transition: margin-top .3s, opacity .3s;
-ms-transition: margin-top .3s, opacity .3s;
-o-transition: margin-top .3s, opacity .3s;
transition: margin-top .3s, opacity .3s;
width: 100px;
}
.tooltip:before {
content: "";
height: 8px;
left: 50%;
margin: -4px 0 0 -4px;
position: absolute;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
}
.like,
.like .tooltip,
.like .tooltip:before { background: #65B1F8; }
.like:hover { background: #65B1F8; }
.favourite,
.favourite .tooltip,
.favourite .tooltip:before { background: #c93037; }
.favourite:hover { background: #b02b32; }
.comment,
.comment .tooltip,
.comment .tooltip:before { background: #43438e; }
.comment:hover { background: #393978; }
.share,
.share .tooltip,
.share .tooltip:before { background: #FF8000; }
.share:hover { background: #FF8000; }
</style>


Chúc các bạn thành công:
File đính kèm: (Bạn chỉ download được 1 file cùng lúc, vui lòng download từng file)
0550366.png (25.3 Kb) · 3206093.png (23.1 Kb) · 3113343.png (6.9 Kb) · 5828462.png (5.1 Kb)


★★★★★ Tôi muốn thử thách chính mình ★★★★★
 
  • Page 1 of 1
  • 1
Search:


☠ Home | ✯ Diễn đàn | ✡ Download | ☣ Nấu ăn | ☢ Video | ☪ Truyện cười | ♘ Mẹo vặt | ✉ Hỗ trợ | ✉ Tin nhắn | Đăng ký | Đăng nhập

BOX ADMIN