12 tháng 12 2011

Thêm Reactions vào bài viết của blogspot

Chức năng reactions của blogger cung cấp giúp cho đọc giả thể hiện phản ứng của mình khi xem 1 bài viết nào đó. Chức năng này đã được tích hợp sẵn trong widget "bài đăng trên blog" (Blog1). Nhưng nó thường ở chế độ ẩn (disable), nếu bạn muốn sử dụng nó cho các bài viết của mình thì các bạn phải enable nó lên.


Bài hướng dẫn này cũng rất cơ bản, và có cũng có nhiều blog đã đăng rồi, nhân tiện bạn Namozu hỏi, nên mình cũng xin giải đáp thắc mắc.

Hình ảnh minh họa :

Để Enable tính năng reaction các bạn thực hiện các bước như bên dưới:
1. Vào phần thiết kế -> nhấp chọn vào phần chỉnh sửa widget của tiện ích "Bài đăng trên blog"
2. Và click chọn để enable như hình bên dưới :


- Các bạn có thêm nhiều phản ứng (reaction) để người khác vote bằng cách nhấp vào dòng chữ chỉnh sửa của tính năng Reactions. Sau đó thêm vào, lưu ý là các phản ứng cách nhau bằng dấu phẩy.

3. Save chỉnh sửa lại.

Sau khi save lại và mở bài viết ra để xem thành quả. Và 1 số có lẽ sẽ thất vọng khi nó không hiển thị, các bạn không phải lo lắng. Nó không hiển thị là do template của bạn đã được mod lại (chỉnh sửa). Đa số là code của phần reactions đã bị xóa đi. Để hiển thị nó ta chỉ việc thêm lại phần code của nó là xong.

Sau đây là các bước add lại code của nó:
1. Vào phần thiết kế -> chỉnh sửa HTML -> nhấp chọn mở rộng mẫu tiện ích.
2. Tìm đến dòng code này:
<div class='post-footer-line post-footer-line-3'>
- nếu blog bạn không có dòng này, cũng không sao, bạn có thể tìm đến dòng này :
<data:post.body/>

3. Sau khi tìm được dòng code ở bước 2, các bạn add code của tính năng reactions vào ngay sau dòng code vừa tìm được. Bên dưới là code của nó:
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span></td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

4. Save template lại. và mở lại xem bài viết để thấy kết quả.

