Button chia sẻ mạng xã hội cho blogger

LongAnIT 9/22/2018
Tạo button chia sẻ mạng xã hội cho blogger

Có thể nói button chia sẻ mạng xã hội trong bất kỳ website nào cũng đều vô cùng có ích nó rất tốt để seo web của bạn. Ngoài việc giúp chia sẻ bài đăng lên đó tạo tương tác tốt đồng thời tăng lượt truy cập vào website của bạn.

Trong bài viết này tôi sẽ hướng dẫn cho các bạn thêm button chia sẻ mạng xã hội nằm phía sau mỗi bài viết trên blooger . Vui lòng làm theo các bước như hướng dẫn bên dưới nhé

Bước 1:  Blogger - Chủ đề - Chỉnh sửa HTML. Copy và dán đoạn code bên dưới vào CSS

 /* CSS Share Button by longanit.com*/
.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}
Bước 2: Tại Template của bạn nhấn Ctrl + F trong khung tìm kiếm bạn tìm code sau:
<div class=’post-footer’>
Bước 3: Paste đoạn code dưới đây vào phía dưới đoạn code đã tìm kiếm ở trên
 <!-- Bat dau chia se mang xa hoi by longanit.com -->
 <a class='icon-button twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/><span/></a>
<a class='icon-button facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/><span/></a>
<a class='icon-button google-plus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/><span/></a>
<a class='icon-button linkedin ' expr:href='&quot;https://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'><i class='fa fa-linkedin'/><span/></a>
<a class='icon-button pinterest ' expr:href='&quot;https://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'><i class='fa fa-pinterest-p'/><span/></a>
<!-- Ket thuc chia se mang xa hoi -->
 Có thể trong quá trình tìm kiếm sẽ có từ  2 – 4 vị trí, chứa code <div class=’post-footer’> tùy vào mỗi template. Tuy nhiên bạn nên chọn vị trí cuối cùng.

Không có nhận xét nào:

Đăng nhận xét

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể đặt backlink tại đây Hướng dẫn đặt backlink nofollow tại đây