Chào mừng đến với Diễn Đàn Tin Học VN! Hãy chia sẽ những gì bạn biết, và đưa ra thắc mắc của bạn để được giải đáp.
Nút chia sẽ bài đăng lên facebook
13/06/18, 10:31 pm
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
Permissions in this forum:
Bạn không có quyền trả lời bài viết
|
|