Thêm nút like và share (chia sẻ) vào bài viết của blog/website

Hiện nay mạng xã hội facebook được sử dụng rất rộng rãi vì thế các chủ blog và website tận dụng chức năng này để bài viết của blog/website sẽ đến với nhiều người qua công cụ "thích và chia sẻ " từ facebook  (như hình bên dưới này)

Cho nên, nay mình sẽ hướng dẫn các bạn thêm nút like và share (chia sẻ) vào bài viết của blog/website và các bạn làm theo mình như bên dưới theo các bước.[post_ad]

Khi sao chép bài viết vui lòng ghi nguồn Phước An Blog.

Bước 1: Đăng nhập Blogger

Bước 2: Chọn Mẫu -> Chỉnh sửa HTML.

Bước 3: Tìm thẻ ]]></b:skin> thêm đoạn CSS bên dướii này lên trên thẻ vừa tìm được.

.blg-socialls{display:block;position:relative;width:100%}
.section-quangcao>img{display:block;width:100%}
.fixed-height-250{height:250px;overflow:hidden}
.blg-hightlight{display:block;position:absolute;left:100px;top:-30px;animation:moved ease-in .3s;animation-iteration-count:infinite;transform-origin:50% 50%;-webkit-animation:moved ease-in .3s;-webkit-animation-iteration-count:infinite;-webkit-transform-origin:50% 50%;-moz-animation:moved ease-in .3s;-moz-animation-iteration-count:infinite;-moz-transform-origin:50% 50%;-o-animation:moved ease-in .3s;-o-animation-iteration-count:infinite;-o-transform-origin:50% 50%;-ms-animation:moved ease-in .3s;-ms-animation-iteration-count:infinite;-ms-transform-origin:50% 50%}
@keyframes moved{0%{transform:translate(0,0)}50%{transform:translate(5px,0)}100%{transform:translate(0,0)}}
@-moz-keyframes moved{0%{-moz-transform:translate(0,0)}50%{-moz-transform:translate(5px,0)}100%{-moz-transform:translate(0,0)}}
@-webkit-keyframes moved{0%{-webkit-transform:translate(0,0)}50%{-webkit-transform:translate(5px,0)}100%{-webkit-transform:translate(0,0)}}
@-o-keyframes moved{0%{-o-transform:translate(0,0);}50%{-o-transform:translate(5px,0);}100%{-o-transform:translate(0,0);}}
@-ms-keyframes moved{0%{-ms-transform:translate(0,0)}50%{-ms-transform:translate(5px,0)}100%{-ms-transform:translate(0,0)}}

Bước 4: Tìm <span class='rating'>5</span> </div> thêm đoạn HTML bên dưới sau dòng vừa tìm.

<section class='no-margin-bottom padding-top-20 padding-bottom-20 text-center'>
<div class='blg-socialls '><span class='blg-hightlight'/>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='true' data-show-faces='true'/>
</div>
</section>

CHÚC CÁC BẠN THÀNH CÔNG! Cám ơn các bạn đã xem bài viết này.

Author : Admin

Share this

Related Posts