Nút chia sẽ facebook cuối bài đăng đẹp

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 được

nút chia sẽ facebook cuối bài đăng

đẹp nhất có thể.

Code CSS

.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 <b:includable id="shareButtons" var="post">....</b:includable>
Rồi thay thế nó bằng đoạn code dưới đây.

    <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 + &quot;&amp;target=email&quot;' 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 + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' 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 + &quot;&amp;target=googleplus&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' 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 + &quot;&amp;target=twitter&quot;' 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 + &quot;&amp;target=pinterest&quot;' 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