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

Button chia sẻ mạng xã hội ( Social Share Button ) là một widget cần thiết mà mọi Blog nên có. Đây là một cách thức hiệu quả và miễn phí để tăng truy cập cho Blog. Khi người đọc tìm được một thông tin, một bài viết hữu ích trên Blog của bạn, họ sẽ muốn chia sẻ nó lên mạng xã hội và đã gián tiếp quảng bá cho Blog của bạn.

Bài viết này mình sẽ hướng dẫn các bạn cách thêm button chia sẻ mạng xã hội vào Blogger cụ thể, là vào phần bài viết.

Bước 1 : Thêm đoạn code sau vào phía trên thẻ </head>

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

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
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}

Lưu lại

Vậy là OK, giờ các bạn F5 lại Blog để xem thành quả, nếu có vướng mắc gì hãy để lại comment để được giúp đỡ. Demo Dưới Bài Viết Nhé :D. Chúc các bạn thành công.

Share :

Tweet

✚