Chèn mặt cười với hiệu ứng tooltip cho comment blogspot

Để tránh đơn điệu cho blogger. Hôm nay mình giới thiệu một mẫu mặt cười (Emoticons) dạng hover tooltips. cho nhận xét Với kiểu Emoticons này sẽ hiện ra một khung tooltips hover danh sách các mặt cười cho độc giả sử dụng khi comment. Giúp blog của bạn gọn hơn. Mẫu hiển thị tốt với các mẫu comment cũ và trên các trình duyệt như IE, Firefoc, Chroome, opera,safari,... Thủ thuật có thể áp dụng trên các mẫu blog cũ và các mẫu thread comment của blogger (rất đa dạng phải không).

Các bạn hãy xem blog demo hoặc ảnh minh họa bên dưới để thấy rõ hơn.

XEM DEMO

CHèn mặt cười với hiệu ứng tooltip cho blogspot

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn Chỉnh sửa HTML => Chọn Mở rộng tiện ích mẫu.
4. Chèn đoạn mã dưới đây trước thẻ </body> :

<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("comment-holder");
theText = bodyText.innerHTML;
theText = theText.replace(/=\)\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlLVdiogjUq3gM8xZrACZ4Lc3p5ZFD7QFpFGiwU5doQBd9tndLF2AiJrjzVIAoYLzW7k7GOtBNlmi1BN-bJ6XFxkwHsi35ItvFC0MfPySaBmJBbiHl5NoH9zUdAxu2FWYAZyaGEvxlzCg/'/>");
theText = theText.replace(/:\)\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaQjqiaiLEJak2FmlAfyjASDhdJOYoZhroQ5xwfEPt_N-EFNReI0Cr9q5H65JeeK7NpcBWsR1VgWKIL8hXb3qY23YqjbjR9rj7OCUyZmMz0ISUBGi4vZGDq6ARFE2wnBk4y5z87Drln3s/'/>");
theText = theText.replace(/X-\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlDKrb5fBpSzl7t_A-THq4aV-YCES2AviYenEyBF-4grwmQGyghDym97s5vggnlm4GuNt5mPhl97Ls6lGUsedtlKvsU8P8x1MF2BPjzuAWjMdeDU1TmFo1VVSkekZNoz8tclumRNrBhHU/'/>");
theText = theText.replace(/:\(\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYlxz1EoZXYFH4FshkeoxYqVauclGIMp-Z7sLW_yF7S0HGZWuutuYVsH2TWrN-cxotJ5nnAD93yEX8u9Uo1f7f56Z7VW7As8a5-yaxaTI9Sp65KfYE6iUfZbs0d1zoRMn4vbgNXdT2fz8/'/>");
theText = theText.replace(/b-\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZMnAbsZKJ-QUAUb0d6cng0TwwXx98G_pRcH4-gTsA2QrJDV9zyw1WPp-IyMCPE4JQMqFkgoWm3OZcEQltoux2Iqm4abWE4EKINDca7jUM654dd0yeexAJAlrek8crpzT1fng0s8eUu7I/'/>");
theText = theText.replace(/=d&gt;/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAlcgDB1asvKBzcTajdFIubNXLn8Zv6Mndq_Y7HuHh7iZnib_akCI-AmWMuSJz_FNCA3C7Y5AKQ3xznf-IesLloJypqBTsSvRnubVzCf-Uk6qZUB95M4V2Vyh6MEgsLaDQbHFD8LJRP0U/'/>");
theText = theText.replace(/b-\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYG-wRSDOKRZlM7qKDOVpIQFkwScXSb2NZtcleSvHJrNFyuqFlTSiXHZlzDYC1WlsU7eQ0UvK7MwO6C9lXLYIsU4skuHfsuI05cb8VdYQD603O2Mnq_j-ha8IYVgd-4NRIEb04ivDU87k/'/>");
theText = theText.replace(/:D/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3lyAg5fNRAIDiZNZYMVQ1g8v7nLDRyPySyAE6caLbzlRBdeWMB4hiRF8W6TNLYvF7nKSJWEeSmeUrBt51NpCCmnBSKN8IXVC89FLH7s5iQlf55Kv2JHsBPXbu7_Xo8UpQu2W5VU9D8Xw/'/>");
theText = theText.replace(/:-\?/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfrRHF1lgTXL5AHIAXTxZz2SXtwIzPTLcUItqfBnyIFDqjK4nBw8UWt18W5avQLx1xvdRWc1A1LgBfAJMHZyz6UwfURCJwLlOhgS6w8zqYkw7-rQVy5jaexcF_1eMtW1WHkTTVxakD8Jg/'/>");
theText = theText.replace(/:-&gt;/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0v-zgbvrckivqk-MtDWRyY64g-SO-gMu43vi59TGvsPk6I0AgxNLiLDVlAfFiV00joaH6vRRDnpZApELieQM9GH7HLN1ujVb8Q6NCQJL7KO8qsZSRQy_TH1CETpM_lPI9WgdU8AnjzTw/'/>");
theText = theText.replace(/:-o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGbB0ZEFCyVYhPeIJNUxHU0VGLyIgqVZ0t6vA7WFo8SIIgclcu-C0DKmL-VpT9RoX_9eAGNYUEOd0qLSzhUYI44Q9Z-BssdVqDuM1u09EatYylj0b9XZJqYQiD8JoHHdkKmr6qZGJSn1M/'/>");
theText = theText.replace(/:\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiToHsUtmd9X-94hdbqBQ6YtyFD-tGgHatVRxeAlng1JZeOOy7AahPhnwSbcjGhsYOapbZIqhgOBz1rw9wh1I883khw-KNx_hD4lzjMjBn99-Az5YbQ9tJRSczIq5SL-gfhMeVfGtpSBxM/'/>");
theText = theText.replace(/\[-\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvVpmT7L6RnlsnlvqyI8pQ_ECcWyPRmzXj8c9daDRomja_SSWgD7bpeS2Wk0AxHhIU_JOIMpIqWC0A11LWKIx0gav93R4_iWfRenv1clPUOXBPFjqn8YKH5aRMdh5w-AuYKAtUPKn1eoc/'/>");
theText = theText.replace(/@-\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF9s9v_3vNCQx7kW4XrHgS8UH7xuAFCwHzWcnKEjerGPlL1FDtdSaKHQY_257oK4m2KgPesDQlfpEpTz74mhUbqEmnQoJoM0vy5_JPOtZpQO1dFVu7xBA_ja1gdm-FDg-OBxLie59dLpY/'/>");
theText = theText.replace(/:-s/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijoD603Q4K9mm-o7C4zdBeP9pRjh1XoOEwpEfjzYmAFGDaHk49gQqI_ruqin2CE5pGlRhPm4t6O_rCgMp_hi2-eszJGti3fX4kIWiZVIunOgI0JBXLNuKS74tNS8shMwrU3pmpXqFmGl8/'/>");
theText = theText.replace(/:\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0TJN2CEJDidvQwRCisBSHYKOJujNNrLPYFzjMCWqaJU6yCLFaWZYhs2qjQ_vzmAOUn-qTwxdg4v8WmA28KDM17n1-13mIZUjRvAyREJqTII63y7eUkamKwFlsuRxYPjKTUin3glMbd_I/'/>");
theText = theText.replace(/:p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnPN_LVPmx4uCdwgRNQJVID2zuOXYbWg_-UDTTCyT4DIhstfhel3JDw9Dpl_MHw3lwKZnccjdFdoKr_Dmd_yG1yT__nJQ44rzPueWbOmQhizLz9hiOfbtZSSupi_4hRzgJjBqZ-Eu7Yz4/'/>");
theText = theText.replace(/:\*/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqVoGgUtC9kRo57FDsdEWc9C5LifsKB_3xr5i2WdY38vH2uj3Ii-nzYl8AaYBKXcYOPSDff_OTaWCUedGVYEl0n9kq_kljFJI0iWEhnis0XQ1BmrMMWV2VLAPnXtOpZkTcZ2OXlT40XnM/'/>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

-Lưu ý: Với những ai sử dụng mẫu comment cũ thì thay dòng

bodyText = document.getElementById("comment-holder");

Thành:

bodyText = document.getElementById("comment-holder");

5- Tìm đoạn code sau:

<b:loop values='data:post.comments' var='comment'>

- Thêm thẻ bên dưới vào trước đoạn code vừa tìm được.

<div id='emocomments'>

6-Tìm thẻ đóng tương ứng với thẻ trên

</b:loop>

- Và thêm sau nó thẻ

</div>

7- Bước này là hiển thị những ký tự tắt và emoticons tương ứng với nó cho người đọc có thể biết được để chèn vào khung Nhận xét.

7.1- Tìm đến thẻ

<data:blogTeamBlogMessage/>

- Và chèn đoạn mã dưới đây vào sau nó:

<h5 class='the-tooltip top left emo'>
Chèn Emoticons
<div class='comment_emo_list'>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaQjqiaiLEJak2FmlAfyjASDhdJOYoZhroQ5xwfEPt_N-EFNReI0Cr9q5H65JeeK7NpcBWsR1VgWKIL8hXb3qY23YqjbjR9rj7OCUyZmMz0ISUBGi4vZGDq6ARFE2wnBk4y5z87Drln3s/'/><span> :))</span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYlxz1EoZXYFH4FshkeoxYqVauclGIMp-Z7sLW_yF7S0HGZWuutuYVsH2TWrN-cxotJ5nnAD93yEX8u9Uo1f7f56Z7VW7As8a5-yaxaTI9Sp65KfYE6iUfZbs0d1zoRMn4vbgNXdT2fz8/'/><span> :((</span> </div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3lyAg5fNRAIDiZNZYMVQ1g8v7nLDRyPySyAE6caLbzlRBdeWMB4hiRF8W6TNLYvF7nKSJWEeSmeUrBt51NpCCmnBSKN8IXVC89FLH7s5iQlf55Kv2JHsBPXbu7_Xo8UpQu2W5VU9D8Xw/'/><span> :D </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0TJN2CEJDidvQwRCisBSHYKOJujNNrLPYFzjMCWqaJU6yCLFaWZYhs2qjQ_vzmAOUn-qTwxdg4v8WmA28KDM17n1-13mIZUjRvAyREJqTII63y7eUkamKwFlsuRxYPjKTUin3glMbd_I/'/><span> :( </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlLVdiogjUq3gM8xZrACZ4Lc3p5ZFD7QFpFGiwU5doQBd9tndLF2AiJrjzVIAoYLzW7k7GOtBNlmi1BN-bJ6XFxkwHsi35ItvFC0MfPySaBmJBbiHl5NoH9zUdAxu2FWYAZyaGEvxlzCg/'/><span> =)) </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZMnAbsZKJ-QUAUb0d6cng0TwwXx98G_pRcH4-gTsA2QrJDV9zyw1WPp-IyMCPE4JQMqFkgoWm3OZcEQltoux2Iqm4abWE4EKINDca7jUM654dd0yeexAJAlrek8crpzT1fng0s8eUu7I/'/><span> b-( </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiToHsUtmd9X-94hdbqBQ6YtyFD-tGgHatVRxeAlng1JZeOOy7AahPhnwSbcjGhsYOapbZIqhgOBz1rw9wh1I883khw-KNx_hD4lzjMjBn99-Az5YbQ9tJRSczIq5SL-gfhMeVfGtpSBxM/'/><span> :) </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnPN_LVPmx4uCdwgRNQJVID2zuOXYbWg_-UDTTCyT4DIhstfhel3JDw9Dpl_MHw3lwKZnccjdFdoKr_Dmd_yG1yT__nJQ44rzPueWbOmQhizLz9hiOfbtZSSupi_4hRzgJjBqZ-Eu7Yz4/'/><span> :P </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGbB0ZEFCyVYhPeIJNUxHU0VGLyIgqVZ0t6vA7WFo8SIIgclcu-C0DKmL-VpT9RoX_9eAGNYUEOd0qLSzhUYI44Q9Z-BssdVqDuM1u09EatYylj0b9XZJqYQiD8JoHHdkKmr6qZGJSn1M/'/><span> :-o </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqVoGgUtC9kRo57FDsdEWc9C5LifsKB_3xr5i2WdY38vH2uj3Ii-nzYl8AaYBKXcYOPSDff_OTaWCUedGVYEl0n9kq_kljFJI0iWEhnis0XQ1BmrMMWV2VLAPnXtOpZkTcZ2OXlT40XnM/'/><span> :* </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijoD603Q4K9mm-o7C4zdBeP9pRjh1XoOEwpEfjzYmAFGDaHk49gQqI_ruqin2CE5pGlRhPm4t6O_rCgMp_hi2-eszJGti3fX4kIWiZVIunOgI0JBXLNuKS74tNS8shMwrU3pmpXqFmGl8/'/><span> :-s </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvVpmT7L6RnlsnlvqyI8pQ_ECcWyPRmzXj8c9daDRomja_SSWgD7bpeS2Wk0AxHhIU_JOIMpIqWC0A11LWKIx0gav93R4_iWfRenv1clPUOXBPFjqn8YKH5aRMdh5w-AuYKAtUPKn1eoc/'/><span> [-( </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF9s9v_3vNCQx7kW4XrHgS8UH7xuAFCwHzWcnKEjerGPlL1FDtdSaKHQY_257oK4m2KgPesDQlfpEpTz74mhUbqEmnQoJoM0vy5_JPOtZpQO1dFVu7xBA_ja1gdm-FDg-OBxLie59dLpY/'/><span> @-) </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAlcgDB1asvKBzcTajdFIubNXLn8Zv6Mndq_Y7HuHh7iZnib_akCI-AmWMuSJz_FNCA3C7Y5AKQ3xznf-IesLloJypqBTsSvRnubVzCf-Uk6qZUB95M4V2Vyh6MEgsLaDQbHFD8LJRP0U/'/><span> =d&gt; </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYG-wRSDOKRZlM7qKDOVpIQFkwScXSb2NZtcleSvHJrNFyuqFlTSiXHZlzDYC1WlsU7eQ0UvK7MwO6C9lXLYIsU4skuHfsuI05cb8VdYQD603O2Mnq_j-ha8IYVgd-4NRIEb04ivDU87k/'/><span> b-) </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfrRHF1lgTXL5AHIAXTxZz2SXtwIzPTLcUItqfBnyIFDqjK4nBw8UWt18W5avQLx1xvdRWc1A1LgBfAJMHZyz6UwfURCJwLlOhgS6w8zqYkw7-rQVy5jaexcF_1eMtW1WHkTTVxakD8Jg/'/><span> :-? </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0v-zgbvrckivqk-MtDWRyY64g-SO-gMu43vi59TGvsPk6I0AgxNLiLDVlAfFiV00joaH6vRRDnpZApELieQM9GH7HLN1ujVb8Q6NCQJL7KO8qsZSRQy_TH1CETpM_lPI9WgdU8AnjzTw/'/><span> :-&gt; </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlDKrb5fBpSzl7t_A-THq4aV-YCES2AviYenEyBF-4grwmQGyghDym97s5vggnlm4GuNt5mPhl97Ls6lGUsedtlKvsU8P8x1MF2BPjzuAWjMdeDU1TmFo1VVSkekZNoz8tclumRNrBhHU/'/><span> X-( </span></div>
</div>
</h5>

7.2- Thêm hiệu ứng toooltips để hover các mặt cười khi di chuột và chữ Chèn Emoticons bằng cách. Chèn đoạn code bên dưới trước thẻ ]]></b:skin>

.the-tooltip {position: relative}
.the-tooltip :focus + :last-child, .the-tooltip:focus > :last-child, .the-tooltip:hover > :last-child {opacity: 1;-webkit-transition: 0.4s 0s;-moz-transition: 0.4s 0s;-ms-transition: 0.4s 0s;-o-transition: 0.4s 0s;transition: 0.4s 0s;visibility: visible}
.the-tooltip > :last-child {border: solid 1px;border-radius: 5px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;font-size: 17px;line-height: 1.5;opacity: 0;padding: 10px 20px;position: absolute;-webkit-transition: 0.2s 0s;-moz-transition: 0.2s 0s;-ms-transition: 0.2s 0s;-o-transition: 0.2s 0s;transition: 0.2s 0s;visibility: hidden;width: 250px;z-index: 999}
.the-tooltip.emo > :last-child{font-family: sans-serif;width:100%;margin-bottom:2px !important;padding:10px;background-color:#fff;border-color:#e3e3e3;color:#161d00;text-shadow:none}
.the-tooltip.emo > :last-child:after{border-color:#fff}
.the-tooltip.emo > :last-child:before{border-color:#d3d3d3}
.the-tooltip > :last-child * {max-width: 100%}
.the-tooltip > :last-child:after, .the-tooltip > :last-child:before {border: solid 11px;content: "";display: block;margin: 0 20px 0 20px;position: absolute}
.the-tooltip.left > :last-child{left:0}
.the-tooltip.left > :last-child:after,.the-tooltip.left > :last-child:before {left:10px}
.the-tooltip.right > :last-child {right:0}
.the-tooltip.right > :last-child:after, .the-tooltip.right > :last-child:before {right:0}
.the-tooltip.center > :last-child {left: -125px;margin-left: 50%;}
.the-tooltip.center > :last-child:after, .the-tooltip.center > :last-child:before {left: 50%;margin-left: -10px}
.the-tooltip.top > :last-child{bottom:100%;margin-bottom:15px}
.the-tooltip.top > :last-child:after {margin-top: -1px}
.the-tooltip.top > :last-child:after, .the-tooltip.top > :last-child:before {border-bottom-color: transparent !important;border-left-color: transparent !important;border-right-color: transparent !important;top: 100%}
.the-tooltip.top > :last-child:before {margin-top: 0px}
.the-tooltip.bottom > :last-child {margin-top: 15px;top: 100%;}
.the-tooltip.bottom > :last-child:after {margin-bottom: -1px;}
.the-tooltip.bottom > :last-child:after, .the-tooltip.bottom > :last-child:before {border-left-color: transparent !important;border-right-color: transparent !important;border-top-color: transparent !important;bottom: 100%;}
.the-tooltip.bottom > :last-child:before {margin-bottom: 0px;}
.the-tooltip.auto-width > :last-child {white-space: nowrap;width: auto}
.the-tooltip.full-width > :last-child {left: 0;margin-left: 0;width: 100%}
.comment_emo {max-width: 40px;max-height: 40px;vertical-align: middle}
.comment_emo_list .item{float:left;padding:0 10px 10px;text-align:center}
.comment_emo_list span{display:block;font-weight:bold;font-size:13px;letter-spacing:1px}

8- Lưu lại và xem kết quả nha:

» Mở rộng:

Các bước trên là chèn 18 emoticons với ký tự tắt theo phong cách Yahoo. Bạn hoàn toàn có thể thêm emoticons mới nữa và tự đặt ký tự tắt theo ý mình bằng cách chỉnh sửa code javascript ở bước 1 và bước 7.1.

Ký tự tắt nằm giữa 2 ký tự /

Với ký tự đặc biệt như [ ] { } \ / ( ) . ? + * ^ $ thì phải thêm \ trước nó.

Với ký tự < phải đổi thành <

Với ký tự > phải đổi thành >

Với ký tự & phải đổi thành &amp

Hình ảnh emoticons nằm trong thẻ img, thay đường dẫn đến ảnh tương ứng với ký tự tắt mà bạn đặt.

» Trích dẫn:

Lưu ý là với những ký tự tắt bao gồm của nhau như :)) và :) thì bạn phải đặt :)) lên trước :) nếu không chỉ ký tự ít hơn được hiện lên.

Nếu không muốn hiển thị những Nhận xét dung tục ta khai báo những ký tự đó và thay tương ứng không phải là thẻ img nữa mà là ký tự *** chẳng hạn.

Sau khi đã thành công với việc chèn emoticons vào khung Nhận xét bạn hoàn toàn có thể chèn emoticons vào khung Bài đăng hay khung Nhận xét mới bằng cách tạo một ID mới bao quanh khung Bài đăng hay khung Nhận xét mới và khai báo ID này trong javascript màu xanh ởbước 1 tương tự như khai báo ID emocomments (tên ID phải khác nhau).

Vì không thể chèn emoticons theo kiểu click do đó chúng ta chỉ nên sử dụng những ký tự tắt thông dụng để không gây khó khăn cho người đọc.

Cũng đừng nên tham lam chèn nhiều emoticons dẫn đến trình duyệt phải xử lý nhiều thông tin khiến blog tải chậm hơn.

Giờ thì khách thăm blog của bạn thoải mái Nhận xét với những emoticon ngộ nghĩnh cho dù họ có đang dùng trình duyệt bị giới web development ghét nhất mang tên IE 6.