Bộ nút share Flat (style3) cho Blogger

Hôm nay mình tiếp tục giới thiệu một nút share theo kiểu flat mà mình thấy được sử dụng trên nhiều trang.

Bộ nút share flat

#Thêm HTML

1. Đăng nhập Blogger

2. Mẫu > Chỉnh sửa HTML

3. Tìm thẻ <data:post.body/> (hoặc thẻ <div class='post-footer'> đối với mẫu mặc định của Blogger) . Cả hai thẻ mà bạn tìm thì đều xuất hiện nhiều lần trong template nhưng thẻ mà cần tìm thường là thẻ dưới cùng.

4. Dán code HTML dưới vào dưới thẻ mà bạn đã tìm được ở bước 3

<!-- http://www.khanh98.blogspot.com/2015/07/bo-nut-share-flat-style3-cho-blogger.html -->
<div class="khanh98-share-post">
<a class="khanh98-share-post-facebook" expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' ><span><i class="fa fa-facebook"></i></span>Share</a>
<a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=en&quot;' rel='nofollow' class="khanh98-share-post-twitter" target='_blank' ><span><i class="fa fa-twitter"></i></span>Share</a>
<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' class="khanh98-share-post-google-plus"><span><i class="fa fa-google-plus"></i></span>Share</a>
<a 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' class="khanh98-share-post-pinterest"><span><i class="fa fa-pinterest"></i></span>Share</a>
<a 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' class="khanh98-share-post-linkedin"><span><i class="fa fa-linkedin"></i></span>Share</a>
</div>
<div style="clear:both;"/>

#Thêm CSS

1. Cũng tại phần Chỉnh sửa HTML, bạn tìm thẻ ]]></b:skin>
2. Dán code CSS dưới vào trước thẻ mà bạn vừa tìm

/* http://www.khanh98.blogspot.com/2015/07/bo-nut-share-flat-style3-cho-blogger.html */
.khanh98-share-post{margin:0px;padding:5px;margin:10px;line-height: 30px;text-align: center; }
.khanh98-share-post a {padding:5px 5px 5px 0px; color:#fff; font-family:arial;text-decoration:none; }
.khanh98-share-post .khanh98-share-post-facebook {background:#3B5998;} 
.khanh98-share-post .khanh98-share-post-facebook span{background:#3967C6;padding:5px 8px 5px 8px; margin-right:5px} 

.khanh98-share-post .khanh98-share-post-twitter {background:#55ACEE;} 
.khanh98-share-post .khanh98-share-post-twitter span{background:#2090FF;padding:5px 8px 5px 8px; margin-right:5px} 

.khanh98-share-post .khanh98-share-post-google-plus {background:#EB7352;} 
.khanh98-share-post .khanh98-share-post-google-plus span{background:#FA8E71;padding:5px 8px 5px 8px; margin-right:5px} 

.khanh98-share-post .khanh98-share-post-pinterest {background:#F35D5C;} 
.khanh98-share-post .khanh98-share-post-pinterest span{background:#F02C2C;padding:5px 8px 5px 8px; margin-right:5px} 

.khanh98-share-post .khanh98-share-post-linkedin {background:#4D8CB0;} 
.khanh98-share-post .khanh98-share-post-linkedin span{background:#6FBFF0;padding:5px 8px 5px 8px; margin-right:5px} 

@media only screen and (max-width:479px){
.khanh98-share-post{padding:20px 5px 20px 5px;}

3. Lưu mẫu lại.

#DEMO

Share Share Share Share Share