Emoticon cho Blogger - updated

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ừ DashboardEdit 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 ;) ;)
:-/ :-/    

 

41 comments:

  1. Hi Gman!

    Blog 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ú!

    ReplyDelete
  2. 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.

    ReplyDelete
  3. hey man, it really works. Awesome! you're so great gman ^^.

    ReplyDelete
  4. 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
    s = 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 &lt;, &gt;, &amp;

    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.

    ReplyDelete
  5. 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 ^^

    ReplyDelete
  6. em cũng sẽ thử viết lại code sao cho người dùng dễ thêm emoticon mới vào.

    ReplyDelete
  7. ghê ghê =))
    phức tạp wa' =))

    ReplyDelete
  8. More than one section was found with id: main. Section IDs should be unique.
    Là sao zậy bạn,hix hix!!!

    ReplyDelete
  9. ý 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.
    theo 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'>

    </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

    ReplyDelete
  10. Bà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
  11. @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

    ReplyDelete
  12. Thự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
  13. Gman, 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.

    À 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

    ReplyDelete
  14. 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à.
    Hay hôm nào em với chị chat bằng Y!M ấy, cho tiện nhé :D

    ReplyDelete
  15. Ô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 :)

    ReplyDelete
  16. hì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

    ReplyDelete
  17. Cá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,
    Mì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ẻ :)

    ReplyDelete
  18. 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ả?

    ReplyDelete
  19. hay trên thẻ <body>
    chị thêm vào
    <style>
    img {display:inline}
    </style>

    thử xem chị

    ReplyDelete
  20. Hì, chị thử lại được rồi. Cám ơn em nhiều nhé! ;)

    ReplyDelete
  21. Chà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..
    Như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

    ReplyDelete
  22. 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
    Vậ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...

    ReplyDelete
  23. 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?

    ReplyDelete
  24. code 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

    ReplyDelete
  25. Mình dùng chrome nè bạn, ko có vấn đề gì

    ReplyDelete
  26. oh 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ỉ

    ReplyDelete
  27. mì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

    ReplyDelete
  28. Hey very nice blog!! Man .. I will bookmark your blog and take the feeds also...

    ReplyDelete
  29. Tien ich nay kha thu vi cho blog day. http://nvdinh88.blogspot.com

    ReplyDelete
  30. cảm ơn bạn
    cơ mà bạn ơi, mở file js kiểu j?:-s

    ReplyDelete
  31. bạn dùng notepad hay wordpad gì cũng mở đc hết.

    ReplyDelete
  32. thanks for your post !

    ReplyDelete

You can use some HTML tags, such as <b>, <i>, <a>