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-->Đế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é
<b:if cond='data:blog.pageType != "index"'>
<!-- đ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(/<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>
![]() |
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 |
Test thử comment xem sao nhé :) :D :( (y) ^^
Trả lờiXóa\/\=r
Trả lờiXóa:\)\)
;\)
=\)\)
:\(\(
<3
:v
:\)
:\(
==
:\*
:D
\^\_\^
\/=s
\/=ok
\/=hi
\(y\)
:p
\(yy\)
\/=l
\:\-\)
\/=hl
\/=hr
\/=hup
\/=hd
\/=j
\/=clap
\/=he
mình làm r có mỗi cái =)) là đc thôi bạn
XóaTHự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