Theme Bác Sĩ Windows: Tạo button share mạng xã hội cực đẹp cho blogspot

Chào các bạn hôm nay mình sẽ chia sẻ đến các bạn cách Tạo button share mạng xã hội
cực đẹp cho blogspot.

Cách thực hiện

Bước 1: Các bạn vào Chủ đề > Chỉnh sửa tìm đến thẻ ]]></b:skin> rồi dán đoạn code sau lên trước thẻ này:

.ty-share-post{position:relative;overflow:hidden;margin:0 -10px -10px;padding:10px;background:#222}
.ty-share-post > span{float:left;color:#fff;font-size:15px;text-transform:none;line-height:28px;margin-right:10px;    display: none;}
ul.ty-share{position:relative;margin:0;padding:0}
.ty-share li{float:left;margin:0 10px 0 0;padding:0}
.ty-share li a{float:left;color:#fff;font-weight:500;font-size:15px;text-align:center;display:inline-block;box-sizing:border-box;opacity:1;margin:0;padding:5px 10px;border-radius:3px;transition:opacity .3s}
.ty-share li a i{border-radius: 100%;border: 1px solid #fff;width: 25px;height: 25px;line-height: 25px;}
.ty-share li a span{margin-left:5px}
.ty-share .ty-facebook{background-color:#3b5998}
.ty-share .ty-twitter{background-color:#00acee}
.ty-share .ty-google{background-color:#db4a39}
.ty-share .ty-pinterest{background-color:#CA2127}
.ty-share .caffe{background-color:green;}
.ty-share li a:hover{opacity:.8}
@media screen and (max-width: 480px) {
.ty-share li a span{display:none}

Bước 2: Thêm đoạn code sau vào nơi bạn muốn nó hiển thị trên Blog

<div class='ty-share-post'>
  <span>Share:</span>
  <ul class='ty-share'>
    <li><a class='ty-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'><i class='fa fa-facebook-official'/><span>Facebook</span></a></li>
    <li><a class='ty-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'><i class='fa fa-twitter'/><span>Twitter</span></a></li>
    <li><a class='ty-google' 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'><i class='fa fa-google-plus'/><span>Google+</span></a></li>
    <li><a class='ty-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'><i class='fa fa-pinterest'/><span>Pinterest</span></a></li>
<li><a class='caffe' href='http://napngay.com/tc-multi/@dohieu197@gmail.com' target='_blank'><i class='fa fa-coffee'/><span> Mời Cafe</span></a></li>
  </ul>
</div>

Cuối cùng bạn lưu lại và tận hưởng thành quả nhé. Các bạn có thể tùy chỉnh lại cho phù hợp với Blog của mình nhé.
Lưu ý: Nếu blog bạn chưa khai báo fontawesome thì thêm đoạn code sau lên trước thẻ </head> nhé.

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
//]]>
</script>

Chúc các bạn thành công.
Nếu bạn không làm được hoặc gặp lỗi gì thì comment bên dưới bài này mình sẽ hỗ trợ nhé.