Sharing Social Widget - Nút chia sẻ lớn có đếm số cuối bài viết cho blogspot

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ử

DEMO

Để 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/AVvXsEhFwB1qwonygeXomRhCYtfBpSFmHhHlNGnmAr8keyBgm2FyItnPmri_oRip_MFVUmI89FM3_y85bhSIm9_nJnh3O26II-EAbKbQLA06LBJJJgkdl_eWIATmL3P2dxMVk6r_ZGzNuiDmjnkK/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/AVvXsEi_rCfYHV5cOu1KLJekrLo72DvEsUKWx5Fs6d9QDkUJwi6rVna0UzRDGoaWQBOg8QX_RMvCAboJ_fehNwbD7dYEK6dE8t3QAXhOrR5u_j_-epzIJRQ_-YQrnM3xkR8xA90W4eQxREu8-Dri/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/AVvXsEhlFp30hWeo2rXFuvnExf2R4LD7-NAky50Vnn7JTrrjeELC7NAZVHrj2Dm8lezI4UyHjxNa87CwTYSZpAfdJbu7pFCLh_G_CoFYxllpM5iWtUhBtdVhYezk-YQvdtR3dociFZO21W1JlaL5/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/AVvXsEhtOGWCEz2PTKUy8Mo4Ms7tW_6L8xEaFIfeASeXvEeSp5MqMGyJ30dsefkz1pM3ZOYd64BnCDR3ZIOuR-J0cDXTigVvO_p3UDWt4uXGbyrJexgb7iRF-pRNb0yY4FB8dUVaySqjYbxpfnAS/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 == &quot;item&quot;'>
<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='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' id='socialshare' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ALYFvOZVPHY5wrrwy9OKBAwgEraOSMDFlmUtiiv7Rv5iCUpWSJgobIC7HxS_BbflUi__5uyQgOKcFAqNjFqmlVs3BnK8WXC56IWos51MeFoJSidHBAvmyxXsG4M8Zl_WqnZ3SUNyu3Qg/s1600/facebook-blogduykhanh.jpg'/>
 Share on Facebook
 </a>
 <a class='mbatwitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' id='socialshare' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmf6B4bDcZlxl5qfly6a09cfOAyR5hO_ypY_0desYxyO1dkZRoRPmw2hSAeLoRZGV4X34Zgj9O6nNzu815oDJBVGz9Pgz6tSYcZBfIK7Pc008tqEBVL2vDBWzvHtpyHbdsJTSDJ_-Xz-JX/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='&quot;https://plus.google.com/u/0/share?url=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
 </a>
<a class='socialshare2 mbalinkedin' data-title='Linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;source=&quot; + data:blog.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' target='_blank'>
 </a>
<a class='socialshare2 mbastumbleupon' data-title='Stumble-Upon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
 </a>
<a class='socialshare2 mbapinterest' data-title='Pin it' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
 </a>
</div>
<div class='share-toggle'>
<div id='social-expand' onClick='toggle(&apos;expand-social&apos;);'>
<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(){  
    $(&#39;#shareme&#39;).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)
{
$(&quot;#&quot; + d).animate({width:&#39;toggle&#39;},400);
}
$(document).ready(function(){
$(&quot;#social-expand&quot;).click(function(){
$(&quot;.expand-plus&quot;).toggle();
$(&quot;.expand-minus&quot;).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.

Tác giả: Khánh

Một Blogger nghiệp dư thích tìm hiểu về blogspot và các thủ thuật blog. Hy vọng từ cái nhìn của một người không chuyên có thể giúp bạn dễ dàng hơn trong con đường xây dựng Blog.

KHI TA CHIA SẺ - HẠNH PHÚC ĐƯỢC NHÂN LÊN

CÓ THỂ BẠN MUỐN XEM