Hiển thị các bài đăng có nhãn Emoticons. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Emoticons. Hiển thị tất cả bài đăng

Cài đặt bộ chèn Emoticons cho hệ thống nhận xét phân cấp

Người đăng: ngaybennhau on Chủ Nhật, 18 tháng 9, 2011

Được biết, hiện nay với sự phố biến của hệ thống nhận xét phân cấp qua đó người nhận xét khi trả lời một ý kiến của một người nào đó thì thường nhấn vào nút Trả lời/Reply để viết nhận xét qua cửa sổ popup, lúc này việc chèn biểu tượng cảm xúc vào nhận xét sẽ gặp khó khăn. Giải pháp cho vấn đề này là tạo bộ biểu tượng cảm xúc trực tiếp trong hệ thống nhận xét popup.

Hẳn bạn cũng từng biết về addon Greasemonkey giúp thêm bộ chèn biểu tượng cảm xúc trực tiếp vào công cụ đăng bài viết (Post Editor) của Blogspot. Kịch bản này chỉ hoạt động trên trình duyệt FireFox. Thật may là sau một quá trình nguyên cứu, mình đã áp dụng thành công phương pháp này đối với hệ thống nhận xét popup. Cách thức thực hiện là viết một kịch bản tạo chức năng chèn các thẻ <b></b> (in đậm), <i></i> (in nghiêng), <a></a> (liên kết) và một bộ biểu tượng cảm xúc (ở đây mình tạo bộ 25 Zing Emoticons) sau đó upload kịch bản lên trang tài nguyên userscript.org. Để cài đặt tiện ích này, người dùng cần sử dụng trình duyệt FireFox tải addon Greasemonkey rồi cài đặt. Trước tiên đến trang Greasemonkey, nhấn nút Add to Firefox để tải về cài đặt tiện ích này.


Sau đó khởi động lại (restart) trình duyệt, tiếp tục tải Emoticons Script về, nhấn Install để script tự động cài đặt vào FireFox.


Sau đó mở hệ thống nhận xét popup bạn sẽ thấy bộ biểu tượng cảm xúc sẽ xuất hiện trong phần Comments Form. Mỗi khi cần chèn biểu tượng hoặc các thẻ HTML, bạn chỉ việc click vào nó là xong.

