Tạo bộ nút chia sẻ mạng xã hội

Đây là bài viết đầu tiên chia sẻ về thủ thuật blogspot là một hướng dẫn thêm nút chia sẻ mạng xã hội cho blogspot như hình trên vào cuối bài viết. Tiện ích mạng xã hội này hoàn toàn dùng css rất đẹp mắt tôi nghĩ là cái mà các bạn đang tìm đây rồi.

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

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 == &quot;item&quot;'>
<div class='sharepost'>
<ul>
<li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li> <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li> <li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + 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='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li> <li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Share</a></li> </ul>
</div> </b:if>

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é.

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.

Bài viết liên quan:

• Tweet
• Share
• Share
• Share
• Share