Cách Thêm Button Chia Sẻ Mạng Xã Hội Cho Blogger

Đầu tiên là bạn copy đoạn code bên dưới vào trước thể đóng </head>. Lưu ý nếu trong template của bạn đã có sẵn code này thì có thể bỏ qua.
Mục đích của việc này là chúng ta sẽ sử dụng Font Awesome để tạo các icon, biểu tưởng mạng xã hội

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Bước 2: Thêm đoạn code dưới đây vào vị trí bạn muốn hiển thị button

 <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet' class="icon-button twitter"><i class="fa fa-twitter"></i><span></span></a>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share' class="icon-button facebook"><i class="fa fa-facebook"></i><span></span></a>
<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share' class="icon-button google-plus"><i class="fa fa-google-plus"></i><span></span></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="icon-button linkedin "><i class="fa fa-linkedin"></i><span></span></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="icon-button pinterest "><i class="fa fa-pinterest-p"></i><span></span></a>

 Nếu bạn muốn hiển thị phía dưới tiêu đề bài viết thì thêm đoạn code trên vào sau thẻ

<div class='post-header'>

Nếu bạn muốn hiển thị phía cuối bài viết thì thêm đoạn code trên vào sau thẻ

 <div class='post-footer'>

Bước 3 : Thêm đoạn code vào trên thẻ ]]></b:skin> để thấy hiệu ứng

.icon-button{background-color:#fff;border-radius:40px;cursor:pointer;display:inline-block;font-size:26px;height:40px;line-height:40px;margin:0 5px;position:relative;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:40px}
.icon-button span{border-radius:0;display:block;height:0;left:50%;margin:0;position:absolute;top:50%;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s;width:0}
.icon-button:hover span{width:40px;height:40px;border-radius:40px;margin:-20px}
.icon-button:hover i{transform:rotate(360deg)}
.twitter span{background-color:#4099ff}
.facebook span{background-color:#3B5998}
.google-plus span{background-color:#db5a3c}
.linkedin span{background-color:#0976b4}
.pinterest span{background-color:#cc2127}
.icon-button i{background:none;color:white;height:40px;left:0;line-height:40px;position:absolute;top:0;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;width:40px;z-index:10}
.icon-button .fa-twitter{color:#4099ff;border:1px solid #4099ff;border-radius:40px}
.icon-button .fa-facebook{color:#3B5998;border:1px solid #3B5998;border-radius:40px}
.icon-button .fa-google-plus{color:#db5a3c;border:1px solid #db5a3c;border-radius:40px}
.icon-button .fa-linkedin{color:#0976b4;border:1px solid #0976b4;border-radius:40px}
.icon-button .fa-pinterest-p{color:#cc2127;border:1px solid #cc2127;border-radius:40px}
.icon-button:hover i{color:white;border:none}

Chúc thành công vui lòng comment bên dưới nếu cần support từ KTVONLINE