Mang bộ Emoji của Facebook Messenger vào Blogspot thật dễ dàng

Emoji (hay emoticon) còn gọi là biểu tượng cảm xúc, hay nói ngắn gọn là mặt cười đó. Nó góp phần làm cho cuộc trò chuyện Facebook hay Zalo bớt nhạt hơn, hoặc đơn giản không muốn rep tin nhắn chỉ việc quăng cái icon mặt cười cute :) vào là xong :v
Live Demo

Đề xuất: Chèn ảnh, video từ Youtube vào phần nhận xét của Blogspot
Bài viết hôm nay mình sẽ mang bộ emoji của Facebook Messenger vào thread comment của Blogspot, để phần bình luận bớt nhạt nhòa hơn, hơn thế nữa cũng thể hiện được tình cảm, cảm xúc của người bình luận. Chỉ bằng một đoạn javascript dùng hàm replace từ text thành ảnh, chúng ta có thể dễ dàng thêm biểu tượng cảm xúc emoji vào phần nhận xét của Blogger.

Cách thực hiện

Thêm toàn bộ javascript bên dưới vào trước thẻ </body> trong template.
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<!-- đk chỉ áp dụng cho trang bài viết và trang tĩnh -->
<style>.bacsiwindows_emoticon {width: 20px; margin: -5px 0 0!important; vertical-align: middle;pointer-events:none}</style>
<!-- css định dạng lại kích thước và vị trí mặt cười -->
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("comments");
theText = bodyText.innerHTML;
theText = theText.replace(/\/\=r/gi, "<img class='bacsiwindows_emoticon' src='https://1.bp.blogspot.com/-u8yosPY73V8/WkJVjYnwayI/AAAAAAAAAjM/jL40KsJKbAYur7CsGt7_YJKrcg3q3xVjQCLcBGAs/s1600/icon-cuoi-khinh-------BacSiWindows-Com.png'/>");
theText = theText.replace(/:\)\)/gi, "<img class='bacsiwindows_emoticon' src='https://4.bp.blogspot.com/-ux9qbaP954c/Wj9fdW_UQ4I/AAAAAAAAAeE/orws_oXiiUs6Yg54CMcYrknFaJDrDRGpwCLcBGAs/s30/cuoi-chay-mo-hoi-_------BacSiWindows-Com.png'/>");
theText = theText.replace(/;\)/gi, "<img class='bacsiwindows_emoticon' src='https://3.bp.blogspot.com/-KNV-LEGvjlA/Wj9euSw6_kI/AAAAAAAAAdo/8fjTbQBGPVsc9KqxnXaq6wtXp4bGDN6lgCLcBGAs/s30/nhay-mat-emoji-_----BacSiWindows-Com.png'/>");
theText = theText.replace(/=\)\)/gi, "<img class='bacsiwindows_emoticon' src='https://1.bp.blogspot.com/-XgNCaZxi7DY/Wj9fdcIV-EI/AAAAAAAAAeI/EMrf9QjLr6gSSrlYhBX45P3QdKl_L2kBwCLcBGAs/s30/cuoi-ra-nuoc-mat-_----BacSiWindows-Com.png'/>");
theText = theText.replace(/:\(\(/gi, "<img class='bacsiwindows_emoticon' src='https://4.bp.blogspot.com/-6wzuR6z9xWs/Wj9f0ZqG3nI/AAAAAAAAAeM/NhQ4TJbWwuAqHuwIVnSGiSKud_UbUZKaACLcBGAs/s30/khoc-cmnr-_--------BacSiWindows-Com.png'/>");
theText = theText.replace(/&lt;3/gi, "<img class='bacsiwindows_emoticon' src='https://4.bp.blogspot.com/-ClraxROWNbo/WkB-oLESPYI/AAAAAAAAAfA/sR_3i8Kmk7sGKZzbZoDvoM8u3YDOWTUWACLcBGAs/s30/heart-emo-_----BacSiWindows-Com.png'/>");
theText = theText.replace(/:v/gi, "<img class='bacsiwindows_emoticon' src='https://2.bp.blogspot.com/-O8c-moq--9k/Wj9edQA0hXI/AAAAAAAAAdk/Uh4B-i7MUOstJ_xoUwPenrCYnl5lnDp4wCLcBGAs/s30/pac-man-emoji-_----BacSiWindows-Com.png'/>");
theText = theText.replace(/:\)/gi, "<img class='bacsiwindows_emoticon' src='https://2.bp.blogspot.com/-nQFrYvbwMLo/Wj9e8nUHuTI/AAAAAAAAAdw/bHBWOV1bV2UCNCuNNG18NRWcU_K28Ly6QCLcBGAs/s30/cuoi-mim-emoji-_-----BacSiWindows-Com.png'/>");
theText = theText.replace(/:\(/gi, "<img class='bacsiwindows_emoticon' src='https://4.bp.blogspot.com/-2PvUBPrCQeA/Wj9fHBWEC_I/AAAAAAAAAd0/lguX6Ifl9MoNfP33kl_flS9KAwyoPh39QCLcBGAs/s30/sad-emoji-_--_----BacSiWindows-Com.png'/>");
theText = theText.replace(/==/gi, "<img class='bacsiwindows_emoticon' src='https://2.bp.blogspot.com/--X2hwKt6wbo/Wj9g4pvjqZI/AAAAAAAAAeg/6ZC1k2EO4XsopkyC-omRfTwks32uDALzQCLcBGAs/s30/emoji-mat-l-_----BacSiWindows-Com.png''/>");
theText = theText.replace(/:\*/gi, "<img class='bacsiwindows_emoticon' src='https://1.bp.blogspot.com/-7iZXglOOZyg/WkCCtxO-cfI/AAAAAAAAAgY/Y5zO8vLD1I0puuspl56IUVZ48mpZJuY0gCLcBGAs/s30/kiss-_-----BacSiWindows-Com.png'/>");
theText = theText.replace(/:D/gi, "<img class='bacsiwindows_emoticon' src='https://2.bp.blogspot.com/-Gy5qGO7Ax8s/Wj9fWezhGqI/AAAAAAAAAd8/tnV5uUs0T7MRQtwf-viTAtGFIyl6q3NfwCLcBGAs/s30/cuoi-nhe-rang-_------BacSiWindows-Com.png'/>");
theText = theText.replace(/\^\_\^/gi, "<img class='bacsiwindows_emoticon' src='https://1.bp.blogspot.com/-tolnCQWczZY/WkB-B5w_OLI/AAAAAAAAAe4/occafzZ_gHERU3smOd295SWEx3WB-saUwCLcBGAs/s30/cuoi-thoa-man-_--------BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=s/gi, "<img class='bacsiwindows_emoticon' src='https://3.bp.blogspot.com/-4YezCgQSKEY/WkCB6SjgoeI/AAAAAAAAAgM/VpkghtLDXq8yWeMvkgt5F4oRhJ0teRF_ACLcBGAs/s30/cuc-shit-_----------BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=ok/gi, "<img class='bacsiwindows_emoticon' src='https://3.bp.blogspot.com/-ha8qvV6BPVw/WkB_O8jxRII/AAAAAAAAAfI/Rea7zJEDQAI_XGUMGoke1pnL686xUpn5ACLcBGAs/s30/OK-_--------BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=hi/gi, "<img class='bacsiwindows_emoticon' src='https://3.bp.blogspot.com/-H99MzeSuYQE/WkCAPaC0mwI/AAAAAAAAAfk/SsHberFOHx4ULVE_NcsG4i5LZVZX111ngCLcBGAs/s30/hi_-_----BacSiWindows-Com.png'/>");
theText = theText.replace(/\(y\)/gi, "<img class='bacsiwindows_emoticon' src='https://4.bp.blogspot.com/-y7-1FNKD9To/WkB_mx7YUaI/AAAAAAAAAfQ/eGjVJagChUgEi85bwgJ08Ixy8q-NMOHUwCLcBGAs/s30/like-_--------BacSiWindows.png'/>");
theText = theText.replace(/:p/gi, "<img class='bacsiwindows_emoticon' src='https://1.bp.blogspot.com/-0Lv8dhINNjc/WkCDiSWTUrI/AAAAAAAAAg0/NqeiThMLpEguVNfqeIGdJQT4IGDMPPpTgCLcBGAs/s30/hahe-_--_---------BacSiWindows-Com.png'/>");
theText = theText.replace(/\(yy\)/gi, "<img class='bacsiwindows_emoticon' src='https://1.bp.blogspot.com/-1FKLFedkrYs/WkB_mx3SGdI/AAAAAAAAAfM/xM-qLbvN99QvilvADLJcOfw31qmpk6bdgCLcBGAs/s30/dislike_-_---BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=l/gi, "<img class='bacsiwindows_emoticon' src='https://1.bp.blogspot.com/-P2HxqYDbbuA/WkCD_RmFioI/AAAAAAAAAhA/YViURS04COsCOCw8JBHglP5R0HnIBlSpQCLcBGAs/s30/liec-cmn-mat-_-------BacSiWindows-Com.png'/>");
theText = theText.replace(/\:\-\)/gi, "<img class='bacsiwindows_emoticon' src='https://1.bp.blogspot.com/-8xXw_ZvASlg/WkCDMCb6tnI/AAAAAAAAAgo/JpkViR7m7tghpR9y187RqcxEGym99OPEQCLcBGAs/s30/haiz-_---------BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=hl/gi, "<img class='bacsiwindows_emoticon' src='https://2.bp.blogspot.com/-UXCiTUUOmUM/WkCA7JFLW6I/AAAAAAAAAfs/NKu9vc77TwAYULp4oN52q6AEI4maFPCAQCLcBGAs/s30/hand-left-_-------BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=hr/gi, "<img class='bacsiwindows_emoticon' src='https://4.bp.blogspot.com/-__uQJusXEEE/WkCA7FbyUlI/AAAAAAAAAf0/qY8Q1nOkN8w_SpZRi9poiM1UrXpilzzCwCLcBGAs/s30/hand-right-_--------BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=hup/gi, "<img class='bacsiwindows_emoticon' src='https://2.bp.blogspot.com/-64z0uzn5I0Y/WkCA748T9hI/AAAAAAAAAf4/hAraWHgGC-AHD7oqDFejniia0fUdJPy8QCLcBGAs/s30/hand-up-_--------BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=hd/gi, "<img class='bacsiwindows_emoticon' src='https://2.bp.blogspot.com/-stw6F8kZNiE/WkCA7Os3mrI/AAAAAAAAAfw/KQoQne-BMG8g6GKBDrrXKoZ2MOw4r5KJgCLcBGAs/s30/hand-down-_-------BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=j/gi, "<img class='bacsiwindows_emoticon' src='https://2.bp.blogspot.com/-stw6F8kZNiE/WkCA7Os3mrI/AAAAAAAAAfw/KQoQne-BMG8g6GKBDrrXKoZ2MOw4r5KJgCLcBGAs/s30/hand-down-_-------BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=clap/gi, "<img class='bacsiwindows_emoticon' src='https://1.bp.blogspot.com/-qHoYM_5bgfU/WkB_rscqRyI/AAAAAAAAAfU/_jPSyWale4gAryHklV3x9ymg2vgZNzUTwCLcBGAs/s30/clap-hand-_----------BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=he/gi, "<img class='bacsiwindows_emoticon' src='https://4.bp.blogspot.com/-MphMmD88y1E/WkCCS30tMGI/AAAAAAAAAgQ/Px8O9UXGXPsB4Y7yvuWW7clWQsfwPQkzgCLcBGAs/s30/love-_-------BacSiWindows-Com.png'/>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
</b:if>
và lưu lại!
Nhớ bấm "Thông báo cho tôi" bên trên để nhận thông báo qua Email khi Admin trả lời nhé.
  • Đây là khu vực quản trị, bạn không có quyền truy cập vào!
    1. Test phát :) ;) :( :(( :)) =)) <3

      Trả lờiXóa
    2. đâu có thấy demo đâu

      Trả lờiXóa
    3. Trả lời
      1. Rảnh giờ nào thì tranh thủ viết bài thôi em, cũng lâu rùi không có bài mới :D

        Xóa
      2. anh giúp em fix lỗi font trong widget được không anh

        Xóa
      3. www.quocbaoblog.ooo bên phần siderbar font chữ nó bị lỗi hơi xấu, em muốn fix mà không biết làm sao

        Xóa
      4. body,html,a,div,p,span,*{
        font-family:'Roboto',sans-serif!important
        }

        Xóa
    4. Hehe lâu mới ghé Blog bác mà giờ nhìn khác quá!

      Trả lờiXóa
      Trả lời
      1. Hihi chào bác, theme cũng mới thay được 2 ngày thôi :D

        Xóa
    5. Bài viết "chất chơi người dơi" quá bác sĩ ơi ^_^

      Trả lờiXóa
    6. Anh ơi, sao blog em chèn js emo vô thì bấm trả lời cmt không được còn xóa js emo đi lại trã lời bình thường ạ :(

      Trả lờiXóa
      Trả lời
      1. Ủa sao kì vậy ta, 2 cái js không liên quan gì nhau sao mà hư được nhờ!?

        Xóa
      2. https://testphongdz.blogspot.com/
        Blog này anh ơi :d

        Xóa
      3. Do form comment phiên bản mới đó em.
        Tìm tất cả <b:include data='post' name='comments'/> thay thành <b:include data='post' name='threaded_comments'/>

        Xóa
      4. Hay quá anh ơi /=he thay xong mấy phần cmt luôn :(

        Xóa
      5. Do dùng theme lậu đó em

        Xóa
      6. nên mua theme bản quyền chính chủ

        Xóa
      7. Theme của anh viết nên chỉ anh mới biết nó bị gì và mới sửa được.

        Xóa
      8. hài

        Xóa
      9. Theme của anh bán mà anh ciu lậu ư :3 em mua từ khách hàng của anh rồi mod sơ sơ thôi

        Xóa
      10. theme đấy nhìn là biết theme rip r , mua lại từ khách hàng : " nực cười "

        Xóa
      11. ra thêm theme đi :v r xem cái nào được mới mua

        Xóa
      12. Làm như anh HD ở trên đi.

        Xóa
      13. Suy bụng ta ra bụng người à trẩu Nam :/

        Xóa
      14. GÓP Ý TÍ THÔI MÀ :V

        Xóa
    7. Ôi không còn gì để nói, template đẹp, bài viết chất. BSW đã trở lại và lợi hại hơn xưa :v

      Trả lờiXóa
    8. :) Test để làm thử nào kaka tks admin nhé.

      Trả lờiXóa