Tạo thanh chia sẻ bài viết đẹp mắt và hiện đại cho blog

#Thủ Thuật #Windows #Blogger #Facebook

Tạo thanh chia sẻ bài viết đẹp mắt và hiện đại cho blog

Share:
Có nhiều cách để tạo một thanh chia sẻ bài viết hoặc một widget chia sẻ bài viết, nhung trong bài viết này mình sẽ hướng dẫn các bạn cách đơn giản nhất để tạo một thanh chia sẻ bài viết nhìn đẹp mắt, thiết kế hiện đại và quan trọng là cực dễ thực hiện.

Hướng Dẫn Thực Hiện

Bước 1: Chèn đoạn CSS dưới đây vào trước thẻ ]]></b:skin> trong template
.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 mã dưới đây vào sau thẻ <head> trong template. Nếu template của bạn có Font Awesome rồi thì có thể bỏ qua bước này.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Bước 3: Chèn đoạn code dưới đây vào nơi bạn muốn hiển thị thanh chia sẻ này, có thể chèn sau đoạn <data:post.body/> trong template.
<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>
Bước 4: Lưu template và thưởng thức!

Lời Kết

Vậy là chỉ vài bước đơn giản là chúng ta đã có thể tạo được thanh chia sẻ bài viết thật đẹp và hiện đại rồi
Chúc các bạn thành công.
Nếu gặp bất cứ lỗi nào hãy comment dưới bài viết
CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.