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

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.

Nhận xét

Được xem nhiều nhất

Uconvert miễn phí cho Office 2003, 2007, 2010, 2013

Download OneKey Ghost v14.5.8.215 GPT (UEFI)

Sửa lỗi không move or copy được sheet của Excel

Hướng dẫn mở PORT Modem GPON H646EW Viettel

Sửa lỗi con trỏ chuột bị quay vòng vòng Windows 7/8