Nút share đơn giản cho Blogger


Bài này mình sẻ hướng dẫn bạn tạo nút share đơn giản cho blogger của mình. Bạn có thể thêm nút share vào bất cứ vị trí nào bạn muốn thông qua việt chèn HTML.
Xem demo: tại đây
Bước 1: Chèn CSS trước /b:skin
.share a{float:left;font-size:13px;line-height:30px;color:#fff;border-radius:15px;margin:4px 3px;padding:2px 20px;height:30px;}
.share a:hover{background-color:#222;color:#fff}
.share .facebook{background-color:#003471}
.share .twitter{background-color:#00BFF3}
.share .googleplus{background-color:#EA4D29}
.share .pinterest{background-color:#C6393D}
.share .linkedin{background-color:#0077B5}
Bước 2: Chèn HTML sau vào vị trí muốn hiển thị
<div class='share'>
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><span>Facebook</span></a>
<a class='googleplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><span>Google+</span></a>
<a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><span>Twitter</span></a>
<a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><span>Pinterest</span></a>
</div>
Lưu ý: những nơi chèn HTML thông dụng của Blogger
<div class='post-header-line-1'/>
<div class='post-footer'>
<data:post.body/>

Nhận xét