Tạo nút chia sẻ bài viết lên mạng xã hội cho Blogspot thì không còn lạ gì nữa, đa số những template blogspot hiện nay đều có, không thì cũng chỉ cần một lát lên google tìm ra cả một lô bài hướng dẫn cài đặt tiện ích này cho blog của bạn với đủ kiểu dáng và hình thức khác nhau…Bla..Bla…
Sử dụng tiện ích này vào blog sẽ giúp người dùng dễ dàng chia link bài viết lên những trang mạng xã hội hơn, từ đó tăng lượt truy cập cho blog, website.
Bình thường mình cũng chẳng định viết bài này làm gì vì tìm trên google cũng ra một đống, nhưng hôm nay lang thang trên blog của một bạn Indonesia thì thấy bài chia sẻ này, điều khá hay là tiện ích nút chia sẻ lên mạng xã hội cho Blogspot của bạn ấy có thêm tính năng tự động đếm lượt số chia sẻ thông qua API của trang web http://donreach.com/social-share-count vì mình chưa thấy bài nào trên google (hay mình không biết) nên giờ viết bài chia sẻ với mọi người.
 |
| Nút Chia Sẽ Mạng xã Hội Có Lượt Đếm Cho Blogspot |
CSS
/* Share Button dengan Counter untuk Blogger by https://anonsecvn.blogspot.com*/
.phanhung_share_button{position:relative;z-index:2;width:100%;padding:20px 0;display:inline-block;margin:20px auto;border-bottom:2px solid rgba(0,0,0,.08)}
.phanhung_share_button .share_blog {display:block;}
.phanhung_share_button .share_blog .wrap {text-align:center;margin:0 auto;display:inline-block;min-width:41px;}
.phanhung_share_button .share_blog .wrap1 {display:inline-block;width:31px;float:left;}
.phanhung_share_button .share_blog ul {margin:0;padding:0;}
.phanhung_share_button .share_blog ul li{list-style:none;list-style-type:none;padding:0;margin:2px;float:left;width:16%;max-width:115px;display:inline-block;font-size:13px;overflow:hidden;text-align:left;height:32px;line-height:32px;color:#fff;border-radius:3px;transition:all .4s}
.phanhung_share_button .share_blog ul li a,.phanhung_share_button .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none}
.phanhung_share_button .share_blog ul li .fa{color:#fff;font-size:16px;font-weight:normal;font-family:FontAwesome;display:inline-block;text-align:center;padding:0;height:32px;line-height:inherit;width:30px;background-color:rgba(0,0,0,.05)}
.phanhung_share_button .share_blog .btn_fb{background:#3a579a}.phanhung_share_button .share_blog .btn_fb:hover{background:#314a83}.phanhung_share_button .share_blog .btn_twtr{background:#00abf0}.phanhung_share_button .share_blog .btn_twtr:hover{background:#0092cc}.phanhung_share_button .share_blog .btn_gplus{background:#df4a32}.phanhung_share_button .share_blog .btn_gplus:hover{background:#be3f2b}.phanhung_share_button .share_blog .btn_pntrst{background:#cd1c1f}.phanhung_share_button .share_blog .btn_pntrst:hover{background:#ae181a}.phanhung_share_button .share_blog .btn_linkdin{background:#2554BF}.phanhung_share_button .share_blog .btn_linkdin:hover{background:#224EB4}
.phanhung_share_button .share_blog .share.h6{font-size:10px;font-weight:700;text-align:center;color:#999;border-top:1px solid #e3e3e3;padding:8px 0 0;margin:8px auto 0;line-height:8px;width:42px;letter-spacing:.5px}
.phanhung_share_button .share_blog .share{margin:5px 5px 0 0;overflow:visible;width:95px}
.phanhung_share_button .share_blog .share .count.h4{font-size:22px;font-weight:700;text-align:center;color:#ff8349;line-height:16px;margin:-8px 0 0;min-height:15px}
.phanhung_share_button .share_blog .btn_fb .share-btn,.phanhung_share_button .share_blog .btn_twtr .share-btn,.phanhung_share_button .share_blog .btn_gplus .share-btn,.phanhung_share_button .share_blog .btn_pntrst .share-btn,.phanhung_share_button .share_blog .btn_linkdin .share-btn{position:relative;color:#fff;display:inline-block;text-align:center;font-weight:700;font-size:11px;float:right;min-width:12px;padding:0 8px 0 0}
@media only screen and (max-width: 979px) {
.phanhung_share_button .share_blog .btn_linkdin {width:34px;}
.phanhung_share_button .share_blog .btn_fb .share-btn,.phanhung_share_button .share_blog .btn_twtr .share-btn,.phanhung_share_button .share_blog .btn_linkdin .share-btn,.phanhung_share_button .share_blog .btn_gplus .share-btn,.phanhung_share_button .share_blog .btn_pntrst .share-btn{display:none}}
@media only screen and (max-width:768px) {
.phanhung_share_button .share_blog ul li a,.phanhung_share_button .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;font-size:11px;height:100%;display:block}.phanhung_share_button .share_blog .wrap{min-width:34px}.phanhung_share_button .share_blog .btn_linkdin,.phanhung_share_button .share_blog .btn_pntrst{width:30px}.phanhung_share_button .share_blog ul li{margin:1px 3px}}
@media only screen and (max-width:479px) {
.phanhung_share_button .share_blog .share{border:0;margin:0 5px 0 1px;overflow:visible;width:80px}.phanhung_share_button .share_blog ul li{width:25px;margin:2px;}.phanhung_share_button .share_blog .wrap{display:none}.phanhung_share_button .share_blog ul li .fa{width:25px}}Bước 2 : Dán đoạn code sau vào bên trên hoặc dưới thẻ <data:post.body/> hay là thẻ <div class=’post-footer’> cũng được, tùy bố cục và mục đích sử dụng của bạn.
HTML
<b:if cond='data:blog.pageType == "item"'>
<div class='phanhung_share_button'>
<div class='share_blog'>
<ul>
<li class='share'>
<div class='share-btn' data-service='total'>
<div class='count h4'/>
<div class='share h6'>SHARES</div>
</div>
</li>
<li class='btn_fb'><a expr:href='" http://www.facebook.com/share.php?v=4& src=bm& u=" + data:post.url + " & t=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-facebook'/> </div>
<div class='wrap'>Share</div>
<div class='share-btn' data-service='facebook'>
<div class='count'/></div>
</a>
</li>
<li class='btn_twtr'><a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + " via @PhanHungBlog - "' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-twitter'/></div>
<div class='wrap'>Tweet</div>
<div class='share-btn' data-service='twitter'>
<div class='count'/></div>
</a>
</li>
<li class='btn_gplus'><a expr:href='"http://plus.google.com/share?url=" + data:blog.url' onclick='javascript:window.open(this.href," " ," menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600" ); return false; ' rel='nofollow'>
<div class='wrap1'><i class='fa fa-google-plus'/></div>
<div class='wrap'>Share</div>
<div class='share-btn' data-service='google'>
<div class='count'/></div>
</a>
</li>
<li class='btn_pntrst'><a data-pin-config='beside' expr:href='" http://pinterest.com/pin/create/button/?url=" + data:post.url + " &media=" + data:blog.postImageUrl + "&description=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-pinterest'/></div>
<div class='wrap'>Pin</div>
<div class='share-btn' data-service='pinterest'>
<div class='count'/></div>
</a>
</li>
<li class='btn_linkdin'><a expr:href='" http://www.linkedin.com/shareArticle?mini=true& url=" + data:post.url + " & title=" + data:post.title + " & summary=& source=" ' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-linkedin'/></div>
<div class='wrap'>Share</div>
<div class='share-btn' data-service='linkedin'>
<div class='count'/></div>
</a>
</li>
</ul>
</div>
</div>
</b:if>
Bước 3 : Cuối cùng là thêm đoạn Script sao vào trên thẻ </body> rồi lưu template lại.
JS
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
// Share Button with Counter by anonsecvn.blogspot.com
$(document).ready(function(){var t=$("link[rel=canonical]").attr("href");$.getJSON("http://sharecount.twistblogger.com/?url="+encodeURIComponent(t)+"&callback=?",function(t){shares=t.shares,$(".count").each(function(t,e){service=$(e).parents(".share-btn").attr("data-service"),count=shares[service],count>1e3&&(count=(count/1e3).toFixed(1),count>1e3?count=(count/1e3).toFixed(1)+"M":count+="k"),$(e).html(count)})})});
//]]>
</script>
</b:if>Chúc Các bạn Thành Công
5 nhận xét
anh ơi chét gmail em bảo cái anh ơi
Hay
bạn ơi cho mình xin data blog này với
Cảm ơn bạn đã chia sẻ thông tin liên quan hữu ích, qua đây mình cũng muốn chia sẻ đến bạn địa chỉ cung cấp DV phiên dịch, dịch thuật đa ngôn ngữ, đa ngành nghề uy tín, chất lượng trên toàn quốc. Công Ty Phiên Dịch - Dịch Thuật A2Z, đơn vị cung cấp DV phiên dịch, dịch thuật số 1 tại Việt Nam. Điểm lợi khi khách hàng sử dụng DV phiên dịch, dịch thuật tại A2Z: tiết kiệm tối đa chi phí, thời gian, tăng khả năng thành công trong công việc, hoàn phí khi có lỗi từ DV. Tham khảo chi tiết ngôn ngữ phiên dịch, dịch thuật: Phiên dịch tiếng anh tại Đà Nẵng, Phiên dịch tiếng Trung tại Hải Phòng, Phiên dịch tiếng nhật tại Hải Phòng, Phiên dịch tiếng trung Đồng Nai, Phiên dịch tiếng trung tại Bắc Giang, Phiên dịch tiếng trung tại Đà Nẵng, Phiên dịch tiếng Hàn tại Hải Dương, Phiên dịch tiếng Hàn tại Hà Nội,..........................