21 nhận xét:

  1. Em cũng thử áp dụng xem sao,nhưng mặc định reaction nằm cuối bài viết làm sao cho nó nằm dưới ANCplayer anh Dũng nhỉ.

    Trả lờiXóa
  2. đáp ứng yêu cầu quá nhanh. Thạn FD nhiều nhiều :X

    Trả lờiXóa
  3. @Chip : là code thứ 3 đó, em có thể đặt ở ngay dưới thẻ <data:post.body/> còn nếu đặt ở 1 vị trí nào đó trong bài viết thì hơi cực, phải làm bằng tay từng bài 1. Mà cũng chưa biết nó có hiển thị được ko nữa. Anh chưa test nên chưa rõ.

    Trả lờiXóa
  4. Nhanh quá ! Em đang định làm TUT này, có mấy người hỏi, chưa có thời gian làm ^^. Thanks anh Dũng.

    Trả lờiXóa
  5. Suzuki_aka ơi có yahoo ko cho mình hỏi mình bị lỗi này giờ phải làm sao

    Chúng tôi xin lỗi, nhưng chúng tôi không thể hoàn thành yêu cầu của bạn.

    Khi báo cáo lỗi này tới Bộ phận Hỗ trợ Blogger hoặc Nhóm Trợ giúp Blogger, hãy:

    Mô tả bạn đang làm gì khi bạn gặp lỗi này.
    Cung cấp mã lỗi và thông tin bổ sung sau.

    bX-l4u1mh
    Thông tin bổ sung
    blogID: 4849055428669508107
    host: www.blogger.com
    uri: /display

    Trả lờiXóa
  6. Code bên em dùng hơi khác, giờ nhờ anh Dũng gọn hơn thật . http://www.blogger.com/blog-post-reactions.g?options=

    Trả lờiXóa
  7. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  8. [quote=AUTHOR name=fdquote]Mô tả bạn đang làm gì khi bạn gặp lỗi này.
    Cung cấp mã lỗi và thông tin bổ sung sau.

    bX-l4u1mh
    Thông tin bổ sung
    blogID: 4849055428669508107
    host: www.blogger.com
    uri: /display[/quote]

    Có ai giúp mình xem mình bị lỗi gì không thế

    Trả lờiXóa
  9. @NamPhong: meoit_ute, dùng blogger.com đi bạn :D

    Trả lờiXóa
  10. là sao bạn ơi biết sữa như thế nào không thế

    Trả lờiXóa
  11. Add vô đc mà giờ vô chỉnh sửa phần tử trang nó báo lỗi này anh, anh xem giùm
    https://lh4.googleusercontent.com/-kZVUViUkzY4/TuYjGy9mQmI/AAAAAAAABic/DK4KbhunHaU/s640/loi.jpg

    Trả lờiXóa
  12. @Phan Dũng : template vua phim , không có http://1.bp.blogspot.com/-6ItJqoCgnps/TuVktyjW9JI/AAAAAAAACHs/xTK6JeGkwSw/s400/reactions-fd-2.png chỉnh phần này để hiển thị , thì phải làm thế nào đây ,

    Trả lờiXóa
  13. về cái lỗi này thường gặp của blogger, không phải chỉ có việc chỉnh sửa code bị lỗi, mà ngay cả khi upload hình, hay chỉnh sửa profile ..v..v.. cũng xuất hiện lỗi.

    Theo mình biết thì vừa nãy blogger đang chỉnh sửa gì đó với blogger (ví dụ như trong khung comment giờ có thêm dòng chữ nhập nhận xét của bạn ...). Có thể lúc bạn chỉnh sửa code của template trùng với thời điểm trên nên bị lỗi như vậy. Còn nhớ những lúc blogger đang bảo trì, chúng ta hay gặp lỗi dạng bX như thế này.

    Sau đây là 1 số cách các bạn có thể làm thử :
    1. Cố gắng thử với trình duyệt khác.
    2. Xóa cookie của trình duyệt và thử lại.
    3. gỡ những gì đã thực hiện trước đó.
    4. Đợi 1 thời gian rồi thử lại.
    5. nếu vẫn còn tình trạng trên, hay liên hệ với Blogger.

    Trả lờiXóa
  14. cám ơn anh e sẽ làm thử ^^

    Trả lờiXóa
  15. test lại rồi nó hết lỗi chắc là do bảo trì mà em lại thêm code nên no xuất hiện lỗi thank anh

    Trả lờiXóa
  16. Tiện đây cho em hỏi luôn ;))
    Em thêm cái nút chia sẻ vào bài đăng trên blog rồi mà sao không thấy nó hiện lên nút google+ vậy anh?
    Có thể sửa giúp em không?
    ;;)

    Trả lờiXóa
  17. hết lỗi rồi anh, chắc lại bảo trì:|

    Trả lờiXóa
  18. anh Dũng xem lại giúp em, em làm tất cả các bước nhưng nó không hiện: blog.vnfish.info

    Trả lờiXóa
  19. @Trường Giang : em chèn code của nó vào phần nào của footer bài viết vậy? post-footer-line-3 hả

    Trả lờiXóa
  20. Blog em không có line3, em thử sau line2 nhưng ko được, thử với post.body cũng không hiện luôn. Có khi nào do lệnh nào đó trong CSS làm ẩn đi không anh?

    Trả lờiXóa
  21. Nặc danh13:01 7/5/12

    Cho mình hỏi là mình đã thêm được Reactions vào blog rồi, nhưng mình không thích nó lắm vì khoảng cách giữa mấy ô vuông và cái chữ "Vote" không được đều nhau.

    Kiểu như mấy ô vuông nằm ở trên còn chữ "Vote" nằm ở dưới ấy, tuy không nhìều nhưng nhìn vẫn thấy kì cục lắm. >_<

    Vậy liệu có cách nào chỉnh sửa được không? Nếu không thì cho mình hỏi cách làm cái ô thanks giống như của FD với, làm như thế thì càng tiện. ^^

    Mong được FD giúp đỡ ^^

    Trả lờiXóa

» Có thể sử dụng các thẻ <b>,<i>,<a>.