Thứ Ba, 23 tháng 7, 2013

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

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/AVvXsEjPg1SEEORUMPf0TVZ0CXkagM4ViwRWxHZJLP_rk9T812zX3SzF5f2c1tyXjF1TekOW_0M2Us0K_LIxVdoXfy3ToMy0jHGHD3h-dIhgE1D_C7R3A55DJM-VX5DPbcDyfEsK5YZu3jrYXgc/'/>");
theText = theText.replace(/:\)\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc18CvmXBOizNUdl1pJmU7lVATQU8gTT9_hcUQnCIrXvAb9J_Bk-6XUSkVjgOKXicVsrpyNVmLmnyJnTG67UpRitAO_VWtZerCGxqYEKt4Xa4m5-eI22VvCT-IdvVSkpm6gG6FBVKTBvQ/'/>");
theText = theText.replace(/X-\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir5pMVbb-xPHFGtLkBQpOSnvncnb2Xo_4bT523j4E6SVj8DN-yF3aWeppeTof6g97KA479ET2WWdKHeVxMGcVHKm7qsTthD9I4YtAAVt3mKafgUvGAYVqN8vOhL1-hokHK37sS3nc9Ldk/'/>");
theText = theText.replace(/:\(\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghA1qBkZyqoel8fA1BKakpWKhfDM12kscH1E4nSHGYSpU8JPkKrjehwISkc-ZTvvSbeYo2M6qIWy5OG_qamvwVNCFyEbIbiu_hROu2ZmcnVV_gkS7Q0Hw8RqE1CsVCwAAEydwdGLJuTTc/'/>");
theText = theText.replace(/b-\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtjhOmtmm8BUkKy1Y3UeVXI4aLY4WG7tRj7VUNSXc4xM8sPMyXiHTjrQKCOKD0g36Ji2bnu3c3v-xSE4truAi4qK8UZzRJWJdIqJugFwmWujqdWNdy7C1nnV7lAoOoje-Pf6NWJL5sk5E/'/>");
theText = theText.replace(/=d&gt;/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXnxb-rlwrZhVFawHCjXwqsjYaXoBCU8Nu0hPAtaVQdflLWia7kevOdfNdslE7OBWlzt-cPMftSEQKHEZ_W857dk9HG8hcW2xRgozkAB_Z-o7NV8W27LeobdosF2gC2ksCTHDDNzCsFLY/'/>");
theText = theText.replace(/b-\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5R10RfdnDWq26_1Xe5uYGbGCpzRyZEYTLPBaGyL4uZQSNljYsKx2soQdQIZqSgweDEXR6zMxcggBXHmBvQYk76C6o1sfZ-w6mPK57f3Ml-1gu4t7griZfcGHwjulhC-qiMX7ucvVfjZM/'/>");
theText = theText.replace(/:D/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic7MmFIB_YPKaOMaC8ASQoJAF-oYSXQyrXTnGVNCv8MmtqFAGYYBQYOG0q_4E-Mt80nLUEpZ9V5QNr0yGeyJ_w39K-X5j_l3QBugHKQJr05ecQ0KagETrrSTuMI70OVGadrfEcABJHiY8/'/>");
theText = theText.replace(/:-\?/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghG-v-q2o3QWUUl6jIhH826gD4Rh1EPxyPCvyvfKCYR_DDv_0WknHCLuJGRtaE1ngHNl9by7vtgmom2jUcxd9My1QjQjILrmiL06simAtMhQ0EzH_wvHZgXdUUoH16YE2KKcTiprrjVg0/'/>");
theText = theText.replace(/:-&gt;/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd6C8mtZl5bQ3glEoqmMD7UAhuvHQUg-vU1KXZpRloOO7dDuUjf2K1ayj-Z8e8RTyj4DO1Nzi5QgBmIfXVRpn4ZNHYzTNR-1FrinIe-_nkOosIYLhvUyIz_wP7GYcuU3gPgxdw8cxQrh0/'/>");
theText = theText.replace(/:-o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXxWV6E8xVklup_xzo4Nzofl5J_159v6DiLGyS-FiLl_3ojIdipLmnIYdtz7TsFqQuNXwZ6-UevMUi3mCZdSCIlu8qymS-JcowK9o8WCFgRUIXTsoZclLlvnNRlX-MslVTvRR0FZSC_kE/'/>");
theText = theText.replace(/:\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5fAuybiFlwYhhpw5i6MXqQOMA4uXs8_J7zFrlCVn2pbdZDheRw7oFsoel1y0TfuKfsP3qiTuECPDv-oqZeYkn4vhVefhthFCjDxJBMZ2gCtUVR0GQiXrvg4vsJQY7TYz4tBm-MCN84Oo/'/>");
theText = theText.replace(/\[-\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZIbscrt8uHb9r400rMiyaeX7RLlnbsaDH0LYYbK_FAu3eIijYzajSVjDDE44mqIr2vV-1P_8T1-Rj4wkN-9Zypr7leLAfa10XoaPdjYE_9Z8-9ZM8Madwmf-TxH8IoSz-ysUuaU5PyxI/'/>");
theText = theText.replace(/@-\)/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6NroXsWR_KG9O25Hql5Bzi6XGl0MHZzIZmd8QkL0DgWahuCG9k-55Bd8apn_UJWIWp_tfqn4gkcW-e11WlVLlwc3t7r83_ykFcIJSAH1tlbyR90TrJUZ9mA3IHcDwJTmW69rLGnf7_A0/'/>");
theText = theText.replace(/:-s/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMRLSvj0jcdghas_w4MFwkUSW2nevP-JGbx5Ul5QrZXe9VnmdKCcSt6RsdGiQVY0MNVbwhVCMnfBd-BT2Bw92IT7VMKQCq2G6bCd0LdiSyg6d19-KnluwKcQZBDQ9TYDmQWKVE6Eg8gjg/'/>");
theText = theText.replace(/:\(/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieFbgVuUNX_63nmQqZ3HR0-iev4WoUXXC0_AYDlk5alnr44qSTMURj6K4b0TyPxO_bbbJhDFopxyA2Vk0g9w1ZQiPE9tIKHYA6pDQnu24XaOrBJTHKX_5w4Wrn9ni3RZrmm_KSDjGECsE/'/>");
theText = theText.replace(/:p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvRQS-P2I4BS1TOQOsAoZlRai0gt3qqSDSwsDtzWuSNjrjtStg9_JCfckaXl_AQ65rWuSkGr01od1lk-uj8328rC3afLlEFBwnVfMGkq2IjQi0cztthXtfri0M9CylQZyInKkqEqApPs/'/>");
theText = theText.replace(/:\*/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja2OD4KTLeY7oSSYVM_qfwVNXXXK4aj5Ixk_iTQbJQAWLglCqGx34poQ3XwlIgYpAqFG5zvUiKUru0hmb1X_li4RX0wYX-XwFRNWrDbXFriZLxbNAXpt36JpvcpeDHDbFx1on2XnJuWTE/'/>");
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/AVvXsEhc18CvmXBOizNUdl1pJmU7lVATQU8gTT9_hcUQnCIrXvAb9J_Bk-6XUSkVjgOKXicVsrpyNVmLmnyJnTG67UpRitAO_VWtZerCGxqYEKt4Xa4m5-eI22VvCT-IdvVSkpm6gG6FBVKTBvQ/'/><span> :))</span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghA1qBkZyqoel8fA1BKakpWKhfDM12kscH1E4nSHGYSpU8JPkKrjehwISkc-ZTvvSbeYo2M6qIWy5OG_qamvwVNCFyEbIbiu_hROu2ZmcnVV_gkS7Q0Hw8RqE1CsVCwAAEydwdGLJuTTc/'/><span> :((</span> </div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic7MmFIB_YPKaOMaC8ASQoJAF-oYSXQyrXTnGVNCv8MmtqFAGYYBQYOG0q_4E-Mt80nLUEpZ9V5QNr0yGeyJ_w39K-X5j_l3QBugHKQJr05ecQ0KagETrrSTuMI70OVGadrfEcABJHiY8/'/><span> :D </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieFbgVuUNX_63nmQqZ3HR0-iev4WoUXXC0_AYDlk5alnr44qSTMURj6K4b0TyPxO_bbbJhDFopxyA2Vk0g9w1ZQiPE9tIKHYA6pDQnu24XaOrBJTHKX_5w4Wrn9ni3RZrmm_KSDjGECsE/'/><span> :( </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPg1SEEORUMPf0TVZ0CXkagM4ViwRWxHZJLP_rk9T812zX3SzF5f2c1tyXjF1TekOW_0M2Us0K_LIxVdoXfy3ToMy0jHGHD3h-dIhgE1D_C7R3A55DJM-VX5DPbcDyfEsK5YZu3jrYXgc/'/><span> =)) </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtjhOmtmm8BUkKy1Y3UeVXI4aLY4WG7tRj7VUNSXc4xM8sPMyXiHTjrQKCOKD0g36Ji2bnu3c3v-xSE4truAi4qK8UZzRJWJdIqJugFwmWujqdWNdy7C1nnV7lAoOoje-Pf6NWJL5sk5E/'/><span> b-( </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5fAuybiFlwYhhpw5i6MXqQOMA4uXs8_J7zFrlCVn2pbdZDheRw7oFsoel1y0TfuKfsP3qiTuECPDv-oqZeYkn4vhVefhthFCjDxJBMZ2gCtUVR0GQiXrvg4vsJQY7TYz4tBm-MCN84Oo/'/><span> :) </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvRQS-P2I4BS1TOQOsAoZlRai0gt3qqSDSwsDtzWuSNjrjtStg9_JCfckaXl_AQ65rWuSkGr01od1lk-uj8328rC3afLlEFBwnVfMGkq2IjQi0cztthXtfri0M9CylQZyInKkqEqApPs/'/><span> :P </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXxWV6E8xVklup_xzo4Nzofl5J_159v6DiLGyS-FiLl_3ojIdipLmnIYdtz7TsFqQuNXwZ6-UevMUi3mCZdSCIlu8qymS-JcowK9o8WCFgRUIXTsoZclLlvnNRlX-MslVTvRR0FZSC_kE/'/><span> :-o </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja2OD4KTLeY7oSSYVM_qfwVNXXXK4aj5Ixk_iTQbJQAWLglCqGx34poQ3XwlIgYpAqFG5zvUiKUru0hmb1X_li4RX0wYX-XwFRNWrDbXFriZLxbNAXpt36JpvcpeDHDbFx1on2XnJuWTE/'/><span> :* </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMRLSvj0jcdghas_w4MFwkUSW2nevP-JGbx5Ul5QrZXe9VnmdKCcSt6RsdGiQVY0MNVbwhVCMnfBd-BT2Bw92IT7VMKQCq2G6bCd0LdiSyg6d19-KnluwKcQZBDQ9TYDmQWKVE6Eg8gjg/'/><span> :-s </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZIbscrt8uHb9r400rMiyaeX7RLlnbsaDH0LYYbK_FAu3eIijYzajSVjDDE44mqIr2vV-1P_8T1-Rj4wkN-9Zypr7leLAfa10XoaPdjYE_9Z8-9ZM8Madwmf-TxH8IoSz-ysUuaU5PyxI/'/><span> [-( </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6NroXsWR_KG9O25Hql5Bzi6XGl0MHZzIZmd8QkL0DgWahuCG9k-55Bd8apn_UJWIWp_tfqn4gkcW-e11WlVLlwc3t7r83_ykFcIJSAH1tlbyR90TrJUZ9mA3IHcDwJTmW69rLGnf7_A0/'/><span> @-) </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXnxb-rlwrZhVFawHCjXwqsjYaXoBCU8Nu0hPAtaVQdflLWia7kevOdfNdslE7OBWlzt-cPMftSEQKHEZ_W857dk9HG8hcW2xRgozkAB_Z-o7NV8W27LeobdosF2gC2ksCTHDDNzCsFLY/'/><span> =d&gt; </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5R10RfdnDWq26_1Xe5uYGbGCpzRyZEYTLPBaGyL4uZQSNljYsKx2soQdQIZqSgweDEXR6zMxcggBXHmBvQYk76C6o1sfZ-w6mPK57f3Ml-1gu4t7griZfcGHwjulhC-qiMX7ucvVfjZM/'/><span> b-) </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghG-v-q2o3QWUUl6jIhH826gD4Rh1EPxyPCvyvfKCYR_DDv_0WknHCLuJGRtaE1ngHNl9by7vtgmom2jUcxd9My1QjQjILrmiL06simAtMhQ0EzH_wvHZgXdUUoH16YE2KKcTiprrjVg0/'/><span> :-? </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd6C8mtZl5bQ3glEoqmMD7UAhuvHQUg-vU1KXZpRloOO7dDuUjf2K1ayj-Z8e8RTyj4DO1Nzi5QgBmIfXVRpn4ZNHYzTNR-1FrinIe-_nkOosIYLhvUyIz_wP7GYcuU3gPgxdw8cxQrh0/'/><span> :-&gt; </span></div>
<div class='item'><img class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir5pMVbb-xPHFGtLkBQpOSnvncnb2Xo_4bT523j4E6SVj8DN-yF3aWeppeTof6g97KA479ET2WWdKHeVxMGcVHKm7qsTthD9I4YtAAVt3mKafgUvGAYVqN8vOhL1-hokHK37sS3nc9Ldk/'/><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 &lt;
Với ký tự > phải đổi thành &gt;
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.
Với threadc omment của blogger thì khung này chỉ hiển thị khi bài viết có ít nhất 1 comment nha.

» Dưới đây là một số hình bạn có thể xem và chọn nếu thích:

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay Bạn nhập từ: hihihi Bạn nhập từ: antap Bạn nhập từ: chemgio Bạn nhập từ: nhinne Bạn nhập từ: battay Bạn nhập từ: dda Bạn nhập từ: moneymoney Bạn nhập từ: moison Bạn nhập từ: lacdau Bạn nhập từ: uauaua Bạn nhập từ: tatbop Bạn nhập từ: aloalo Bạn nhập từ: chuichui Bạn nhập từ: dotlua Bạn nhập từ: loveyou Bạn nhập từ: dmohoi Bạn nhập từ: danhrang Bạn nhập từ: bichoang Bạn nhập từ: cdv Bạn nhập từ: cunghi Bạn nhập từ: anhtrangBạn nhập từ: nuocmui Bạn nhập từ: vuivewa Bạn nhập từ: liem Bạn nhập từ: suytu Bạn nhập từ: chaomay Bạn nhập từ: hongthem Bạn nhập từ: yeahyou Bạn nhập từ: votulu Bạn nhập từ: muonchetah Bạn nhập từ: huhune Bạn nhập từ: bucroinhe Bạn nhập từ: honcaine Bạn nhập từ: chucmungnammoi Bạn nhập từ: chaoban Bạn nhập từ: toiuocgi Bạn nhập từ: yessirl Bạn nhập từ: khocwatroi Bạn nhập từ: tambiet Bạn nhập từ: huhuhu Bạn nhập từ: dabong Bạn nhập từ: dungdung Bạn nhập từ: lonmeo Bạn nhập từ: hutthuoc Bạn nhập từ: lovelovelove Bạn nhập từ: tungkinh Bạn nhập từ: happy-new-year Bạn nhập từ: kemne

                                                                      
                                                               Nguồn: http://namkna.blogspot.com

Không có nhận xét nào:

Đăng nhận xét

Bài đăng phổ biến