Update: http://gman-blog.blogspot.com/2009/07/emoticon-for-blogger-version-3.html
Bài viết này sẽ giúp bạn có những emoticon của Yahoo!Messenger xuất hiện trên blog. Khi soạn bài, bạn chỉ cần gõ vào các ký tự như :), khi hiển thị nó sẽ thành :).
Các emoticon chỉ hiển thị trên blog, sau khi blog đã được load xong hết.
Cách thực hiện:
Bước 1:
Các bạn mở phần Edit HTML trong blog ra.
(từ Dashboard → Edit Layout → chọn Edit HTML)
Sao lưu template hiện tại
(Download Full Template)
Bước 2:
Tìm tới đoạn code sau:
<head>
Thêm dòng này vào ngay dưới <head>
<script src='http://site.gman.googlepages.com/Emoticon.js ' type='text/javascript'/>
tìm tiếp tới dòng:
<body>
sửa lại thành:
<body onload='replaceText();'>
Tìm đoạn:
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
Sửa thành
<div id='emoticon'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
</div> <!-- end emoticon -->
sau đó lưu template lại
(nút SAVE TEMPLATE màu đỏ)
Vậy là xong.
File: Emoticon.js
Người viết: Gman
http://gman-blog.blogspot.com
gmanvn [at] gmail [dot] com
Sau đây là bảng ký tự tắt của tất cả 95 emoticon (vâng, 95).
Nếu bạn thấy nó hữu ích với mình, hay có trục trặc gì khiến emoticon của bạn không hiện ra chính xác, hãy để lại comment, mình sẽ trả lời nếu có thể. \:D/
| Hình | ký tự | Hình | ký tự |
| :) | :) | 8-X | 8-X |
| :bz | :bz | *-:) | *-:) |
| :D | :D | ~O) | ~O) |
| ^#(^ | ^#(^ | (~~) | (~~) |
| x_x | x_x | **== | **== |
| :!! | :!! | ~:> | ~:> |
| \m/ | \m/ | :(|) | :(|) |
| :-bd | :-bd | 3:-O | 3:-O |
| :-q | :-q | :@) | :@) |
| >:) | >:) | %-( | %-( |
| #:-S | #:-S | :-?? | :-?? |
| :-S | :-S | :o3 | :o3 |
| B-) | B-) | <):) | <):) |
| ~:> | ~:> | >:P | >:P |
| X( | X( | :-w | :-w |
| :-O | :-O | :^o | :^o |
| =(( | =(( | @-) | @-) |
| :-* | :-* | #-o | #-o |
| :P | :P | :-? | :-? |
| :"> | :"> | (:| | (:| |
| ~X( | ~X( | <:-P | <:-P |
| :)] | :)] | 8-} | 8-} |
| :-c | :-c | :O) | :O) |
| =; | =; | :-& | :-& |
| :-B | :-B | :-$ | :-$ |
| O:-) | O:-) | [-( | [-( |
| =)) | =)) | %%- | %%- |
| /:) | /:) | @};- | @};- |
| :| | :| | :-< | :-< |
| :)) | :)) | :-SS | :-SS |
| :(( | :(( | =D> | =D> |
| :( | :( | =P~ | =P~ |
| :-h | :-h | (*) | (*) |
| :-t | :-t | :-j | :-j |
| 8-> | 8-> | ^:)^ | ^:)^ |
| I-) | I-) | :-@ | :-@ |
| 8-| | 8-| | ;)) | ;)) |
| L-) | L-) | >:/ | >:/ |
| >:D< | >:D< | \:D/ | \:D/ |
| ;;) | ;;) | [-X | [-X |
| [-O< | [-O< | :)>- | :)>- |
| :-L | :-L | b-( | b-( |
| >-) | >-) | :-" | :-" |
| =:) | =:) | $-) | $-) |
| (%) | (%) | o=> | o=> |
| o-+ | o-+ | o-> | o-> |
| :x | :x | ;) | ;) |
| :-/ | :-/ |
Hi Gman!
ReplyDeleteBlog của Gman có khá nhiều bài hay. Anh xin copy lại một số bài anh thích nhé. Cám ơn chú!
Bài viết rất hữu ích. Xin hỏi có thể nào thay thế mấycái ảnh YM thành ảnh Emo khác không? nguồn ảnh dùng của photobucket.
ReplyDeletehey man, it really works. Awesome! you're so great gman ^^.
ReplyDelete@vợ cả ;))
ReplyDeletechồng mà :bz
bạn hoàn toàn có thể thay đổi các emoticon có sẵn. Hãy download file Emoticon.js về rồi thêm dòng
ReplyDeletes = s.replace(/Ký_tự/ig, "link_hình"+" style='border:0; margin:0; padding:0;' />");
Ký_tự là Regular Expression nên phải chú ý:
1. trước các dấu [ ] { } \ / ( ) . ? + * ^ $ phải thêm dấu \
2. cái dấu <, >, & phải đổi thành <, >, &
Sau khi chỉnh sửa xong, hãy up lên 1 host nào đó, rồi sửa:
<script src='http://site.gman.googlepages.com/Emoticon.js' type='text/javascript'/>
thành link của file bạn mới up.
Hi, cám ơn đã trả lời cm nhé. EA sẽ thử nếu thành côgn sẽ đãi bạn 1 chầu...emo onion ^^
ReplyDeleteem cũng sẽ thử viết lại code sao cho người dùng dễ thêm emoticon mới vào.
ReplyDeleteghê ghê =))
ReplyDeletephức tạp wa' =))
More than one section was found with id: main. Section IDs should be unique.
ReplyDeleteLà sao zậy bạn,hix hix!!!
ý của nó là đã có sẵn 1 cái section có id là main rồi, bạn thêm 1 cái main nữa thì nó bị trùng.
ReplyDeletetheo mình nghĩ thì có lẽ bạn làm sai bước copy vào.
Bạn chỉ cần "bọc" dòng
<div id='emoticon'>
và
</div> <!-- end emoticon -->
bên ngoài cái
<b:section class='main' id='main' showaddelement='yes'>
...
</b:section>
bạn thử lại xem sao
cám ơn vì đã quan tâm tới cái code của mình
Gman
VUI VUI
ReplyDeleteBài này hay quá, minh xin phép bạn được copy để up lên blog của mình nhé, hy vọng bạn cho phép, minh để đường link back tới bài gốc tử tế nghiêm chỉnh, thể hiện sự tôn trọng của phattrienso tới chủ nhân của bài viết.
ReplyDelete@phattrienso: bài này còn nhiều khuyết điểm, tại mình ko có nhiều thời gian sửa chữa, nếu bạn sửa đc cho nó hoàn chình hơn thì thông báo mình nhé. Thanks
ReplyDeleteThực ra mình không phải dân IT nên không rành cho lắm, cũng chỉ tập tành viết blog, trên mạng có gì hay mà áp dụng được thì mình thực hiện và post lại cho tiện tham khảo, ngoài ra, nếu chưa có bài phổ biến bàng tiếng Việt thì mình dịch và soạn lại để up. Rất cám ơn sự quan tâm của Gman.
ReplyDelete:D
ReplyDeleteGman, bài của em ko có ngày tháng, chị ko biết version nào cũ version nào mới cả huhu... cái này khác với cái chị dùng thấy ok là có thêm bước 3 ko hiểu có ý nghĩa gì? Với cả cái http://sites.google.com/site/gman/blogger/emoticon em nói cái nào hấp dẫn hơn, updated hơn thì chị xài luôn cái đó khỏi phải thử qua thử lại.
ReplyDeleteÀ với nữa, em up cái bảng ký tự emoticons lên host nào đó được ko, để chị xin cái link cài thêm image vào bài hay comment gì đó khi cần gõ nhìn cho tiện vì có thuộc hết đâu. Em mà có hướng dẫn cụ tỉ nữa càng tuyệt.
Tks em nhiều và sorry nhé vì chị thấy bài này viết cả 2 năm trời rồi mà giờ chị mới dùng blogger nên mới biết :D
em không hiểu ý chị, em có cái nào cần 3 bước đâu? cái nào em cũng có 2 bước thôi mà.
ReplyDeleteHay hôm nào em với chị chat bằng Y!M ấy, cho tiện nhé :D
Ôi em thân yêu, sorry nhé, chị dùng tạm cái mà replace ký tự thành hình ảnh ấy, thấy cũng ổn ổn nên ko update nữa (update lùi thì chít)... Của chị vẫn ổn, nhưng của một vài bạn chị ban đầu dùng được, sau đó thì bị lỗi code sao đó mà ko comment được nữa nên mấy đồng chí ý gỡ hết ra và dùng chuột kéo emoticons trực tiếp vào bài viết thôi. 1 anh bạn trêu là chị dùng cách đấy ko chuẩn, anh ý tìm được cách mới, mà rồi cái link anh ý gửi chính là cái link này :D nên chị cũng ko hiểu mô tê ra răng :)
ReplyDeletehìhì, chị còn xài là em vui rồi. Em vẫn đang tiếp tục sửa lại code đây, để có bản hoàn chỉnh hơn :D. Hy vọng chị là người đầu tiên sử dụng phiên bản tiếp theo của em :D
ReplyDeleteCám ơn bạn rất nhiều, mình đã làm được theo cách hướng dẫn của bạn rồi,
ReplyDeleteMình rất thích vì có thể chèn những biểu tượng vào các bài viết của mình cho thêm sinh động ..
Chúc bạn vui vẻ :)
thanks
ReplyDeletechúc bạn vui :D
Tùng ơi, chị làm theo hướng dẫn của em thì ok rồi, nhưng mà có điều các emticons cứ bị nhảy xuống hàng ko à. Không cái nào chịu nằm cùng dòng với câu cả! :(( Chắc bọ lỗi chỗ nào em hả?
ReplyDeletehay trên thẻ <body>
ReplyDeletechị thêm vào
<style>
img {display:inline}
</style>
thử xem chị
Hì, chị thử lại được rồi. Cám ơn em nhiều nhé! ;)
ReplyDeleteko có gì đâu chị
ReplyDeleteThanks bro :X
ReplyDeleteChào bạn Gman: hôm trước mình có tạo icon trong blog của mình theo cách hướng dẫn của bạn, mình rất thích vì thấy blog thêm sinh động..
ReplyDeleteNhưng mình đã phải gỡ bỏ phần này rùi bạn ạ, vì các bạn mình nói rằng khi vào blog của mình không thể comment được, sau khi mình gỡ bỏ phần code này và dùng lại code cũ thì lại comment được
Bạn vui lòng cho hỏi có phải là do phần code mới này mà ảnh hưởng đến việc comment trong blog, nếu đúng vậy thì có cách khắc phục không hả bạn? nếu có bạn vui lòng chỉ giúp mình nha...
Many thanks
bạn thử dùng bản mới nhất của mình xem sao
ReplyDeletehttp://gman-blog.blogspot.com/2009/07/emoticon-for-blogger-version-3.html
Chào bạn Gman: hôm trước mình có làm theo hướng dẫn của bạn đổi code đê tạo icon trong blog, mình rất thích vì làm cho blog thêm sinh động, nhưng sau khi mình đổi code và tạo được icon thì các bạn mình nói là không thể comment trong blog của mình được. sau đó mình đã phải gỡ bỏ code, mình rất tiếc :D
ReplyDeleteVậy bạn cho mình hỏi có phải tại thay đổi code nên mới có tình trạng như vậy không? Và nếu thế thì có cách nào khắc phục không hả bạn? Bạn vui lòng cho biết nha, vì mình rất thích chèn những biểu tượng mặt cười đó vào blog của mình..
Many thanks...
mình chưa hiểu lắm về cái việc "không comment được" bạn giải thích rõ hơn đc ko?
ReplyDeletecode này hình như ko hoạt động tốt trên chrome hoạt IE, mình test mãi mà chỉ hoạt động đc trên firefox
ReplyDeleteMình dùng chrome nè bạn, ko có vấn đề gì
ReplyDeleteoh sorry, mình lộn, chỉ có IE là bị trục trặc thôi. Mình dùng IE vô blog của bạn mà nó cũng ko hiển thị mấy cái smiley này, ko bít có cách nào khác phục ko nhỉ
ReplyDeletemình cũng chưa khắc phục đc cái lỗi của IE, bạn thử IE7 và IE8 chưa? IE đang bị thế giới tẩy chay mà, khó có thể fix hết các lỗi cho tất cả các browser lắm :D
ReplyDeleteThanks.
ReplyDeleteHey very nice blog!! Man .. I will bookmark your blog and take the feeds also...
ReplyDeleteTien ich nay kha thu vi cho blog day. http://nvdinh88.blogspot.com
ReplyDeletecảm ơn bạn
ReplyDeletecơ mà bạn ơi, mở file js kiểu j?:-s
bạn dùng notepad hay wordpad gì cũng mở đc hết.
ReplyDeletethx bạn:D
ReplyDeletethanks for your post !
ReplyDelete