Chèn Emoticons giống http://noct-land.blogspot.com thì làm cách nào được bác
Chèn code hiển thị mặt cười cho blog
Bước 1: Đăng nhập vào bloger → Mẫu → Chỉnh sửa HTMLBước 2: Mở rộng mẫu tiện ích
Bước 3: Dán code bên dưới trước thẻ </body>
<script type='text/javascript'>Bước 4: Đối với những blog sử dụng thread comment của blogger thì tìm code sau
//<![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/AVvXsEjwR0BasGZDW9iRXKtfAmM_ufa46qE7AHRWZ6i3rqAsF7Dd2vHemkTxHmN0iwrZq_Slm52Bb3LUZP9pnTHb7YQiIo3KqRZ1l3FEStAGYYr1hZmtX0wx1-EfjB5yYuDSkHkSasAjh6U8Oisw/s1600/sexy_girl.gif'/>");
theText = theText.replace(/:\)\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKcrSIWAs8R1Rdp_Bpf5ViUSID-s4UfU80KNHRh6LwNuureVFnutsTqR0c7U1jiZ7voEvdrmIjxkF6QZrRqei5msmpx3giGQN7VAYs5KfCFCb2St9IgRmB9ExEComj7wkmvDgfvBw-cA-d/s1600/haha.gif'/>");
theText = theText.replace(/X-\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGlvHUN0QkOSEpiryd8b6pb3QaD3IN4EfSLhl0UZDFLwHoR8xFr-xMXM-EewPTYBUoXZYnmAAqSiJ4oQeq0T8fuuc4IkKe-5DXEvZD6cbLtu-iXnd0x_Q7l_qB9jvqMhouytMXJAZAaeXw/s1600/angry.gif'/>");
theText = theText.replace(/:\(\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkzF6GStSK1nj1B3KPv5A2Wsl1Z9767ZFgcsk948QWJTn4yOJD7YA30hdi3G9N-RlL4X_7mniKhbIARsnPGtdUtZiiSjgHxCbmfM2Govnxh-VmykH-0tDg8G017R2l5-K3Pc1kQkOkOeUt/s1600/too_sad.gif'/>");
theText = theText.replace(/b-\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI2Lh2ZWVFc7oLdzmAcg40taKrAcQjPiPL29-RMUYBUZq6qPC7WPKGdMAzmQzcMK-vEHA-1DHT40H7mrQ1gjgQF1DyFr328rJzh7Sten-O7ttYlgmj6LxRpAz76P0UwYlJnfY7NDGw9bor/s1600/beat_brick.gif'/>");
theText = theText.replace(/=d>/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglGsvqknWRTA96JzUK5K-DCZ5ZCutGB3-WxypI814JIiedAwMLwzS7X0S3969uIqADVDJ76c9FrsD8YfDRp568Ee365VKjp3KASgpdj6sbLqd76MCgIrrlP4DQ5OU599ug6CzFNvkDqPL2/s1600/beauty.gif'/>");
theText = theText.replace(/b-\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqb2bwrBsFHsXQKkCv89XqqrHK7VVyAqfvU_Kp5FLtFBra9dBjXX4_D1bqWgBDzQHiy0JHtPA7hjEoxi4fT9zzfaVL9L3w-RUM8cXuObhzkxuLACxr8ZEooQHLizrfEn4gVXwdbjXGkhVZ/s1600/boss.gif'/>");
theText = theText.replace(/:D/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlOF7Mqntcaz8GA8EHU-wARp9iilgEg2OYGEsDZU49oW_oJHynqNvysPj8LyCVcIW1e56dUIG-sjmmanuE66kpUtdx4ZD0Vl7283aU08FV5NB-wNS_iT1R6sQ-ZrhJvxCGz6536ngC3xWi/s1600/big_smile.gif'/>");
theText = theText.replace(/:-\?/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTZiIbpcWbBsIEA6yZBBn49NjzMzPMHwvmgWKENrnKeKRcDM1tL1z8PiT4tZoK5yjgC4tVKpdDtPp22McFiEQTaiJMW1FiWY3jSrmi22tr_aAeSZt109RJNAIY8-Jv0k4F71mOHM_TXdGg/s1600/doubt.gif'/>");
theText = theText.replace(/:->/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibMit0P-ZnLlPjC3zdwEOlmw6jJbwPbVb_OWaIawQf7mrAGvTSeV-G56SQaXAcsZqGnx3kga_v00YIpWtFi5eXchQ-otmjMneAozz1VlMz_AkFRZuHdlfGEsASgNbcHtm56GQAFDr5FaT9/s1600/look_down.gif'/>");
theText = theText.replace(/:-o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2wcu7UkMduw8xm1ht_EJk0gp7_BI2JhxAbZ0_8P7YD_oBA8GOVASfOo84__iaspI68WsaK93EUm6oJ-uz8K20jLB9EOR5q8R5f2oIGjfRln3Tr7E18DL1SPI7ouZ1NzI2BBIknKt6usiV/s1600/oh.gif'/>");
theText = theText.replace(/:\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAbbkOcNukk1flhvh9msAFwRGU4bvV64CDOfSBCyhqi7Cp33jnHXdrvoyXXnOuHTYqyDnW0fffb7DQebVmQ79cyf-E1ebFP3flw1SS5JbXuemf9fzD4KbAk5ARWbheiZtDsGdTTAmEypd8/s1600/smile.gif'/>");
theText = theText.replace(/\[-\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV6FETCvNa-c8dqtkfcnDTjmSbfgiYfBzJVwgN699hRnmj2Y3iX5ZgMz2MRpZ9nk5MYrOOtIibFWCPy-7a__b4FmX40q79xKWe2NYBobAVgIbwgM8YSWgBgXhFCKJN9WCNMU1zz1aIQdBz/s1600/nosebleed.gif'/>");
theText = theText.replace(/@-\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBZho-q_joAcOmiEBwk6p0kglmT31mzJQNwveNuUBiIjqQ47S9DfF0Qoq4RBOOWirbCyuezK-JNaaBlaGTdeRs2LBN7xsGw5TshvwJaxSpB97WcszUS_s9yDEl43QB_TiEvFnUYqcwmkFA/s1600/ops.gif'/>");
theText = theText.replace(/:-s/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZQkvoBqJXPjPOZmvH6OgYh8Nfo1kxhkEBjDXbXbJecwF6v92anHZpalWcCImevPmCJhNBWudV6zjLAjTGsQ6a87f11YTY9BOi4en-iDHLa_xlLL1-pkAmsKdEp5CSuxVDhDQhCBmiGwS/s1600/pudency.gif'/>");
theText = theText.replace(/:\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFS22u4cSrgJ9UiaQi_5USbqd2DVOk3tpEJBoKcGxknYieLmtpD6y8UVs7UGwASJvTHNbHmsKIpOkpK67H9ruFxd5GYPPM-bWvMX-H8QhzLB2uBYev023P6p6scLryCxFAOva-u3IcuTsh/s1600/sad.gif'/>");
theText = theText.replace(/:p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhTaBfVq0vhyAzPzDmynS19JKbhZGWJstNZr73sNuSAhgw3UChu3k47eB1Mabqk6AS5BucbOPgBugtt32nFVJPjYAf839-2aa9jCuc0K6IFU1LHBvn6KfYasveXnysS6WjxmBQ5oxbcAIm/s1600/still_dreaming.gif'/>");
theText = theText.replace(/:\*/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdpTF8dWiUF2ac6z20tUd22ti5NfRURH7qoVS88D4conUhXbwwejjLvZ7Uue6c9D7JPvvlQq5vbn-bBviSDGHpQWRYM8DXqJQj2ljhCJL2axdcvWybq7J2xKt_S1_iRq-KyNyP9_Gv3KZt/s1600/sweet_kiss.gif'/>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
bodyText = document.getElementById("emocomments");Và thay thế bằng
bodyText = document.getElementById("comment-holder");Bước 5: Thêm thẻ bên dưới vào trước đoạn <b:loop values='data:post.comments' var='comment'> trong template của bạn
<div id='emocomments'>Tìm thẻ đóng </b:loop> của đoạn code trên và thêm code bên dưới vào sau nó
</div>Sau khi thêm 2 đoạn code trên ta sẽ có như sau
Hiển thị ký tự và mặt cười tương ứng trên blog
Bước 1: Tìm <data:blogTeamBlogMessage/> và dán ngay sau đoạn code cuối cùng bạn tìm được trong template đoạn code sau:<h2 class='the-tooltip top left emo'>Bước 2: Dán đoạn code bên dưới trước thẻ ]]></b:skin>
Chèn Emoticons
<div class='comment_emo_list'>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKcrSIWAs8R1Rdp_Bpf5ViUSID-s4UfU80KNHRh6LwNuureVFnutsTqR0c7U1jiZ7voEvdrmIjxkF6QZrRqei5msmpx3giGQN7VAYs5KfCFCb2St9IgRmB9ExEComj7wkmvDgfvBw-cA-d/s1600/haha.gif'/><span> :))</span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkzF6GStSK1nj1B3KPv5A2Wsl1Z9767ZFgcsk948QWJTn4yOJD7YA30hdi3G9N-RlL4X_7mniKhbIARsnPGtdUtZiiSjgHxCbmfM2Govnxh-VmykH-0tDg8G017R2l5-K3Pc1kQkOkOeUt/s1600/too_sad.gif'/><span> :((</span> </div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlOF7Mqntcaz8GA8EHU-wARp9iilgEg2OYGEsDZU49oW_oJHynqNvysPj8LyCVcIW1e56dUIG-sjmmanuE66kpUtdx4ZD0Vl7283aU08FV5NB-wNS_iT1R6sQ-ZrhJvxCGz6536ngC3xWi/s1600/big_smile.gif'/><span> :D </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFS22u4cSrgJ9UiaQi_5USbqd2DVOk3tpEJBoKcGxknYieLmtpD6y8UVs7UGwASJvTHNbHmsKIpOkpK67H9ruFxd5GYPPM-bWvMX-H8QhzLB2uBYev023P6p6scLryCxFAOva-u3IcuTsh/s1600/sad.gif'/><span> :( </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwR0BasGZDW9iRXKtfAmM_ufa46qE7AHRWZ6i3rqAsF7Dd2vHemkTxHmN0iwrZq_Slm52Bb3LUZP9pnTHb7YQiIo3KqRZ1l3FEStAGYYr1hZmtX0wx1-EfjB5yYuDSkHkSasAjh6U8Oisw/s1600/sexy_girl.gif'/><span> =)) </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI2Lh2ZWVFc7oLdzmAcg40taKrAcQjPiPL29-RMUYBUZq6qPC7WPKGdMAzmQzcMK-vEHA-1DHT40H7mrQ1gjgQF1DyFr328rJzh7Sten-O7ttYlgmj6LxRpAz76P0UwYlJnfY7NDGw9bor/s1600/beat_brick.gif'/><span> b-( </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAbbkOcNukk1flhvh9msAFwRGU4bvV64CDOfSBCyhqi7Cp33jnHXdrvoyXXnOuHTYqyDnW0fffb7DQebVmQ79cyf-E1ebFP3flw1SS5JbXuemf9fzD4KbAk5ARWbheiZtDsGdTTAmEypd8/s1600/smile.gif'/><span> :) </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhTaBfVq0vhyAzPzDmynS19JKbhZGWJstNZr73sNuSAhgw3UChu3k47eB1Mabqk6AS5BucbOPgBugtt32nFVJPjYAf839-2aa9jCuc0K6IFU1LHBvn6KfYasveXnysS6WjxmBQ5oxbcAIm/s1600/still_dreaming.gif'/><span> :P </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2wcu7UkMduw8xm1ht_EJk0gp7_BI2JhxAbZ0_8P7YD_oBA8GOVASfOo84__iaspI68WsaK93EUm6oJ-uz8K20jLB9EOR5q8R5f2oIGjfRln3Tr7E18DL1SPI7ouZ1NzI2BBIknKt6usiV/s1600/oh.gif'/><span> :-o </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdpTF8dWiUF2ac6z20tUd22ti5NfRURH7qoVS88D4conUhXbwwejjLvZ7Uue6c9D7JPvvlQq5vbn-bBviSDGHpQWRYM8DXqJQj2ljhCJL2axdcvWybq7J2xKt_S1_iRq-KyNyP9_Gv3KZt/s1600/sweet_kiss.gif'/><span> :* </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZQkvoBqJXPjPOZmvH6OgYh8Nfo1kxhkEBjDXbXbJecwF6v92anHZpalWcCImevPmCJhNBWudV6zjLAjTGsQ6a87f11YTY9BOi4en-iDHLa_xlLL1-pkAmsKdEp5CSuxVDhDQhCBmiGwS/s1600/pudency.gif'/><span> :-s </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV6FETCvNa-c8dqtkfcnDTjmSbfgiYfBzJVwgN699hRnmj2Y3iX5ZgMz2MRpZ9nk5MYrOOtIibFWCPy-7a__b4FmX40q79xKWe2NYBobAVgIbwgM8YSWgBgXhFCKJN9WCNMU1zz1aIQdBz/s1600/nosebleed.gif'/><span> [-( </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBZho-q_joAcOmiEBwk6p0kglmT31mzJQNwveNuUBiIjqQ47S9DfF0Qoq4RBOOWirbCyuezK-JNaaBlaGTdeRs2LBN7xsGw5TshvwJaxSpB97WcszUS_s9yDEl43QB_TiEvFnUYqcwmkFA/s1600/ops.gif'/><span> @-) </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglGsvqknWRTA96JzUK5K-DCZ5ZCutGB3-WxypI814JIiedAwMLwzS7X0S3969uIqADVDJ76c9FrsD8YfDRp568Ee365VKjp3KASgpdj6sbLqd76MCgIrrlP4DQ5OU599ug6CzFNvkDqPL2/s1600/beauty.gif'/><span> =d> </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqb2bwrBsFHsXQKkCv89XqqrHK7VVyAqfvU_Kp5FLtFBra9dBjXX4_D1bqWgBDzQHiy0JHtPA7hjEoxi4fT9zzfaVL9L3w-RUM8cXuObhzkxuLACxr8ZEooQHLizrfEn4gVXwdbjXGkhVZ/s1600/boss.gif'/><span> b-) </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTZiIbpcWbBsIEA6yZBBn49NjzMzPMHwvmgWKENrnKeKRcDM1tL1z8PiT4tZoK5yjgC4tVKpdDtPp22McFiEQTaiJMW1FiWY3jSrmi22tr_aAeSZt109RJNAIY8-Jv0k4F71mOHM_TXdGg/s1600/doubt.gif'/><span> :-? </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibMit0P-ZnLlPjC3zdwEOlmw6jJbwPbVb_OWaIawQf7mrAGvTSeV-G56SQaXAcsZqGnx3kga_v00YIpWtFi5eXchQ-otmjMneAozz1VlMz_AkFRZuHdlfGEsASgNbcHtm56GQAFDr5FaT9/s1600/look_down.gif'/><span> :-> </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGlvHUN0QkOSEpiryd8b6pb3QaD3IN4EfSLhl0UZDFLwHoR8xFr-xMXM-EewPTYBUoXZYnmAAqSiJ4oQeq0T8fuuc4IkKe-5DXEvZD6cbLtu-iXnd0x_Q7l_qB9jvqMhouytMXJAZAaeXw/s1600/angry.gif'/><span> X-( </span></div>
</div>
</h2>
.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}
- Do cấu trúc mỗi template một khác nên cách thực hiện có thể khác nhau một chút nên trước khi thực hiện nhớ lưu lại template và trong quá trính thực hiện hãy tùy biến một chút cho phù hợp
- Nhược điểm của bộ mặt cười này là chỉ hiển thị khi đã có 1 comment, mình sẽ tìm cách khắc phục sau
