Chào các bạn! Ở bài viết này Khánh sẽ giới thiệu đến các bạn một bộ nút chia sẻ mới với font chữ khá lớn gây ấn tượng cho bạn đọc ở cuối blog. Khi load bài viết, nút chia sẻ sẽ hiện tổng số lượt chia sẻ và hai mạng xã hội lớn nhất hiện nay là Facebook và Twitter. Ngoài ra bạn đọc cũng có thể nhấn nút mở rộng để chia sẻ đối với các mạng xã hội khác như: Google+, Linkedin, Pinterest. Mời bạn xem thử
Để cài đặt widget này chúng ta vào Mẫu > Chỉnh sửa HTML và thực hiện các bước sau:
Để cài đặt widget này chúng ta vào Mẫu > Chỉnh sửa HTML và thực hiện các bước sau:
Nên nhớ sao lưu template trước khi thực hiện các bước bên dưới
Bước 1: Cài đặt CSS
Bạn dán đoạn code sau vào trước ]]></b:skin>#share-blogduykhanh{float:left;margin:0 5px 0 0;padding:8px;}
.sharrre .count{color:#7fc04c;font-weight:700;display:block;font-size:50px;position:relative;text-align:center;text-decoration:none;width:80px;line-height:40px;padding:0}
.sharrre .share{color:#666;display:block;font-size:10px;height:10px;text-align:center;text-decoration:none;width:80px;padding:0}
.social-div a{text-decoration:none!important;display:inline-block}
.social-div a img{display:inline-block;width:auto;height:auto;margin:0 8px 0 -5px;vertical-align:middle}
#socialshare{display:inline-block;vertical-align:middle;text-align:center;color:#fff;font-size:16px;padding:14px 20px 15px;text-decoration:none;font-family:Open Sans;margin-right:5px;-webkit-font-smoothing:antialiased;-webkit-text-rendering:optimizeLegibility;text-transform:uppercase}
#socialshare:active{padding:15px 20px;margin-bottom:-1px}
#socialshare:hover{opacity: 0.9;}
.share-toggle{position:relative;display:inline-block;cursor:pointer;vertical-align:middle;text-align:center;color:#fff}
.share-toggle a{color:#fff;text-decoration:none;}
.social-div{vertical-align:middle;}
#expand-social{display:inline-block;position:relative;vertical-align:middle;height:53px}
#social-expand{display:inline-block;vertical-align:middle;position:relative;top:0;left:0}
.expand{background:#FF4949;position:relative;width:40px;height:40px;line-height:40px;font-size:200%}
.expand:active{box-shadow:0 1px 0 0 #c5bebe;height:41px;margin-bottom:-1px}
.expand:hover{opacity:.9}
.expand-minus{display:none}
.socialshare2{width:50px;height:50px;display:inline-block}
.socialshare2:active{height:51px;margin-bottom:-1px}
.socialshare2:hover{opacity:.9}
.mbafacebook{background:#507bbf}
.mbafacebook:active{box-shadow:0 1px 0 0 #4671b5}
.mbatwitter{background:#63cef2}
.mbagoogle-plus{background:#4d4f54 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirHdbvrevca5q0OIogsUnem5a0C-1fozO3ceoTfrKrqWUc7RKlx4bxpQSFhrQNJdJNcBQkdVT-Vw_m-OUkuS0CE0vVT4vk9g7GplAHhDTNnDBzST-_kA1_Pux14XHhqIHFwrYa2n2f1URX/s1600/googleplus.png) no-repeat center}
.mbagoogle-plus:active{box-shadow:0 1px 0 0 #43454c}
.mbalinkedin{background:#1aace3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_c_cl9TEE32SzJVg7JlR1M5naN3yJ_bVlpYmKXRTiOvAm9GodH9uwDxw_Y77x2kzRycHkobxmmkRGG3ISL86kkxqVWROiNQi49ri3gM3ITeAp3GR3JYhW0SrvP0Hra7roMS7GnSFCJNxv/s1600/in-blogduykhanh.png) no-repeat center}
.mbalinkedin:active{box-shadow:0 1px 0 0 #12a4db}
.mbapinterest{background:#f16261 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOORm52cvVNU41V1PFXt-ccAbA9nxfv3K2tld6R_LrSAPIhHaZBzYyacIw0oXLJWS9F4FtcZNi8hvFlCYa3e-tnukP4ipg82oIl5JD9jE151XxFsXs9examcWLOkGpzA8trumwpYqFDm_8/s1600/pinterest-blogduykhanh.png) no-repeat center}
.mbapinterest:active{box-shadow:0 1px 0 0 #e85756}
.mbastumbleupon{background:#fdaf40 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKnQuYxgyfNYuEdYWSlgUnxCXiFGIPdjCyAKsaiss8rZJwphHTUNqTnNzWc9S0XfJNfjyVgO9VnB_ddbBotw3qsuwmeQ8CKsrFT8XHoKscyPsy2-8i_Xn4ogOYl5_FJFoi9EqyT7raELz0/s1600/stumble-blogduykhanh.png) no-repeat center}
.mbastumbleupon:active{box-shadow:0 1px 0 0 #f5a635}Bước 2: Cài đặt HTML
Bạn dán đoạn code sau vào sau <data:post.body/>. Có thể trong template có nhiều thẻ này, nếu không được bạn có thể thử lại với thẻ khác cho đến khi nào được thì thôi.<b:if cond='data:blog.pageType == "item"'>
<div class='social-div'>
<div id='share-blogduykhanh'>
<div data-title='SHARES' id='shareme'/>
</div>
<div style='display: inline-block; margin-top: 15px;'>
<a class='mbafacebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' id='socialshare' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj86AahNAvR4VxL8qVRwCuCadq2qV1agBG34unQ_ef283aWPNVR0OUnz_6Wydzu5pxaQ4eVF6DYRotlEsoOjkuigMTimD-57RTr6WyXcTOrjw2VSdHGEywNpS4NBbjBwoLK_w05d84IbApK/s1600/facebook-blogduykhanh.jpg'/>
Share on Facebook
</a>
<a class='mbatwitter' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' id='socialshare' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxe6m7t7PLa81jPoHvfFjc3MtJruSyaNLWC3A3SB8hJd16L0RsrqUmWFbAYplcOOBkmMktPPlkRm9xI_8l-qdInv0_mKItJ0G-sPduLPOQLdWeA_DCZo4l6_PR1HifbvXjvpD1-Sh17UlM/s1600/twitter-blogduykhanh.png'/>
Share on Twitter
</a>
</div>
<div id='expand-social' style='display:none;'>
<a class='socialshare2 mbagoogle-plus' data-title='Google+' expr:href='"https://plus.google.com/u/0/share?url=" + data:post.url' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
</a>
<a class='socialshare2 mbalinkedin' data-title='Linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&source=" + data:blog.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' target='_blank'>
</a>
<a class='socialshare2 mbastumbleupon' data-title='Stumble-Upon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
</a>
<a class='socialshare2 mbapinterest' data-title='Pin it' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
</a>
</div>
<div class='share-toggle'>
<div id='social-expand' onClick='toggle('expand-social');'>
<div class='expand-plus expand'>+</div>
<div class='expand-minus expand'>-</div>
</div>
</div>
</div>
</b:if>Bước 3: Cài đặt javascript
Bạn dán đoạn code sau vào trước </body><script src='https://cdn.rawgit.com/msdesign92/ms-design/master/mashable-share.js'/>
<script type='text/javascript'>
$(function(){
$('#shareme').sharrre({
share: {
googlePlus: true,
facebook: true,
twitter: true,
stumbleupon: true,
linkedin: true,
pinterest: true
},
enableTracking: true,
enableHover: false,
});
});
</script>
<script type='text/javascript'>
function toggle(d)
{
$("#" + d).animate({width:'toggle'},400);
}
$(document).ready(function(){
$("#social-expand").click(function(){
$(".expand-plus").toggle();
$(".expand-minus").toggle();
});
});
</script>Vậy là coi như xong. Bạn chỉ cần lưu lại và xem kết quả. Chúc thành công! Nếu có vần đề trong lúc cài đặt bạn có thể để lại bình luận bên dưới.
Subscribe Our Newsletter
0 Response to "Sharing Social Widget - Nút chia sẻ lớn có đếm số cuối bài viết cho blogspot"
Đăng nhận xét