Cách thêm nút Like và +1 Share cuối hoặc đầu mỗi bài viết, Hướng dẫn thêm nút Like +1 Share cuối bài viết Blospot. Thêm nút Like cho bài viết Blogspot.Hướng dẫn thêm nút Like G+ Share cho bài viết blogspot
Chào mọi người thấy có nhiều bạn hỏi về vấn đề này nên mình viết bài hướng dẫn các bạn luôn ai chưa biết thì đọc nhé.Để tạo được nút Like +1 Share cuối bài viết Blospot bạn làm như sau:
Bước 1: Đăng nhập Blogspot ==> Templates(Mẫu) ==> Edit HTML (chỉnh sửa HTML)
==> Khuyến khích các bạn down toàn bộ code về rồi sửa bằng Notepad ++ . Chú ý trước khi sửa sao lấy 1 bản gốc để tránh trường hợp code lỗi ko khôi phục được
Bước 2: Tìm một trong các đoạn code bên dưới:
Đoạn 1: Như blog của mình là đoạn này nhưng chú ý nó có mấy đạn như này bạn thử cho vào cái cuối cùng xem thế nào
<data:post.body/>
Đoạn 2:
<div class='post-footer'>
Đoạn 3:
<div class='post-footer-line post-footer-line-1'>
Đoạn 4:
<div class='post-footer-line post-footer-line-2'>
Đoạn 5:
<div class='post-footer-line post-footer-line-3'>
Rồi thêm đoạn code dưới đây xuống dưới đoạn code trên (chú ý thay lần lượt chứ không phải thay tất nhé. Bạn thay từng cái 1 lưu temp lại và ra load lại trang xem nó hiển thị đúng chưa nếu đúng rồi thì ok đã thành công nhé)<b:if cond='data:blog.pageType == "item"'>
<div style='border-top:3px solid #bbb;border-bottom:1px solid #bbb;width:100%;height:24px;text-align:left;font:normal 11px Arial;color:#333;margin:10px 0;padding:10px 0 5px'>
<div style='float:left;padding:1px 0;margin-right:15px;font:bold 13px Arial;color:#666'>
<strong>
LIKE and Share this article:
</strong>
:
</div>
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f57432236fb4dee' type='text/javascript'/>
</div>
</b:if>
Các bạn lưu lại ra check lại xem hiển thị ok chưa
Chúc các bạn thành công ! Gặp vấn đề gì vui lòng comment xuống dưới để được hỗ trợ
Chúc các bạn thành công ! Gặp vấn đề gì vui lòng comment xuống dưới để được hỗ trợ
trích gốc từ: http://www.videocach.com/
Cách tạo nút Like Facebook và Google + trượt dọc bài viết
 Tạo các nút liên kết chia sẻ bài viết theo kiểu trượt dọc là một trong những cách rất hiệu quả để tăng tính quảng bá cho nội dung của bạn. Thay vì đứng yên một chỗ đầu hoặc cuối bài viết, hộp chia sẻ trượt dọc luôn luôn đi theo tiến trình của người xem, điều đó làm tăng tỉ lệ click like và share. Nếu dùng WordPress có khá nhiều plugin trợ giúp cho bạn nhưng với Blogspot bạn phải xài code. Code để tạo cũng rất đơn giản chỉ khoảng 15 dòng và bạn chỉ việc copy - paste vào là xong. Ở phần Bố Cục > bạn chọn thêm tiện ích > rồi chọn HTML/Javascript - để thêm chức năng bên thứ ba (chú ý cái hộp HTML/Javascipt này bạn đặt bên tay phải ở cột right ấy và không cần đặt tên - tiêu đề cho nó)... 
Tiếp theo là copy-paste đoạn code vào phần nội dung
Rồi nhấn Lưu
Cuối cùng dưới đây là đoạn code mà bạn cần copy
<!-- www.mangluoitoancau.com chỉnh sửa dựa trên code mẫu của helplogger.blogspot.com-->
<style type="text/css"> #chiase {position:fixed; bottom:25%; margin-left:-730px; float:left; background-color:#FFFFFF;padding:2px;z-index:10;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border: 1px solid #CCCCCC;} #chiase .nut {float:left;clear:both;} </style> <div id='chiase'> <div style="margin:4px;"> <div class='nut' id='facebook'> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script> <fb:like layout='box_count' show_faces='false'></fb:like> </div> <br /> <div class='nut' id='google'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"> </script> <g:plusone size="tall"></g:plusone> </div> </div> </div> <!-- Hết code thanh trượt --> Để thay đổi khoảng cách từ đáy lên trên, bạn điều chỉnh con số 25% ở phần bottom:25%, còn nếu muốn thay đổi khoảng cách với bài viết thì điều chỉnh giá trị -725px ở phần margin-left:-730px Bạn Châu Giang có hỏi ở phần comment muốn thanh trượt dọc ở tận bên góc tay trái bám vào lề thì làm như thế nào, mình share luôn code nhé: <style type="text/css"> #chiase {position:fixed; top:35%; left:0%; background-color:#2AA4CF;padding:2px;z-index:10;border-bottom-right-radius:5px;border-top-right-radius:5px;} #chiase .nut {float:left;clear:both;} </style> <div id='chiase'> <div style="margin:4px;"> <div class='nut' id='facebook'> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script> <fb:like layout='box_count' show_faces='false'></fb:like> </div> <br /> <div class='nut' id='google'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"> </script> <g:plusone size="tall"></g:plusone> </div> </div> </div>
Trích: http://dim.vn/
Hoặc bạn cũng thể vào đây https://developers.facebook.com/docs/plugins/like-button
chọn một vài tính năng như sau
 
THay đổi dòng bôi nền bằng link web của mình. hoặc bạn dùng box trên nếu đã đăng kí apps trên
facebook nhé.
copy nó vào đoạn dưới <div class='post-footer-line post-footer-line-1'> trong phần mẫu chỉnh sửa
Chiêu cuối cùng nếu bạn vẫn chưa làm được:
Có 3 loại
1- Nút dọc có số đếm
3- Nút không có số đếm
Làm Thế Nào Để Thêm Like Facebook Vào Bài Viết
1- Đi vào Blogger Bảng điều khiển> Thiết kế> Chỉnh sửa HTML
2- Đầu tiên hãy sao lưu mẫu của bạn
3- Tìm cho mã dưới đây trong mẫu của bạn
<data:post.body/>
Nếu muốn nút này ở dưới tiêu đề bài viết thì thêm đoạn code dưới đây(tùy bạn chọn kiểu nút với code tương ứng)vào trước dòng code trên.
Hoặc là thêm ngay trước thẻ: <div class='post-footer'>
Thường khi sử dụng tiện ích tự động tóm tắt bài viết sẽ có tới 4 dòng <data:post.body/> đối với mẫu cung cấp bới blogger như mẫu của tôi thì thêm vào dưới dòng thứ 3 còn các mẫu khác thì thêm vào dưới dòng đầu tiên trong 4 dòng đó.
1- Kiểu dọc có số đếm
Code
2- Kiểu ngang có số đếm
Code
3- Kiểu không có số đếm
Code
Up date
Ta có thể sử dụng code dưới đây tích hợp luôn 4 nút gồm:Like,G+,Twitter và Share.
Vị trí đặt code:Trước <div class='post-footer'> ở trong mẫu.
Code:
<b:if cond='data:blog.pageType == "item"'>
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ec4dd3d1e59e9dc' type='text/javascript'/>
</b:if>
Chúc thành công.
Trích http://kartriderdautocrazy01.blogspot.com/ |
0 nhận xét:
Post a Comment