Tuy nhiên để các biểu tượng cảm xúc hiển thị trên phần nhận xét (không phải dạng Popup) thì bạn phải cài đặt chức năng biểu tượng cảm xúc, bằng cách đặt đoạn code sau đây vào trước thẻ </body>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
//Emoticons for Blogger Comments || Author: Huynh Nhat Ha || http://huynh-nhat-ha.blogspot.com || © Copyright 2010
function emoticonBloggerHuynhNhatHa() {

if(!document.getElementById) {return;} // no support

bodyText = document.getElementById('comments-block');

theText = bodyText.innerHTML;
theText = theText.replace(/:1/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtJ2lXSN1RcNZEpWH1Y6bJfyzTbN03LpKLFK2th8Eo6Pn5Ekf4BHu6Gt1PBMhdYQARD0v3B0yVpTdpuVDpq4JUMcAghq4It8WMp2lwPy1M5JJu0yUw4N3Dzw1Xrs97mvgQioinV7gC1eTk/s1600/49.gif" />');
theText = theText.replace(/:2/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4GnAXM6aw1GM3nm-0xspzX-1MqpNf-5wX4_HIrdmY4cT2avfXllRPFBlr9c3NUfuh6GjbKiMNh6Mg4E6dMWVu2q9NCJydkuCLrobM1zbOn-8VpmK0iZ40IgMIZaNRRblpKoimZrdJqv2D/s1600/102.gif" />');
theText = theText.replace(/:3/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM-7MaWHdbvIPn87km6OJcMp5qEFzhqtFlQQtFYVG4XWI1M4rqJHIr_NoH_SRYGXL-O5Gn2V5IhPnNTJvUG8-1RLyZlIHP0OOVMvnd83byCF354uESRyVeTOjDjqGNjBigfOBCWi_D2JvE/s1600/113.gif" />');
theText = theText.replace(/:4/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8SQlkveTjo5WggY-gIGP55U1ZAU3crXHOxppO7I4ywFFN3bRAoUxQ-moTkQbtphpdMy7tXP6NPwIezj0tqdjjD3bghmVWFDUHtfYCTcFagTSGrnKolZG6TX5xWQoeagsHsd1qUwQKPH5e/s1600/93.gif" />');
theText = theText.replace(/:5/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibP8yaEZmXv99QULgh6JaeQsjBYzTbiMwLbdCvd3Eh-Mw2C2xoGOQcB1BQonQuLkWzcrHZiV9AOoHMujUkmecv4lG_OAqmcM0V4s6ANefdFA7YcbFC0nNVY8Gbb8e2X8UG3o1-L-soQKNn/s1600/61.gif" />');
theText = theText.replace(/:6/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid7keUSVdV0sIKf9Gedu6anUbGRftb-3G6BbokaBr2FS4RgtW_aPSgH9YvZnXKS-Z01BSkk3HEa3rBCXWzu507qYHyiUfl_3O70wSq7UooUIMWAHf-fLyIK7CJvcsH-yucrcg9qcnpqJE5/s1600/134.gif" />');
theText = theText.replace(/:7/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQfTZsHqkYy0wHbai7sQ7DNyVkOySraELAyG2meSKuWHY748uW9TDy53By8sYLxBxlYm0HzE8jx9LoCnTzpj7RvkPUjarOrnWr-KsvwP9MMTl4Pq57d4xqtjMLkvnOR68wdkp_JqDj4pQ-/s1600/39.gif" />');
theText = theText.replace(/:8/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKaCyfdu3GRMszOX7jD-kO8I20dz8A-L3wGjRebEj_Vh10oz1g4KYnimmDEeP3GLJRdx3N05whyphenhyphenOUSsvbuOTJxWllSMkGyFhj-_-yCT9blk_Ee3O1dvbAI7pPtdkUnS36Sa2oKMScF-oKl/s1600/106.gif" />');
theText = theText.replace(/:9/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqu574JIzz8XVXaF4JnoQLasgE6vce1XnCp935OJF3Z22FB6zjqHlT4cAvrY-sEIWwsCr1KgGohCB-jgACJwE6XkqvpUBUgZauxCtRGgjSFSFrl4MbXHWW3qrBPMUtznkQOWGN90CX7MIt/s1600/43.gif" />');
theText = theText.replace(/:A/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvej1cNmQ4D0lv_es8oH8jeihB4DiQzas1evFK2_xm4U4Gx9MlyG40AoKprXtWpTOLxOeKfhxLvpP_AiEYEyE9-RkPh_r_9I2Vv7W9xvVGvozq62BYhNoC_ba0tdUi-M9fzQrEf_Qb76UV/s1600/111.gif" />');
theText = theText.replace(/:B/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0qnwBVd61XlLuo7SFFb9dPdZAjKOV5wCI2vSYuGXYjWDJyD45XUK_E8InGuJkHiL5myIoXO8SSjF03vFMJ0oJtfZmagxVKMpXIManbSHP6gLTDNHIJlrqMtyIadPGkp_JeIxv8nLB-zti/s1600/48.gif" />');
theText = theText.replace(/:C/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUEfIWM7qv7RedrVz4Xe1UWvtvmOgmO2rhV9uNRDa9E-dp1GtV-qkW4jzNNBCoYM7VNHcb_K2Qmz0fT2rLPGuO5KzjW4g4Lpaw5HjA-3OPKDVjBjq7g5ZWFIqLKeQWjtnmfDS8geBgeiDX/s1600/54.gif" />');
theText = theText.replace(/:D/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFqTkQSV50hibCk2909er1JZVpJcaEHwQgYuHbdWG-55YdNudO15hPTg3aKP-GuGs2ra_ltKchgCvvKvQSTXPOyn2EvwNZWnZ-65GxAgLWWs9szSn_N-GATb_JQVY4ll8p4jHEE0WEK7O3/s1600/63.gif" />');
theText = theText.replace(/:E/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs__bNm7YWTZDsECcL0M-ghCANpZur2tnqYv_lU2PBgj3mS8L7VcXFTTOw46LJ3HhDKFwbiKuamu9qpvQnOgUd1C8NVpoWPuwJBzhi93D1JSOuMxuB6smVIuS8KMyTQ6m2x1MVQWSm7eve/s1600/100.gif" />');
theText = theText.replace(/:F/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ2BwywMXUy3NHOtOWf8-EUuZX_zWiQ_111zsTOmi5PFMNUX9KrcR3lzUnLRLCecmy3paDp70kAisylZgCnXSnzEeypl-0wCshly3ltoq9Rtszajx0FTWODYsJ7utNnYBLhghnh5FN0hDa/s1600/45.gif" />');
theText = theText.replace(/:G/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpnswn0MQuSr71mlkOM9USPrtPTrG-t-VDzUPeBqnv2SeaGwhbaXH1-S-28vFZrVixk6uUuqsIeffL5r-vdifjneyZxc1c_bLtyCBrd5OK8uDjDtHqMS4iQznOZ8OA2WVtHecrf3iq-N9t/s1600/77.gif" />');
theText = theText.replace(/:H/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmm8YM1NoUqcbmX3VG128gfgzPMFL8ynma5-EF2ziZreEWBx1xbCEEfwk0m_rgqUsI2rajAIVpPeygcSKrGJgxtzTzvOAl-ZkDm0orhbxz2RiylHZpFhImxYvBLe-C0Z_j1RmguoBLCPHQ/s1600/86.gif" />');
theText = theText.replace(/:I/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTgfK3VxJLLiB9kebC83-l_wzQJaN9xiwKyZQoTGUlkENkDmZ5l__CLC-CvR3PVoR462m3Ik4oi9nzQHRVpOLzhZLAbJ11f0gIZPKrW7gXZzG2OnX34f3KeWVn4oOJmMp85p96IOVe4rS9/s1600/94.gif" />');
theText = theText.replace(/:J/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFDS-AE_aChwEwFaZBkW4wUADjHdp4v2LqVRe4ygF1PRkwJPUP5IH03QOfSvMXJPAspXXRHSmLl-J20Jd8BN03vTbvCJ4cXaMYYBVjpRo_KxXVLbisrfW97xF54dkS1pwDPbWKaICs50dY/s1600/83.gif" />');
theText = theText.replace(/:K/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC_fZa8LR4Aglhdozqe2rL7UGlBSBN55cuCFDuw7KyxhEWvCBWUXcKbeu6SztXsJs991uxxxUACu1stjOHHGE0Wqc0ZsIWzOTdtZQnOpTsOV1MhpKn0nxqkZiZtfPX5XDvYimoqp-xQA4D/s1600/59.gif" />');
theText = theText.replace(/:L/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnbJ9YwU2QBfUsCivCLgbW6hY2nfV_9xlouwGp5P6pTNyxAc_9KJOxGBpGO2CwjuBod8Y2sMWfaAUMvF4Quucn6GlPclMyLYnj3wmcz2w1JbPiGSLDkLPgiB2c4VgzOeandPKPtR783piA/s1600/soldierbaby.gif" />');
theText = theText.replace(/:M/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiByG95tNxh6wpyKnSsGelJh31EvcrNAg0fR6J2yf1tlOy5nq9eydJE7LOPWuwak9KAaunxHPQDe3FnwKZ65YnsrphJ756-vaBIYURhnaoxhWLQS7U9vyy9y22WVCilLOazO9FZgs6fjCbP/s1600/alo.gif" />');
theText = theText.replace(/:N/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQL6g3XBOsS_6TaAg0J537pJZXXQf4GNa92HvX43vdYyFEqbgTkTIihyEfByoYHqtEO2O9z6KkhokGJcE49fzFGZ8hSwCM60DgTzgbWIesQ1SZIFNn0xdSQrBM79_YkiKUA5Vg9Ccsccg6/s1600/shutup.gif" />');
theText = theText.replace(/:O/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1GgH6BadUEy9Q8BIu8nMvxVJhnASRabRpM-TbHbx00ezy541dfXbBjJUgEsh1XcDBkXjB-y-rpNdjWfz8zORqI01fb-0rJqO-M03zsseo-CmJYNmyZjZT2xuRJ9PjCUoNvgBONm7ZUEs_/s1600/yeulam.gif" />');
theText = theText.replace(/:P/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtnmW58XufSW8CMx6orr2B1WD6ZE50lyMOc2DSdVeeBraA4aiM2qqzbFU1BjQf6U9ng8dPf_LbiulPRjB1bfqZfmVuU-fEx6Agvkq9qxRDECCI4rmaDQAQL4rYUUt0hb3ldlVliolpjx1u/s1600/datbomb.gif" />');

bodyText.innerHTML = theText;}
//]]>
</script>
<script type='text/javascript'>
emoticonBloggerHuynhNhatHa();
</script>
</b:if>


  1. Chú ý


    • 1 Để chức năng biểu tượng cảm xúc hoạt động trong phần nhận xét thì bạn phải thay đổi ID comments-block cho phù hợp. ID này nằm trong một thẻ chỉ định thành phần chứa các dữ liệu của nhận xét, thẻ này thường nằm ngay trước dòng <b:loop values='data:post.comments' var='comment'>. Tùy theo cách đặt tên của người thiết kế Template mà id này có thể có tên khác nhau ví dụ: comments-block, comments-block3, comments_block, cm_block, commentsblock …

    • 2 Sau khi cài đặt thủ thuật này, bạn cần cập nhật lại thủ thuật Chèn biểu tượng cảm xúc vào nhận xét dạng input để tạo sự thống nhất.
More about

Chèn biểu tượng cảm xúc vào nhận xét dạng input

Người đăng: ngaybennhau on Thứ Bảy, 17 tháng 9, 2011

Chắc hẳn bạn cũng biết rằng hệ thống nhận xét của Blogspot có phần khung viết nhận xét (Comments Form and Editor) dưới dạng nhúng từ bên ngoài qua thẻ iframe do đó chúng ta không thể chèn biểu tượng cảm xúc (Emoticons) vào nhận xét bằng phương pháp input như Wordpress. Để giải quyết vấn đề này, chỉ có một cách là tạo khung nhận xét riêng theo kiểu Wordpress cho Blogspot. Tuy nhiên tạm thời mình chưa tìm ra giải pháp vì thế có thể áp dụng một thủ thuật trung gian, tức là tạo tính năng chèn biểu tượng cảm xúc trực tiếp vào một vùng text (textarea) kết hợp nút chọn để người dùng copy mã nhập rồi dán vào khung viết nhận xét, ngoài ra còn có chức năng chèn các thẻ như <b>, <i>, <em>, <a>. Hy vọng đây sẽ là bàn đạp để chúng ta tiến thêm một bước trong công cuộc hiện đại hóa hệ thống nhận xét của Blogspot.

Bạn có thể xem Demo ở phần viết bình luận của Thủ thuật Blogger.


Thủ thuật này đã kết hợp thủ thuật tạo bộ biểu tượng cảm xúc cho nhận xét vì thế nếu áp dụng thủ thuật này thì bạn cần tháo thủ thuật cũ liên quan (nếu đã cài đặt rồi) và thực hiện theo các bước sau đây:

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Đặt đoạn code sau đây vào trước thẻ </body>. Đây là script chức năng cho bộ biểu tượng cảm xúc hoạt động.

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
//Emoticons for Blogger Comments || Author: Huynh Nhat Ha || http://www.thuthuatblogger.info || © Copyright 2010
function emoticonBloggerHuynhNhatHa() {

if(!document.getElementById) {return;} // no support

bodyText = document.getElementById('comments-block');

theText = bodyText.innerHTML;
theText = theText.replace(/:1\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtJ2lXSN1RcNZEpWH1Y6bJfyzTbN03LpKLFK2th8Eo6Pn5Ekf4BHu6Gt1PBMhdYQARD0v3B0yVpTdpuVDpq4JUMcAghq4It8WMp2lwPy1M5JJu0yUw4N3Dzw1Xrs97mvgQioinV7gC1eTk/s1600/49.gif" />');
theText = theText.replace(/:2\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4GnAXM6aw1GM3nm-0xspzX-1MqpNf-5wX4_HIrdmY4cT2avfXllRPFBlr9c3NUfuh6GjbKiMNh6Mg4E6dMWVu2q9NCJydkuCLrobM1zbOn-8VpmK0iZ40IgMIZaNRRblpKoimZrdJqv2D/s1600/102.gif" />');
theText = theText.replace(/:3\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM-7MaWHdbvIPn87km6OJcMp5qEFzhqtFlQQtFYVG4XWI1M4rqJHIr_NoH_SRYGXL-O5Gn2V5IhPnNTJvUG8-1RLyZlIHP0OOVMvnd83byCF354uESRyVeTOjDjqGNjBigfOBCWi_D2JvE/s1600/113.gif" />');
theText = theText.replace(/:4\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8SQlkveTjo5WggY-gIGP55U1ZAU3crXHOxppO7I4ywFFN3bRAoUxQ-moTkQbtphpdMy7tXP6NPwIezj0tqdjjD3bghmVWFDUHtfYCTcFagTSGrnKolZG6TX5xWQoeagsHsd1qUwQKPH5e/s1600/93.gif" />');
theText = theText.replace(/:5\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibP8yaEZmXv99QULgh6JaeQsjBYzTbiMwLbdCvd3Eh-Mw2C2xoGOQcB1BQonQuLkWzcrHZiV9AOoHMujUkmecv4lG_OAqmcM0V4s6ANefdFA7YcbFC0nNVY8Gbb8e2X8UG3o1-L-soQKNn/s1600/61.gif" />');
theText = theText.replace(/:6\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid7keUSVdV0sIKf9Gedu6anUbGRftb-3G6BbokaBr2FS4RgtW_aPSgH9YvZnXKS-Z01BSkk3HEa3rBCXWzu507qYHyiUfl_3O70wSq7UooUIMWAHf-fLyIK7CJvcsH-yucrcg9qcnpqJE5/s1600/134.gif" />');
theText = theText.replace(/:7\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQfTZsHqkYy0wHbai7sQ7DNyVkOySraELAyG2meSKuWHY748uW9TDy53By8sYLxBxlYm0HzE8jx9LoCnTzpj7RvkPUjarOrnWr-KsvwP9MMTl4Pq57d4xqtjMLkvnOR68wdkp_JqDj4pQ-/s1600/39.gif" />');
theText = theText.replace(/:8\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKaCyfdu3GRMszOX7jD-kO8I20dz8A-L3wGjRebEj_Vh10oz1g4KYnimmDEeP3GLJRdx3N05whyphenhyphenOUSsvbuOTJxWllSMkGyFhj-_-yCT9blk_Ee3O1dvbAI7pPtdkUnS36Sa2oKMScF-oKl/s1600/106.gif" />');
theText = theText.replace(/:9\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqu574JIzz8XVXaF4JnoQLasgE6vce1XnCp935OJF3Z22FB6zjqHlT4cAvrY-sEIWwsCr1KgGohCB-jgACJwE6XkqvpUBUgZauxCtRGgjSFSFrl4MbXHWW3qrBPMUtznkQOWGN90CX7MIt/s1600/43.gif" />');
theText = theText.replace(/:A\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvej1cNmQ4D0lv_es8oH8jeihB4DiQzas1evFK2_xm4U4Gx9MlyG40AoKprXtWpTOLxOeKfhxLvpP_AiEYEyE9-RkPh_r_9I2Vv7W9xvVGvozq62BYhNoC_ba0tdUi-M9fzQrEf_Qb76UV/s1600/111.gif" />');
theText = theText.replace(/:B\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0qnwBVd61XlLuo7SFFb9dPdZAjKOV5wCI2vSYuGXYjWDJyD45XUK_E8InGuJkHiL5myIoXO8SSjF03vFMJ0oJtfZmagxVKMpXIManbSHP6gLTDNHIJlrqMtyIadPGkp_JeIxv8nLB-zti/s1600/48.gif" />');
theText = theText.replace(/:C\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUEfIWM7qv7RedrVz4Xe1UWvtvmOgmO2rhV9uNRDa9E-dp1GtV-qkW4jzNNBCoYM7VNHcb_K2Qmz0fT2rLPGuO5KzjW4g4Lpaw5HjA-3OPKDVjBjq7g5ZWFIqLKeQWjtnmfDS8geBgeiDX/s1600/54.gif" />');
theText = theText.replace(/:D\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFqTkQSV50hibCk2909er1JZVpJcaEHwQgYuHbdWG-55YdNudO15hPTg3aKP-GuGs2ra_ltKchgCvvKvQSTXPOyn2EvwNZWnZ-65GxAgLWWs9szSn_N-GATb_JQVY4ll8p4jHEE0WEK7O3/s1600/63.gif" />');
theText = theText.replace(/:E\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs__bNm7YWTZDsECcL0M-ghCANpZur2tnqYv_lU2PBgj3mS8L7VcXFTTOw46LJ3HhDKFwbiKuamu9qpvQnOgUd1C8NVpoWPuwJBzhi93D1JSOuMxuB6smVIuS8KMyTQ6m2x1MVQWSm7eve/s1600/100.gif" />');
theText = theText.replace(/:F\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ2BwywMXUy3NHOtOWf8-EUuZX_zWiQ_111zsTOmi5PFMNUX9KrcR3lzUnLRLCecmy3paDp70kAisylZgCnXSnzEeypl-0wCshly3ltoq9Rtszajx0FTWODYsJ7utNnYBLhghnh5FN0hDa/s1600/45.gif" />');
theText = theText.replace(/:G\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpnswn0MQuSr71mlkOM9USPrtPTrG-t-VDzUPeBqnv2SeaGwhbaXH1-S-28vFZrVixk6uUuqsIeffL5r-vdifjneyZxc1c_bLtyCBrd5OK8uDjDtHqMS4iQznOZ8OA2WVtHecrf3iq-N9t/s1600/77.gif" />');
theText = theText.replace(/:H\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmm8YM1NoUqcbmX3VG128gfgzPMFL8ynma5-EF2ziZreEWBx1xbCEEfwk0m_rgqUsI2rajAIVpPeygcSKrGJgxtzTzvOAl-ZkDm0orhbxz2RiylHZpFhImxYvBLe-C0Z_j1RmguoBLCPHQ/s1600/86.gif" />');
theText = theText.replace(/:I\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTgfK3VxJLLiB9kebC83-l_wzQJaN9xiwKyZQoTGUlkENkDmZ5l__CLC-CvR3PVoR462m3Ik4oi9nzQHRVpOLzhZLAbJ11f0gIZPKrW7gXZzG2OnX34f3KeWVn4oOJmMp85p96IOVe4rS9/s1600/94.gif" />');
theText = theText.replace(/:J\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFDS-AE_aChwEwFaZBkW4wUADjHdp4v2LqVRe4ygF1PRkwJPUP5IH03QOfSvMXJPAspXXRHSmLl-J20Jd8BN03vTbvCJ4cXaMYYBVjpRo_KxXVLbisrfW97xF54dkS1pwDPbWKaICs50dY/s1600/83.gif" />');
theText = theText.replace(/:K\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC_fZa8LR4Aglhdozqe2rL7UGlBSBN55cuCFDuw7KyxhEWvCBWUXcKbeu6SztXsJs991uxxxUACu1stjOHHGE0Wqc0ZsIWzOTdtZQnOpTsOV1MhpKn0nxqkZiZtfPX5XDvYimoqp-xQA4D/s1600/59.gif" />');
theText = theText.replace(/:L\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnbJ9YwU2QBfUsCivCLgbW6hY2nfV_9xlouwGp5P6pTNyxAc_9KJOxGBpGO2CwjuBod8Y2sMWfaAUMvF4Quucn6GlPclMyLYnj3wmcz2w1JbPiGSLDkLPgiB2c4VgzOeandPKPtR783piA/s1600/soldierbaby.gif" />');
theText = theText.replace(/:M\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiByG95tNxh6wpyKnSsGelJh31EvcrNAg0fR6J2yf1tlOy5nq9eydJE7LOPWuwak9KAaunxHPQDe3FnwKZ65YnsrphJ756-vaBIYURhnaoxhWLQS7U9vyy9y22WVCilLOazO9FZgs6fjCbP/s1600/alo.gif" />');
theText = theText.replace(/:N\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQL6g3XBOsS_6TaAg0J537pJZXXQf4GNa92HvX43vdYyFEqbgTkTIihyEfByoYHqtEO2O9z6KkhokGJcE49fzFGZ8hSwCM60DgTzgbWIesQ1SZIFNn0xdSQrBM79_YkiKUA5Vg9Ccsccg6/s1600/shutup.gif" />');
theText = theText.replace(/:O\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1GgH6BadUEy9Q8BIu8nMvxVJhnASRabRpM-TbHbx00ezy541dfXbBjJUgEsh1XcDBkXjB-y-rpNdjWfz8zORqI01fb-0rJqO-M03zsseo-CmJYNmyZjZT2xuRJ9PjCUoNvgBONm7ZUEs_/s1600/yeulam.gif" />');
theText = theText.replace(/:P\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtnmW58XufSW8CMx6orr2B1WD6ZE50lyMOc2DSdVeeBraA4aiM2qqzbFU1BjQf6U9ng8dPf_LbiulPRjB1bfqZfmVuU-fEx6Agvkq9qxRDECCI4rmaDQAQL4rYUUt0hb3ldlVliolpjx1u/s1600/datbomb.gif" />');

bodyText.innerHTML = theText;}
//]]>
</script>
<script type='text/javascript'>
emoticonBloggerHuynhNhatHa();
</script>
</b:if>

Cần chú ý để chức năng biểu tượng cảm xúc hoạt động trong phần nhận xét thì bạn phải thay đổi ID comments-block cho phù hợp. ID này nằm trong một thẻ chỉ định thành phần chứa các dữ liệu của nhận xét, thẻ này thường nằm ngay trước dòng <b:loop values='data:post.comments' var='comment'>. Tùy theo cách đặt tên của người thiết kế Template mà id này có thể có tên khác nhau ví dụ: comments-block, comments-block3, comments_block, cm_block, commentsblock …

Bước 2. Tìm đến đoạn code như bên dưới. Đoạn code này biểu thị phần khung viết nhận xét.

<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

Đặt trước đoạn code trên bằng đoạn code bên dưới:

<script type='text/javascript'>
//<![CDATA[
// Script to insert Emoticons and Links on Blogspot Comments V1 by www.thuthuatblogger.info
function comments_URL() {
var r = prompt("Nhập địa chỉ trang", "http://");
var p = prompt("Nhập link text hiển thị", "Text");
if(r != "") ; if(p != ""){
document.getElementById('comments_input').value += "<a href='" + r + "' rel='nofollow'>" + p + "<\/a>";
} else {
alert("Bạn đã nhập xong dữ liệu");
}
}
function comments_HTML() {
document.getElementById('comments_input').value += '<a href=\'http://URL dẫn đến link \'>Trang<\/a>';
}
function comments_B() {
document.getElementById('comments_input').value += '<b><\/b>';
}
function comments_I() {
document.getElementById('comments_input').value += '<i><\/i>';
}
function comments_EM() {
document.getElementById('comments_input').value += '<em><\/em>';
}
function moreSmilies() {
document.getElementById('smiley-more').style.display = 'inline';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()">&laquo;&nbsp;Less</a></span>';
}
function lessSmilies() {
document.getElementById('smiley-more').style.display = 'none';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()">More&nbsp;&raquo;</a>';
}
//]]>
</script>
<style>
#comments_insert {padding:0;margin:0;width:600px;float:left;text-align: center}
#comments_insert img {padding:0;border:none;margin:2px}
.text_style_wrap {margin-top:10px;}
.text_style {border:1px solid #069;padding:3px;background: #d8eaee}
#comments_insert a {text-decoration:none}
#comments_HTML {display: none}
#comments_input {margin-top:10px}
.tooltip{outline:none;cursor:help;text-decoration:none;position:relative}
.tooltip span{margin-left:-999em;position:absolute}
.tooltip:hover span{border-radius:5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;box-shadow:5px 5px 5px rgba(0,0,0,0.1);-webkit-box-shadow:5px 5px rgba(0,0,0,0.1);-moz-box-shadow:5px 5px rgba(0,0,0,0.1);font-family:Calibri,Tahoma,Geneva,sans-serif;position:absolute;left:1em;top:2em;z-index:99;margin-left:0;width:300px}
.tooltip:hover img{border:0;margin:-10px 0 0 -55px;float:left;position:absolute}
.tooltip:hover em{font-family:Candara,Tahoma,Geneva,sans-serif;font-size:1.2em;font-weight:bold;display:block;padding:0.2em 0 0.6em 0}
.help{padding: 0.8em 1em; background: #FFCCAA; border: 1px solid #FF3334;text-align:justify;color:#000}
</style>
<!--[if IE]> <style> #comments_URL {display: none} #comments_HTML {display:inline} </style> <![endif]-->

<div id='comments_insert'>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:1) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtJ2lXSN1RcNZEpWH1Y6bJfyzTbN03LpKLFK2th8Eo6Pn5Ekf4BHu6Gt1PBMhdYQARD0v3B0yVpTdpuVDpq4JUMcAghq4It8WMp2lwPy1M5JJu0yUw4N3Dzw1Xrs97mvgQioinV7gC1eTk/s1600/49.gif' style='border: 0; padding:0' title='hê hê hê'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:2) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4GnAXM6aw1GM3nm-0xspzX-1MqpNf-5wX4_HIrdmY4cT2avfXllRPFBlr9c3NUfuh6GjbKiMNh6Mg4E6dMWVu2q9NCJydkuCLrobM1zbOn-8VpmK0iZ40IgMIZaNRRblpKoimZrdJqv2D/s1600/102.gif' style='border: 0; padding:0' title='hôn hôn'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:3) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM-7MaWHdbvIPn87km6OJcMp5qEFzhqtFlQQtFYVG4XWI1M4rqJHIr_NoH_SRYGXL-O5Gn2V5IhPnNTJvUG8-1RLyZlIHP0OOVMvnd83byCF354uESRyVeTOjDjqGNjBigfOBCWi_D2JvE/s1600/113.gif' style='border: 0; padding:0' title='ua ua ua'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:4) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8SQlkveTjo5WggY-gIGP55U1ZAU3crXHOxppO7I4ywFFN3bRAoUxQ-moTkQbtphpdMy7tXP6NPwIezj0tqdjjD3bghmVWFDUHtfYCTcFagTSGrnKolZG6TX5xWQoeagsHsd1qUwQKPH5e/s1600/93.gif' style='border: 0; padding:0' title='nhìn nè'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:5) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibP8yaEZmXv99QULgh6JaeQsjBYzTbiMwLbdCvd3Eh-Mw2C2xoGOQcB1BQonQuLkWzcrHZiV9AOoHMujUkmecv4lG_OAqmcM0V4s6ANefdFA7YcbFC0nNVY8Gbb8e2X8UG3o1-L-soQKNn/s1600/61.gif' style='border: 0; padding:0' title='vỗ tay'/></a>
<span id='smiley-more' style='display: none;'>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:6) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid7keUSVdV0sIKf9Gedu6anUbGRftb-3G6BbokaBr2FS4RgtW_aPSgH9YvZnXKS-Z01BSkk3HEa3rBCXWzu507qYHyiUfl_3O70wSq7UooUIMWAHf-fLyIK7CJvcsH-yucrcg9qcnpqJE5/s1600/134.gif' style='border: 0; padding:0' title='tát bớp'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:7) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQfTZsHqkYy0wHbai7sQ7DNyVkOySraELAyG2meSKuWHY748uW9TDy53By8sYLxBxlYm0HzE8jx9LoCnTzpj7RvkPUjarOrnWr-KsvwP9MMTl4Pq57d4xqtjMLkvnOR68wdkp_JqDj4pQ-/s1600/39.gif' style='border: 0; padding:0' title='rơi lệ'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:8) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKaCyfdu3GRMszOX7jD-kO8I20dz8A-L3wGjRebEj_Vh10oz1g4KYnimmDEeP3GLJRdx3N05whyphenhyphenOUSsvbuOTJxWllSMkGyFhj-_-yCT9blk_Ee3O1dvbAI7pPtdkUnS36Sa2oKMScF-oKl/s1600/106.gif' style='border: 0; padding:0' title='money money'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:9) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqu574JIzz8XVXaF4JnoQLasgE6vce1XnCp935OJF3Z22FB6zjqHlT4cAvrY-sEIWwsCr1KgGohCB-jgACJwE6XkqvpUBUgZauxCtRGgjSFSFrl4MbXHWW3qrBPMUtznkQOWGN90CX7MIt/s1600/43.gif' style='border: 0; padding:0' title='lêu lêu'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:A) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvej1cNmQ4D0lv_es8oH8jeihB4DiQzas1evFK2_xm4U4Gx9MlyG40AoKprXtWpTOLxOeKfhxLvpP_AiEYEyE9-RkPh_r_9I2Vv7W9xvVGvozq62BYhNoC_ba0tdUi-M9fzQrEf_Qb76UV/s1600/111.gif' style='border: 0; padding:0' title='lắc đầu'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:B) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0qnwBVd61XlLuo7SFFb9dPdZAjKOV5wCI2vSYuGXYjWDJyD45XUK_E8InGuJkHiL5myIoXO8SSjF03vFMJ0oJtfZmagxVKMpXIManbSHP6gLTDNHIJlrqMtyIadPGkp_JeIxv8nLB-zti/s1600/48.gif' style='border: 0; padding:0' title='khóc ròng'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:C) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUEfIWM7qv7RedrVz4Xe1UWvtvmOgmO2rhV9uNRDa9E-dp1GtV-qkW4jzNNBCoYM7VNHcb_K2Qmz0fT2rLPGuO5KzjW4g4Lpaw5HjA-3OPKDVjBjq7g5ZWFIqLKeQWjtnmfDS8geBgeiDX/s1600/54.gif' style='border: 0; padding:0' title='I don’t know'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:D) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFqTkQSV50hibCk2909er1JZVpJcaEHwQgYuHbdWG-55YdNudO15hPTg3aKP-GuGs2ra_ltKchgCvvKvQSTXPOyn2EvwNZWnZ-65GxAgLWWs9szSn_N-GATb_JQVY4ll8p4jHEE0WEK7O3/s1600/63.gif' style='border: 0; padding:0' title='hi hi hi'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:E) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs__bNm7YWTZDsECcL0M-ghCANpZur2tnqYv_lU2PBgj3mS8L7VcXFTTOw46LJ3HhDKFwbiKuamu9qpvQnOgUd1C8NVpoWPuwJBzhi93D1JSOuMxuB6smVIuS8KMyTQ6m2x1MVQWSm7eve/s1600/100.gif' style='border: 0; padding:0' title='đá một phát'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:F) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ2BwywMXUy3NHOtOWf8-EUuZX_zWiQ_111zsTOmi5PFMNUX9KrcR3lzUnLRLCecmy3paDp70kAisylZgCnXSnzEeypl-0wCshly3ltoq9Rtszajx0FTWODYsJ7utNnYBLhghnh5FN0hDa/s1600/45.gif' style='border: 0; padding:0' title='cười lớn giơ răng'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:G) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpnswn0MQuSr71mlkOM9USPrtPTrG-t-VDzUPeBqnv2SeaGwhbaXH1-S-28vFZrVixk6uUuqsIeffL5r-vdifjneyZxc1c_bLtyCBrd5OK8uDjDtHqMS4iQznOZ8OA2WVtHecrf3iq-N9t/s1600/77.gif' style='border: 0; padding:0' title='cụng ly'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:H) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmm8YM1NoUqcbmX3VG128gfgzPMFL8ynma5-EF2ziZreEWBx1xbCEEfwk0m_rgqUsI2rajAIVpPeygcSKrGJgxtzTzvOAl-ZkDm0orhbxz2RiylHZpFhImxYvBLe-C0Z_j1RmguoBLCPHQ/s1600/86.gif' style='border: 0; padding:0' title='chém gió'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:I) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTgfK3VxJLLiB9kebC83-l_wzQJaN9xiwKyZQoTGUlkENkDmZ5l__CLC-CvR3PVoR462m3Ik4oi9nzQHRVpOLzhZLAbJ11f0gIZPKrW7gXZzG2OnX34f3KeWVn4oOJmMp85p96IOVe4rS9/s1600/94.gif' style='border: 0; padding:0' title='bắt tay'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:J) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFDS-AE_aChwEwFaZBkW4wUADjHdp4v2LqVRe4ygF1PRkwJPUP5IH03QOfSvMXJPAspXXRHSmLl-J20Jd8BN03vTbvCJ4cXaMYYBVjpRo_KxXVLbisrfW97xF54dkS1pwDPbWKaICs50dY/s1600/83.gif' style='border: 0; padding:0' title='ăn ăn ăn'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:K) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC_fZa8LR4Aglhdozqe2rL7UGlBSBN55cuCFDuw7KyxhEWvCBWUXcKbeu6SztXsJs991uxxxUACu1stjOHHGE0Wqc0ZsIWzOTdtZQnOpTsOV1MhpKn0nxqkZiZtfPX5XDvYimoqp-xQA4D/s1600/59.gif' style='border: 0; padding:0' title='byyeee'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:L) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnbJ9YwU2QBfUsCivCLgbW6hY2nfV_9xlouwGp5P6pTNyxAc_9KJOxGBpGO2CwjuBod8Y2sMWfaAUMvF4Quucn6GlPclMyLYnj3wmcz2w1JbPiGSLDkLPgiB2c4VgzOeandPKPtR783piA/s1600/soldierbaby.gif' style='border: 0; padding:0' title='nhóc lính'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:M) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiByG95tNxh6wpyKnSsGelJh31EvcrNAg0fR6J2yf1tlOy5nq9eydJE7LOPWuwak9KAaunxHPQDe3FnwKZ65YnsrphJ756-vaBIYURhnaoxhWLQS7U9vyy9y22WVCilLOazO9FZgs6fjCbP/s1600/alo.gif' style='border: 0; padding:0' title='Alo'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:N) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQL6g3XBOsS_6TaAg0J537pJZXXQf4GNa92HvX43vdYyFEqbgTkTIihyEfByoYHqtEO2O9z6KkhokGJcE49fzFGZ8hSwCM60DgTzgbWIesQ1SZIFNn0xdSQrBM79_YkiKUA5Vg9Ccsccg6/s1600/shutup.gif' style='border: 0; padding:0' title='Shup up'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:O) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1GgH6BadUEy9Q8BIu8nMvxVJhnASRabRpM-TbHbx00ezy541dfXbBjJUgEsh1XcDBkXjB-y-rpNdjWfz8zORqI01fb-0rJqO-M03zsseo-CmJYNmyZjZT2xuRJ9PjCUoNvgBONm7ZUEs_/s1600/yeulam.gif' style='border: 0; padding:0' title='Yêu lắm đó'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:P) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtnmW58XufSW8CMx6orr2B1WD6ZE50lyMOc2DSdVeeBraA4aiM2qqzbFU1BjQf6U9ng8dPf_LbiulPRjB1bfqZfmVuU-fEx6Agvkq9qxRDECCI4rmaDQAQL4rYUUt0hb3ldlVliolpjx1u/s1600/datbomb.gif' style='border: 0; padding:0' title='Đặt bom'/></a>
</span>
<span id='smiley-toggle'><a href='javascript:moreSmilies()'>
More &#8594;</a></span>

<div class='text_style_wrap'>
<a href='javascript: void(0);' onClick='comments_B()'><span class='text_style'><b>Chữ đậm</b></span></a>
<a href='javascript: void(0);' onClick='comments_I()'><span class='text_style'><i>Chữ nghiêng</i></span></a>
<a href='javascript: void(0);' onClick='comments_EM()'><span class='text_style'><em>Chữ nghiêng 2</em></span></a>
<a href='javascript: void(0);' id='comments_HTML' onClick='comments_HTML()'><span class='text_style'>Chèn Link</span></a>
<a href='javascript: void(0);' id='comments_URL' onClick='comments_URL()'><span class='text_style'>Chèn Link</span></a>
<script type='text/javascript'>
function openup_parseHTML() { window.open(&quot;http://ha-escapexml.blogspot.com&quot;, &quot;followblog&quot;, &quot;height=540, width=450, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no&quot; ); }
</script>
<a href='javascript:openup_parseHTML()' rel='nofollow' title='Mã hóa code trước khi đưa vào bình luận'><span class='text_style'>Mã hóa code</span></a>
<a class='tooltip' href='javascript: void(0);'><b style='color:#F00'>Help ?</b><span class='help'>Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.</span></a>
</div>
<form name='comments_form'>
<textarea cols='70' id='comments_input' rows='1' style='background: #F8F8FF;margin-bottom:7px'/>
<br/>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).select();'><span class='text_style'>Chọn</span></a>
<a href='javascript: void(0);' onClick='document.comments_form.reset();'><span class='text_style'>Xóa</span></a>
</form>
</div>

Lưu Template. Trên đây mình gắn sẳn 25 biểu tượng cảm xúc, nếu các bạn muốn thêm thì có thể tự nghiên cứu để gắn thêm vào, đảm bảo sự đồng nhất biểu tượng theo thứ tự ở Bước 1 và Bước 2. Những phần được đánh dấu màu đỏ là những phần bạn có thể tùy biến theo ý thích của mình.
More about

Cài đặt Bộ Yahoo Emoticons cho Comments

Người đăng: ngaybennhau on Chủ Nhật, 27 tháng 3, 2011

Tại Bloggerism, qua nhãn Emoticons, bạn có thể tìm hiểu về cách cài đặt biểu tượng cảm xúc trên nhận xét blogspot. Bài viết này xin hướng dẫn cách cài đặt bộ biểu tượng cảm xúc Yahoo Messenger trong đó Bloggerism đã bổ sung thêm một số biểu tượng ngộ nghĩnh. Đặc biệt là có tạo thêm hiệu ứng ẩn hiện bảng biểu tượng cảm xúc.

Trước khi cài đặt cho blogspot của mình, bạn có thể xem Demo.



Để cài đặt, bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit Template, chọn Expand Widget Templates.

Đặt đoạn code sau đây vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
function emoticonCommentha(replace) {
if(!document.getElementById) {return;} // no support
bodyText = document.getElementById(replace);
replacetheText = bodyText.innerHTML;
replacetheText = replacetheText.replace(/:\)\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif" />');
replacetheText = replacetheText.replace(/:\)\]/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif" />');
replacetheText = replacetheText.replace(/;\)\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif" />');
replacetheText = replacetheText.replace(/;\;\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif" />');
replacetheText = replacetheText.replace(/:D/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" />');
replacetheText = replacetheText.replace(/;\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif" />');
replacetheText = replacetheText.replace(/:p/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif" />');
replacetheText = replacetheText.replace(/:\(\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif" />');
replacetheText = replacetheText.replace(/:\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" />');
replacetheText = replacetheText.replace(/:\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif" />');
replacetheText = replacetheText.replace(/:X/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif" />');
replacetheText = replacetheText.replace(/=\(\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif" />');
replacetheText = replacetheText.replace(/:\-\o/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif" />');
replacetheText = replacetheText.replace(/:-\//g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif" />');
replacetheText = replacetheText.replace(/:-\*/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif" />');
replacetheText = replacetheText.replace(/:\|/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif" />');
replacetheText = replacetheText.replace(/8\-\}/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif" />');
replacetheText = replacetheText.replace(/~x\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif" />');
replacetheText = replacetheText.replace(/b-\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif" />');
replacetheText = replacetheText.replace(/:-\L/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif" />');
replacetheText = replacetheText.replace(/x\(/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif" />');
replacetheText = replacetheText.replace(/=\)\)/g,'<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" />');
replacetheText = replacetheText.replace(/:\P/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAHxyRyi9q1dpJT7CpyYol-kcT0H_x19MOY1OsZdkCEbGUwDMjZSeXqEn0PVF-XtZMSSrhT4CDkeWsbf5NIkHtioKHHnUimOoxlBqZP6u8N6xcUNQ3fenr4XdEqArRex594Hw8oRaqHE2D/" />');
replacetheText = replacetheText.replace(/:\mj/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcy_hYjKRiR0U_dgTRY3E56e3LdjF_k6zNkF-EcmdiU8bYLAk3PBi5BKVS6FK1q4VxiWlpc82vmckKsy2TRl_P1bFPS0bQBsqTeTrPp7mKJfYg5plCtCDCx2aVR-frcczKu65khHnGBGc/" />');
bodyText.innerHTML = replacetheText;
}
//]]>
</script>

Bước 2. Đặt khung Biểu tượng cảm xúc. Tìm đến dòng <b:includable id='comment-form' var='post'> và đặt sau nó bằng đoạn code bên dưới.

<script language="javascript">
//<![CDATA[
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Show Emoticons";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide Emoticons";
}
}
//]]>
</script>
<a href="javascript:toggle();" id="displayText">[&#9660;/&#9650;] Emoticons</a>
<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif'/>
<div id="toggleText" style="display: none;">
<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
<img border='0' height='18' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAHxyRyi9q1dpJT7CpyYol-kcT0H_x19MOY1OsZdkCEbGUwDMjZSeXqEn0PVF-XtZMSSrhT4CDkeWsbf5NIkHtioKHHnUimOoxlBqZP6u8N6xcUNQ3fenr4XdEqArRex594Hw8oRaqHE2D/' width='18'/> :P
<img border='0' height='22' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcy_hYjKRiR0U_dgTRY3E56e3LdjF_k6zNkF-EcmdiU8bYLAk3PBi5BKVS6FK1q4VxiWlpc82vmckKsy2TRl_P1bFPS0bQBsqTeTrPp7mKJfYg5plCtCDCx2aVR-frcczKu65khHnGBGc/' width='50'/> :mj
</b>
</div>
</div>

Đoạn Javascript ở trên sẽ giúp tạo hiệu ứng ẩn hiện khung Biểu tượng cảm xúc. Trước đây blog Fandung.com đã giới thiệu một cách ẩn hiện khung Biểu tượng cảm xúc song cách cài đặt có phần khó cho các newbie blogspotist cho nên Bloggerism mới giới thiệu cách này để bạn đọc chia sẻ.

Bước 3. Để biểu tượng cảm xúc hiển thị trên phần Comment Body thì bạn hãy tìm đến đoạn code tương tự bên dưới.

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

Hoặc:

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>

Đối với một số Template là đoạn code:

<div id='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>

Thay dòng <p><data:comment.body/></p> bằng đoạn code:

<p expr:id='&quot;combody-&quot; + data:comment.anchorName'><data:comment.body/></p><script type='text/javascript'> replace = &quot;combody-&quot; + &quot;<data:comment.anchorName/>&quot;; emoticonCommentha(replace);</script>

Lưu Template là OK.

Lưu ý: Bài viết này giới thiệu chung cách cài đặt cho tất cả blogspot, khi áp dụng thì bạn nên download các emoticon về rồi upload lên blogspot của bạn để lấy URL rồi thay thế lần lượt các URL tương ứng trong code, nhằm tránh tình trạng load trang chậm.
More about

Biểu tượng cảm xúc cho nhận xét bằng CSS và jQuery

Người đăng: ngaybennhau on Thứ Tư, 19 tháng 1, 2011

 jQuery CSSEmoticons là một plugin jQuery đơn giản có sử dụng CSS3 cho phép biến đối các biểu tượng cảm xúc bằng text trên trang web thành các biểu tượng mặt cười dễ thương bằng định dạng CSS3 thuần túy. Plugin này do Steve Schwartz phát triển và áp dụng cho Wordpress. Plugin này có sử dụng các thuộc tính CSS3 như transform, border-radius, box-shadow, gradient, và transition nên nó chỉ được hỗ trợ bởi các công cụ trình duyệt như FireFox, Chrome, Safari và Opera. Nó cũng hoạt động trên các trình duyệt điện thoại di động như iPhone và Android. Trên Internet Explorer, các biểu tượng cảm xúc chỉ hiển thị như những biểu tượng text nguyên gốc do IE chưa hỗ trợ các thuộc tính CSS3.

jQuery CSSEmoticons đã được Wordpress tích hợp và có trang hướng dẫn cài đặt plugin này. Tuy nhiên Blogger vẫn thiệt thòi là chưa được ứng dụng plugin này. Chính vì thế tôi cố gắng nghiên cứu, thử nghiệm và cuối cùng đã áp dụng được cho nhận xét trên Blogger (jQuery CSSEmoticons plugin for Blogger).

Bạn có thể xem Demo.

Nếu bạn thích plugin này thì hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Đặt đoạn CSS sau vào trước dòng ]]></b:skin>.

/* jQuery CSSEmoticons plugin 0.2.8Copyright (c) 2010 Steve Schwartz (JangoSteve)Dual licensed under the MIT and GPL licenses:http://www.opensource.org/licenses/mit-license.phphttp://www.gnu.org/licenses/gpl.htmlDate:Sun Sep 20 10:00:00 2010 -0500*//* Basic styles for emoticons */span.css-emoticon{font-family:"Trebuchet MS";/* seems to give the best and most consistent emoticon appearance */font-size:0.65em;font-weight:bold;color:#000;display:inline-block;overflow:hidden;vertical-align:middle;transform:rotate(90deg);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);width:1.54em;/* note that this is a multiple of this span's font-size,not containing text font-size */height:1.54em;/* so,relative to containing text,width and height are 0.9 x 1.6 = 1.44em */text-align:center;padding:0;line-height:1.34em;-moz-border-radius:1.54em;-webkit-border-radius:1.54em;border-radius:1.54em;-moz-box-shadow:1px -1px 2px rgba(0,0,0,0.5);-webkit-box-shadow:1px -1px 2px rgba(0,0,0,0.5);box-shadow:1px -1px 2px rgba(0,0,0,0.5);border:1px solid rgba(0,0,0,0.25);background-color:#fc0;background-image:-webkit-gradient(linear,right top,left top,color-stop(0.41,rgb(255,204,0)),color-stop(0.56,rgb(255,221,85)),color-stop(1,rgb(255,238,170)));background-image:-moz-linear-gradient(center right,rgb(255,204,0) 41%,rgb(255,221,85) 56%,rgb(255,238,170) 100%);-webkit-transition-property:color,background,transform;-webkit-transition-duration:1s,1s;-webkit-transition-timing-function:linear,ease-in}
/* Styles for two-character emoticons that need more letter-spacing for proportionality */span.css-emoticon.spaced-emoticon{padding-left:0.2em;width:1.34em;letter-spacing:0.2em}
/* This is a dirty dirty hack,because webkit doesn't properly do the padding+width=total-width as it shouldI think the width of the border may be throwing things off,because it's more noticable for small icons */@media screen and (-webkit-min-device-pixel-ratio: 0){span.css-emoticon.spaced-emoticon{width:1.4em}
}
/* Styles for emoticons that need to have smaller characters to fit inside the circle */span.css-emoticon.small-emoticon{font-size:0.55em;width:1.82em;height:1.82em;line-height:1.72em;-moz-border-radius:1.82em;-webkit-border-radius:1.82em;border-radius:1.82em}
span.css-emoticon.small-emoticon.spaced-emoticon{padding-left:0;width:1.82em;letter-spacing:0.1em}
/* Styles for additional colors */span.css-emoticon.red-emoticon{background-color:#eb0542;background-image:-webkit-gradient(linear,right top,left top,color-stop(0.41,rgb(235,5,66)),color-stop(0.56,rgb(235,38,90)),color-stop(1,rgb(250,55,110)));background-image:-moz-linear-gradient(center right,rgb(235,5,66) 41%,rgb(235,38,90) 56%,rgb(250,55,110) 100%)}
span.css-emoticon.pink-emoticon{background-color:#ff8fd4;background-image:-webkit-gradient(linear,right top,left top,color-stop(0.41,rgb(255,143,212)),color-stop(0.56,rgb(255,153,216)),color-stop(1,rgb(255,173,225)));background-image:-moz-linear-gradient(center right,rgb(255,143,212) 41%,rgb(255,153,216) 56%,rgb(255,173,225) 100%)}
/* styles for emoticons that need no rotation,like O_o */span.css-emoticon.no-rotate{transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.5);-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.5);box-shadow:1px 1px 2px rgba(0,0,0,0.5);font-size:0.45em;width:2.2em;height:2.2em;line-height:1.9em;-moz-border-radius:2.2em;-webkit-border-radius:2.2em;border-radius:2.2em;background-image:-webkit-gradient(linear,right bottom,right top,color-stop(0.41,rgb(255,204,0)),color-stop(0.56,rgb(255,221,85)),color-stop(1,rgb(255,238,170)));background-image:-moz-linear-gradient(center bottom,rgb(255,204,0) 41%,rgb(255,221,85) 56%,rgb(255,238,170) 100%)}
span.css-emoticon.no-rotate.red-emoticon{background-image:-webkit-gradient(linear,right bottom,right top,color-stop(0.41,rgb(235,5,66)),color-stop(0.56,rgb(235,38,90)),color-stop(1,rgb(250,55,110)));background-image:-moz-linear-gradient(center bottom,rgb(235,5,66) 41%,rgb(235,38,90) 56%,rgb(250,55,110) 100%)}
span.css-emoticon.no-rotate.pink-emoticon{background-image:-webkit-gradient(linear,right bottom,right top,color-stop(0.41,rgb(255,143,212)),color-stop(0.56,rgb(255,153,216)),color-stop(1,rgb(255,173,225)));background-image:-moz-linear-gradient(center bottom,rgb(255,143,212) 41%,rgb(255,153,216) 56%,rgb(255,173,225) 100%)}
/* Styles for emoticons that need to be rotated counter-clockwise,like <3 */span.css-emoticon.counter-rotated{transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform:rotate(-90deg);-moz-box-shadow:-1px 1px 2px rgba(0,0,0,0.5);-webkit-box-shadow:-1px 1px 2px rgba(0,0,0,0.5);box-shadow:-1px 1px 2px rgba(0,0,0,0.5);background-image:-webkit-gradient(linear,left top,right top,color-stop(0.41,rgb(255,204,0)),color-stop(0.56,rgb(255,221,85)),color-stop(1,rgb(255,238,170)));background-image:-moz-linear-gradient(center left,rgb(255,204,0) 41%,rgb(255,221,85) 56%,rgb(255,238,170) 100%)} span.css-emoticon.counter-rotated.red-emoticon{background-image:-webkit-gradient(linear,left top,right top,color-stop(0.41,rgb(235,5,66)),color-stop(0.56,rgb(235,38,90)),color-stop(1,rgb(250,55,110)));background-image:-moz-linear-gradient(center left,rgb(235,5,66) 41%,rgb(235,38,90) 56%,rgb(250,55,110) 100%)} span.css-emoticon.counter-rotated.pink-emoticon{background-image:-webkit-gradient(linear,left top,right top,color-stop(0.41,rgb(255,143,212)),color-stop(0.56,rgb(255,153,216)),color-stop(1,rgb(255,173,225)));background-image:-moz-linear-gradient(center left,rgb(255,143,212) 41%,rgb(255,153,216) 56%,rgb(255,173,225) 100%)} /* Styles for animated states */span.css-emoticon.un-transformed-emoticon,span.css-emoticon.animated-emoticon:hover{/* font-size:inherit;font-weight:inherit;vertical-align:inherit;line-height:inherit;font-family:inherit;*/letter-spacing:inherit;color:inherit;overflow:visible;transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);background:none;background-image:none;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;border-color:transparent}


Bước 2. Đặt trước thẻ </head> với dòng code sau đây.

<script src="http://cdn0.alfajango.com/javascripts/jquery-1.4.2.min.js" type="text/javascript"></script>

Nếu bạn muốn gọn hơn thì kết hợp Bước 1 và Bước 2, chỉ cần đặt đoạn code dưới đây vào trước thẻ </head>.

<link href="http://cdn0.alfajango.com/stylesheets/jquery.cssemoticons.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://cdn0.alfajango.com/javascripts/jquery-1.4.2.min.js" type="text/javascript"></script>

Bước 3. Đặt đoạn code sau đây vào trước thẻ </body>.

<script src='http://dl.dropbox.com/u/684300/jquery.cssemoticons.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.comment-body p').emoticonize({
//delay: 800,
//animate: false,
//exclude: 'pre, code, .no-emoticons'
});
})
</script>

Bạn cần download file cssemotiocons.js về và upload lên host để xài riêng cho blog của bạn.

Bước 4. Tìm dòng <b:if cond='data:post.embedCommentForm'> và đặt trước nó với dòng code sau đây.

<img border='0' height="70" src='http://bit.ly/goWvip' width="550"/>

Lưu Template là OK.

Đối với các công cụ trình duyệt hỗ trợ plugin này thì các biểu tượng cảm xúc trông như thế này.



Còn đối với IE thì hiển thị như thế này.



Và đây là chuỗi các nhóm ký tự tương ứng với các biểu tượng cảm xúc ở trên.

:c)          :^)           :-D          :-(          :-9          ;-)           :-P          :-p          :-b          :-O          :-/           :-X           :-#          :'(           B-)           8-)          ;*(           :-*           :-\          ?-)          : )           : ]           = ]          = )           8 )           : }           : D          8 D          X D          x D          = D          : (          : [          : {          = (          ; )          ; ]          ; D          : P          : p          = P          = p           : b           : O          8 O          : /          = /          : S          : #           : X          B )           : |           : \           = \           : *           : >          : <           :)          :]          =]          =)          8)          :}          :D          :(          :[          :{          =(          ;)          ;]          ;D          :P          :p          =P          =p          :b          :O          :/          =/          :S           :#          :X          B)          :|

Hoan hô, đây quả là một kỳ công của Steve Schwartz và cũng là một nỗ lực tuyệt vời của Huỳnh Nhật Hà :ha để phổ biến plugin này cho cộng đồng Blogger.
More about

Đưa biểu tượng cảm xúc vào bài viết và nhận xét Blogger

Người đăng: ngaybennhau on Chủ Nhật, 5 tháng 12, 2010

Sau khi tạo được cách đưa biểu tượng cảm xúc :4) vào nhận xét, mình vẫn trăn trở về việc làm cách nào để đưa biểu tượng cảm xúc vào bài viết Blogger. Lang thang trên mạng Internet mình tìm thấy nhiều blogger bình luận về đề tài này. Đối với Wordpress thì việc đưa biểu tượng cảm xúc vào bài viết thật quá dễ dàng bởi vì Wordpress có tính năng tự động chuyển các nhóm ký tự định sẵn thành các biểu tượng cảm xúc. Tuy nhiên đối với Blogger thì không có tính năng đó. Chẳng lẽ Blogger đành bó tay hay sao? :20)

Sau nhiều lần lang thang Internet, mình lại học hỏi thêm nhiều điều thú vị, phát hiện Cộng đồng Blogger có nhiều bài viết giới thiệu cách đưa biểu tượng cảm xúc vào bài viết Blogger nhờ đến addon Greasemonkey của Firefox để cài đặt vào công cụ đăng bài viết của Blogger (Edit Posts). Ví dụ như ở Blog Blog Blogger-emoticon hay Blog Boyprod. Và tất nhiên các thủ thuật này chỉ hiển thị trên công cụ trình duyệt Firefox mà thôi, thật buồn cho Internet Explorer quá. :10)

Qua quá trình miệt mài nghiên cứu, cuối cùng mình đã thử nghiệm thành công thủ thuật Đưa biểu tượng cảm xúc vào bài viết và nhận xét Blogger (Emoticons for Blogger Posts and Comments) hoạt động trên tất cả các công cụ trình duyệt. Có lẽ đây là một trong những tin vui :6) dành cho những người yêu thích Blogger.

Nét độc đáo của thủ thuật này là có thể đưa biểu tượng cảm xúc vào bài viết, vào nhận xét (của độc giả và của tác giả/admin), vào cả tiện ích (widget).

Xem Demo.

Mình cho rằng bạn sẽ thích thủ thuật này và nghĩ ngay đến việc cài đặt cho blogspot của mình. Hãy làm theo các bước sau đây.

1. Vào Settings (Cài đặt) >> Comments (Nhận xét) >> chọn Embedded below post (Nhúng bên dưới bài đăng) rồi nhấn Save Settings (Lưu Cài đặt).

2. Vào Design (Thiết kế) >> Edit HTML (Chỉnh sửa HTML) chọn Expand Widget Templates (Mở rộng mẫu tiện ích).

Tìm dòng <b:if cond='data:post.embedCommentForm'> và đặt sau nó với toàn bộ đoạn code sau đây.

<div style='width: 383px; text-align: left; border: 1px solid #cdc9c9;margin:0px auto; padding: 5px; background: #eee9e9; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/>:))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/>w-)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/78.gif' width='26'/>:-j
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/>:D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/>;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/>:p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/>:_(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/>:)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/>:(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/>:X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/>=((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/>:-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/>:-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/>:|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/>:-T
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/>:]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/>x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif' width='30'/>o%
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/>b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/>:-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/>@X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/>=))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif' width='18'/>:-?
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif' width='28'/>:-h
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif' width='21'/>I-)
</b>
</div>

3. Tiếp tục đặt đoạn code dưới đây vào trước thẻ </body>.

<script src='http://hacodeproject.googlecode.com/files/emoticon4blogger.js' type='text/javascript'></script>

Lưu Template là OK.

Như vậy mỗi khi bạn viết bài hay viết nhận xét, nếu muốn đưa biểu tượng cảm xúc vào thì chỉ cần đánh nhóm ký tự đại diện cho biểu tượng cảm xúc tương ứng thì sẽ thành công.
More about

Biểu tượng cảm xúc kiểu Nhật cho Hệ thống nhận xét Disqus

Người đăng: ngaybennhau on Thứ Sáu, 26 tháng 11, 2010

Hiện nay có 3 plugin Hệ thống nhận xét :5) cho Blogger tiêu biểu là Disqus, Intensedebate và JS-Kit Echo. Riêng JS-Kit Echo yêu cầu phí dịch vụ thì hai plugin miễn phí còn lại có tính năng rất tốt. Tôi nhận thấy Hệ thống nhận xét Disqus có nhiều điểm ưu việt :17) hơn, và đặc biệt là rất dễ sử dụng. Bạn có thể tham khảo cách cài đặt mà một số Blog khác đã giới thiệu. Ví dụ ở trang Tôi yêu Google.

Một khuyết điểm ở Disqus là không có tiện ích chèn biểu tượng cảm xúc vào nhận xét. Hy vọng sau này Disqus sẽ phát triển tính năng này. Trong khi chờ đợi những sáng kiến mới từ Disqus, tôi tình cờ nghĩ ra một cách là dùng biểu tượng cảm xúc kiểu Nhật cho nhận xét trên hệ thống Disqus. Biểu tượng cảm xúc kiểu Nhật có tên là Emoji, hay Kaomoji rất khác biệt so với các biểu tượng cảm xúc kiểu phương Tây. Chúng được đọc theo chiều ngang.

Sử dụng chúng như thế nào đây? Rất đơn giản, chỉ cần lướt qua danh mục biểu tượng cảm xúc ở đây, tìm biểu tượng mà bạn thích, đánh dấu nó bằng cách kéo con trỏ bôi đen nó, copy rồi dán vào khung nhận xét Disqus. Sử dụng biểu tượng cảm xúc kiểu Nhật cũng khá thú vị đấy bạn ạ.
More about

Đưa biểu tượng cảm xúc vào nhận xét trên Blogger

Người đăng: ngaybennhau on Thứ Năm, 25 tháng 11, 2010

Đối với blog trên Wordpress, việc đưa biểu tượng cảm xúc (emoticons) vào các nhận xét thật dễ dàng vì Wordpress có tính năng tự động chuyển các nhóm ký tự định sẵn thành các biểu tượng cảm xúc, mặt cười. Tuy nhiên đối với Blogger thì phải dùng đến thủ thuật.

Cộng đồng Blogger cũng đã giới thiệu nhiều cách đưa biểu tượng cảm xúc Yahoo Messenger vào nhận xét, có thủ thuật hoạt động tốt, có thủ thuật không thể hoạt động được, có thủ thuật hoạt động được trên Template này nhưng lại không hoạt động được dối với Template khác vì nhiều lý do khác nhau. Hôm nay tôi xin giới thiệu một cách, khác với những cách mà bạn tìm thấy được trên Internet.

1. Sau khi đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Dán đoạn mã dưới đây vào sau dòng ]]></b:skin> hoặc vào trước thẻ </head>.

<!-- Emoticons -->
<style type='text/css'>
.comment-body p img {vertical-align: top; padding-right: .3em;}
</style>
<script type='text/javascript'>
//<![CDATA[
function emoticonComentario(cual) {
if(!document.getElementById) {return;}
bodyText = document.getElementById(cual);
cualTexto = bodyText.innerHTML;
// :-A
cualTexto = cualTexto.replace(/:-\A/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons387.gif" />');
// :-Z
cualTexto = cualTexto.replace(/:-\Z/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons505.gif" />');
// :-C
cualTexto = cualTexto.replace(/:-\C/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons358.gif" />');
// :-X
cualTexto = cualTexto.replace(/:-\X/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons390.gif" />');
// :-E
cualTexto = cualTexto.replace(/:-\E/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons305.gif" />');
// :-F
cualTexto = cualTexto.replace(/:-\F/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons290.gif" />');
// :-G
cualTexto = cualTexto.replace(/:-\G/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons504.gif" />');
// :-H
cualTexto = cualTexto.replace(/:-\H/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons340.gif" />');
// :-I
cualTexto = cualTexto.replace(/:-\I/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons374.gif" />');
// :-J
cualTexto = cualTexto.replace(/:-\J/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons281.gif" />');
// :-K
cualTexto = cualTexto.replace(/:-\K/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons325.gif" />');
// :-L
cualTexto = cualTexto.replace(/:-\L/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons253.gif" />');
// :-M
cualTexto = cualTexto.replace(/:-\M/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons180.gif" />');
// :-N
cualTexto = cualTexto.replace(/:-\N/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons303.gif" />');
// :-O
cualTexto = cualTexto.replace(/:-\O/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons336.gif" />');
// :-P
cualTexto = cualTexto.replace(/:-\P/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons393.gif" />');
// :-Q
cualTexto = cualTexto.replace(/:-\Q/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons451.gif" />');
// :-R
cualTexto = cualTexto.replace(/:-\R/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons292.gif" />');
// :-(
cualTexto = cualTexto.replace(/:-\(/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons415.gif" />');
// :-T
cualTexto = cualTexto.replace(/:-\T/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons413.gif" />');
// :-a
cualTexto = cualTexto.replace(/:-\a/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons324.gif" />');
// :-e
cualTexto = cualTexto.replace(/:-\e/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons403.gif" />');
// :-i
cualTexto = cualTexto.replace(/:-\i/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons294.gif" />');
// :-o
cualTexto = cualTexto.replace(/:-\o/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons419.gif" />');
// :-w
cualTexto = cualTexto.replace(/:-\w/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons285.gif" />');
bodyText.innerHTML = cualTexto;
}
//]]>
</script>

2. Dùng tổ hợp phím Ctrl + F tìm đến đoạn mã như bên dưới.

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>

</b:if>
</dd>

Thay dòng <p><data:comment.body/></p> bằng đoạn mã như bên dưới.

<p expr:id='&quot;combody-&quot; + data:comment.anchorName'><data:comment.body/></p>
<script type='text/javascript'>
cual = &quot;combody-&quot; + &quot;<data:comment.anchorName/>&quot;;
emoticonComentario(cual);
</script>

3. Tiếp tục tìm đến dòng mã:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Rồi dán vào trước nó bằng đoạn mã bên dưới.

<center>
<table bgcolor='white' border='1'>
<tbody>
<tr>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons387.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons505.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons358.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons390.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons305.gif'/></td>
</tr>
<tr>
<td>:-A</td>
<td>:-Z</td>
<td>:-C</td>
<td>:-X</td>
<td>:-E</td>
</tr>
<tr>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons290.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons504.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons340.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons374.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons281.gif'/></td>
</tr>
<tr>
<td>:-F</td>
<td>:-G</td>
<td>:-H</td>
<td>:-I</td>
<td>:-J</td>
</tr>
<tr>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons325.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons253.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons180.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons303.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons336.gif'/></td>
</tr>
<tr>
<td>:-K</td>
<td>:-L</td>
<td>:-M</td>
<td>:-N</td>
<td>:-O</td>
</tr>
<tr>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons393.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons451.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons292.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons415.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons413.gif'/></td>
</tr>
<tr>
<td>:-P</td>
<td>:-Q</td>
<td>:-R</td>
<td>:-(</td>
<td>:-T</td>
</tr>
<tr>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons324.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons403.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons294.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons419.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons285.gif'/></td>
</tr>
<tr>
<td>:-a</td>
<td>:-e</td>
<td>:-i</td>
<td>:-o</td>
<td>:-w</td>
</tr>
</tbody>
</table>
</center>

4. Lưu Template.

Tiếp tục vào Settings (Cài đặt) >> Comments (Nhận xét). Ở mục Comment Form Placement, chọn Embedded below post.

:ha Chuẩn bị sắp ra lò thủ thuật :29) Đưa biểu tượng cảm xúc vào bài viết và nhận xét Blogger (Emoticons for Blogger Posts and Comments). :27)
More about