Nút chia sẽ cuối bài đăng cho blogspot

byLãng Tử -09:43

0

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 + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>EmailEmail</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'>FB ShareFacebook</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'>Google +Google +</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'>TwitterTwitter</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'>PinterestPinterest</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.

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

Tags: Blogspot

Đăng nhận xét (0)

Nút chia sẽ cuối bài đăng cho blogspot

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

Gái Xinh

Blogspot

Biểu mẫu liên hệ