Cách tạo bộ icon emoji theo kiểu facebook cho bình luận blogger

Bộ icon emoji siêu chất cho bình luận blogger

Chia sẽ bộ code để các bạn có thể thêm vào các icon Emoji siêu chất vào khung bình luận blogger giúp cho khung bình luận sinh động hơn. Cái này thì chắc mình khỏi cần giới thiệu nhiều về Emoji thì các bạn cũng đã biết hết rồi. Bởi vì ngoài phần bình luận của facebook ra các mạng xã hội phổ biến khác đều có đầy đủ các emoji sinh động này

Cách thực hiện chỉ với một bước như sau


Thêm toàn bộ javascript bên dưới vào trước thẻ </body> trong template.

<!-- tao emoji commnent bietko.com-->
<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>
Đến đây thì các bạn chỉ việc lưu lại và tận hưởng kết quả thôi. Chúc các bạn làm thành công nhé

các icon emoji tổng hợp cho khung bình luận
Các icon emoji tổng hợp cho khung bình luận thêm sôi động nhằm kích thích các user tích cực tham gia để lại tin nhắn nhiều hơn

4 Nhận xét

✪★ Chèn link ảnh/video trực tiếp vào khung bình luận để hiển thị hình ảnh hay video cho phần nội dung.
✪★ Nếu tải file mẫu không được, vui lòng để lại nhận xét vào khung bình luận bên dưới để được hỗ trợ nhé .
✪★ Chúc các bạn có một năm Nhâm Dần 2022 🐯 nhiều thành công tốt đẹp!

  1. Test thử comment xem sao nhé :) :D :( (y) ^^

    Trả lờiXóa
  2. \/\=r
    :\)\)
    ;\)
    =\)\)
    :\(\(
    <3
    :v
    :\)
    :\(
    ==
    :\*
    :D
    \^\_\^
    \/=s
    \/=ok
    \/=hi
    \(y\)
    :p
    \(yy\)
    \/=l
    \:\-\)
    \/=hl
    \/=hr
    \/=hup
    \/=hd
    \/=j
    \/=clap
    \/=he

    Trả lờiXóa
  3. THực ra mình vẫn thích bộ comment của yahoo hơn bởi nó được hỗ trợ bởi các hình động trông nhiều sắc thái biểu cảm hơn..ngoài ra nó còn nhắc đến thời chat-chit qua yahoo messenger rất lâu rồi mà ai cũng đã từng sử dụng @};- :X

    Trả lờiXóa
Mới hơn Cũ hơn