Mặc định blogspot đã có sẵn các nút chia sẽ lên facebook, google plus, twitter, pinterest ở cuối mỗi bài đăng trong blog. Tuy nhiên những nút đó nhìn không đẹp chút nào. Và cũng có rất nhiều hướng dẫn viết một cái code hẵn hoi để tạo ra những nút chia sẽ đẹp cho bài đăng của bạn.
Ở bài này mình không dùng các cách mà mọi người thường chia sẽ (tạo chia sẽ facebook với javascript), mà mình tận dụng lại những gì có sẵn của google. Mình sẽ thêm thắt và chỉnh sửa css sao cho nút bài đăng đẹp nhất có thể.

Code CSS

Code:

.goog-inline-block{margin-bottom:15px}
#share-buttons{width:100%;display:inline-block;text-align:center;margin:10px auto 0}
.share-button{background:#DCE0E0!important;position:relative;display:block;float:left;height:35px;overflow:hidden;width:136px;/*border-radius*/
-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin:2px 7px}
.icon{display:block;float:left;position:relative;z-index:3;vertical-align:top;width:38px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:3px;/*border-radius*/
-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;text-align:center}
.icon i{color:#fff;line-height:35px}
.pslide{z-index:2;display:block;height:100%;left:38px;position:absolute;width:100px;-moz-border-radius-topleft:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-bottomleft:0;/*border-radius*/
-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin:0}
.pslide p{font-weight:700;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}
.share-button .pslide{/*transition*/
-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.sb-email .icon,.sb-email .pslide{background:#e04c42}
.sb-email:hover .pslide{left:-90px}
.sb-facebook .icon,.sb-facebook .pslide{background:#305c99}
.sb-facebook:hover .pslide{left:-90px}
.sb-googleplus:hover .pslide{left:-90px}
.sb-googleplus .icon,.sb-googleplus .pslide{background:#d24228}
.sb-twitter:hover .pslide{left:-90px}
.sb-twitter .icon,.sb-twitter .pslide{background:#00cdff}
.sb-pinterest:hover .pslide{left:-90px}
.sb-pinterest .icon,.sb-pinterest .pslide{background:#bd081c}
.chiase{    font-weight: 700;
   color: #305c99;
   font-size: 16px;
   left: 0;
   position: absolute;
   text-align: center;
   top: 10px;
   width: 100%;
   margin: 0;padding-left:10px}

Tìm đoạn code: ....

Rồi thay thế nó bằng đoạn code dưới đây.

Code:

<b:includable id='shareButtons' var='post'>
  <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'><i class='icon'><i class='fa fa-envelope'/></i><span class='share-button-link-text pslide'><p>Email</p></span><span class='chiase'><p>Email</p></span></a></b:if>
<b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'><i class='icon'><i class='fa fa-facebook'/></i><span class='share-button-link-text pslide'><p>FB Share</p></span><span class='chiase'><p>Facebook</p></span></a></b:if>
<b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-googleplus' expr:href='data:post.sharePostUrl + "&target=googleplus"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'><i class='icon'><i class='fa fa-google-plus'/></i><span class='share-button-link-text pslide'><p>Google +</p></span><span class='chiase'><p>Google +</p></span></a></b:if>
<b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'><i class='icon'><i class='fa fa-twitter'/></i><span class='share-button-link-text pslide'><p>Twitter</p></span><span class='chiase'><p>Twitter</p></span></a></b:if>
<b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + "&target=pinterest"' expr:title='data:top.shareToPinterestMsg' target='_blank'><i class='icon'><i class='fa fa-pinterest-p'/></i><span class='share-button-link-text pslide'><p>Pinterest</p></span><span class='chiase'><p>Pinterest</p></span></a></b:if>
</b:includable>

Đơn giản vậy thôi, không cần phải java hay jquery gì hết cho nó phức tạp mà còn bị nặng nề khi load blogspot của bạn nữa.
Hãy để lại bình luận nếu bạn gặp khó khăn gì lúc thực hiện nhé. Thanks

Source: https://phungnghidinh.blogspot.com/2018/06/nut-chia-se-facebook-cuoi-bai-dang-dep.html