Nút chia sẻ mạng xã hội cuối bài viết Blogspot
Sau đây là bài viết hướng dẫn cách chèn nút chia sẻ mạng xã hội siêu đẹp ở cuối bài viết trên blogspot của bạn.
 |
| Nút chia sẻ mạng xã hội cuối bài viết Blogspot |
Nút chia sẻ mạng xã hội là một phần quan trọng trên blog, nó là tiện ích thích hợp nhất để tăng tương tác trên chính blog của bạn. Khi một bài viết hay thì hay lập tức người dùng họ bắt đầu chia sẻ và đây là tiện ích phù hợp để làm việc đó.
Nên xem : Thủ thuật blogspot cho dân tự học seo
Nên xem : Thủ thuật blogspot cho dân tự học seo
Vì sao cần phải thêm nút chia sẻ mạng xã hội?
Nút chia sẻ mạng xã hội giúp tăng dần lượt truy cập trên blog của bạn, khi một người dùng chia sẻ ngay lập tức có bao nhiu người khác nhìn thấy chia sẻ này và tiếp tục đọc bài viết đó. Nó giúp tăng lưu lượng truy cập trên blog đáng kể mà tôi nghĩ blogger nào muốn tự học seo hiệu quả cũng nên cài đặt tiện ích này.
Không cần nói thêm gì nữa bây giờ chúng ta thêm tiện ích nút chia sẻ mạng xã hội này nhé.
Bước 1 : Vào phần Mẫu > Chỉnh sửa HTML thêm đoạn code sau trên thẻ </b:skin>
/* CSS Share Button */
.sharepost li{width:19%;padding:0;list-style:none;}
.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li a:hover{opacity:1;color:#444;border:double #fff;}
.sharepost li .twitter{background-color:#55acee;}
.sharepost li .facebook{background-color:#3b5998;}
.sharepost li .gplus{background-color:#dd4b39;}
.sharepost li .pinterest{background-color:#cc2127;}
.sharepost li .linkedin{background-color:#0976b4;}
.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}
.sharepost li{float:left;margin-right:1.2%}
.sharepost li:last-child{margin-right:0}
.sharepost li .fa:before{margin-right:5px}
Bước 2 : Chèn đoạn code này trên thẻ </head> nếu blog của bạn chưa có
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>Bước 3 : Tiếp tục tìm đến <data:post.body/> thêm đoạn code này ngay sau nó
<b:if cond='data:blog.pageType == "item"'>Lưu ý : Trong mẫu có nhiều hơn 1 thẻ <data:post.body/> nên bạn chèn lần lượt cho đến khi nào vừa ý nhé.
<div class='sharepost'>
<ul>
<li><a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li> <li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li> <li><a class='gplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li> <li><a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li> <li><a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' target='_blank'><i class='fa fa-pinterest'/>Share</a></li> </ul>
</div> </b:if>
Bây giờ thì hãy lưu mẫu lại và xem thành quả vừa làm được xem thế nào nhé, quay trở lại một bài viết bất kỳ thưởng thức nút chia sẻ mạng xã hội mà bạn vừa làm đi nào.
khong dc
Trả lờiXóa