Loading post navigation ...
 
 

Pro page

80
Nhận xét

Modify Form comment : Bài 6 - Thêm biểu tượng vui cho comment + Ẩn hiển bảng chú thích các biểu tượng

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Add emoticons to comment form and Show/Hide tab emoticon
[FD's BlOg] - Thủ thuật này có lẽ khá quen thuộc với nhiều người, tuy nhiên một số bạn sẽ chưa biết, hơn nữa thủ thuật này trên blog mình chưa có, nay mình xin post 1 bài hướng dẫn luôn. Ngoài ra thủ thuật này sẽ có kèm theo hiệu ứng ẩn hiện tab chú thích những kí hiệu cho các biểu tượng.


Hình minh họa:


Minh họa thủ thuật ẩn hiện tab chú thích:




Để các biểu tượng được hiển thị khi ta gõ các phím tắt thay thế thì ta phải dùng tới 1 đọan code javascript, đọan javascript này có tác dụng thay thế các kí tự chữ cho các hình ảnh. Do đó cơ bản ta hòan tòan có thể thay thế các kí tự và các hình ảnh tương ứng với nó thành các kí tự và hình ảnh khác.
Để minh họa điều này mình sẽ mình sẽ cho các bạn xem 1 đọan code nhỏ trong file smiles.js:

_str = _str.replace(/:\(\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' alt='' class='smiley'/>");

- Với đọan code trên: code màu đỏ sẽ là các kí tự thay thế, code màu xanh chính là hình ảnh tương ứng với kí tự đó.
- Để đổi ảnh khác, bạn chỉ việc thay thế link ảnh khác.
- Lưu ý: điều này mình chỉ giới thiệu cho các bạn biết thêm, nếu ai không rành thì không nên sửa code javascript, có thể sau khi sửa code sẽ không chạy được. Do đó cứ để nguyên mà xài thì vẫn tốt hơn.

☼ Bây giờ ta bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào bố cục (Layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Chọn mở rộng mẫu tiện ích (expand widget template)
5. Trước tiên chèn đọan code javascript bên dưới trước dòng </body>

<script src='http://data.fandung.com/js/smiley.js' type='text/javascript'/>


6. Tìm đến đọan code như bên dưới:

<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/> </h4>

<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='417'/>
<data:post.iframeColorizer/>
</div>

7. Thêm đọan code màu đỏxanh vào như bên dưới:

<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/> </h4>

<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>

<script type='text/javascript'>
//<![CDATA[


if(typeof(rnd) == 'undefined') var rnd = '';

rnd = Math.floor(Math.random()*1000);

rnd = 'id-' + rnd;

document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="text-decoration : none;float:left;margin-right:5px;">');


//]]>

</script>[▼/▲]


<script type='text/javascript'>
//<![CDATA[

document.write('</a>');


//]]>

</script>


<b> More Emoticons </b>

<script type='text/javascript'>
//<![CDATA[

document.write('<div id="' + rnd + '" style="display:none;">');

//]]>

</script>

<div style='width: 369; 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/104.gif' width='30'/> :-t

<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'/> =))

</b>


</div>


<script type='text/javascript'>
//<![CDATA[
document.write('</div>');

//]]>

</script>


<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='417'/>
<data:post.iframeColorizer/>
</div>

- code màu xanh là code tạo hiệu ứng đóng mở khung tab chú thích, code màu đỏ là code của khung tab chú thích.

8. Save template.

Chúc các bạn thành công.


Enter your mail address:

80

Khách (ẩn danh)

Không phải spam nhé, mình test thử xem, bên mình gắn vào không chạy :D

fandung-tester

uh :D

fandung-tester

à wên nữa, tiện ích không hiển thị trên ở bản IE dưới 6,

và thứ 2 nữa là phải đợi blog load xong hình mới hiển thị được.

Unknown

Tùy vào từng template mà có id khác nhau, không nhất thiết phải là "comments" :)

fandung-tester

uh đúng rồi, mỗi template sẽ có nhưng id, class khác nhau, nhưng đa số là tương tự.

MrHungLe

thủ thuật này chạy ổn lắm, rất hay và gọn cho blog. Vote 5 star cho thủ thuật này

Huy

=)) Có cái dành cho bài viết ko anh !

fandung

được luôn em à.

Nếu muốn anh có thể post 1 bài :D

fandung

@Naruto_thf90 : Anh đã post bài "Chèn Emoticons vào form sọan thảo bài viết" rồi đó, em có thể vào đây để xem:
http://fandung.blogspot.com/2009/05/thu-thuat-yeu-cau-chen-bieu-tuong-vui.html

Khách (ẩn danh)

:D demo

Tiếng Khmer Online

Sau khi mình chèn vào thì được thì ô soạn thảo comment không xuất hiện. Không biết lỗi do đâu, mặc dù mình đã làm đúng hướng dẫn. Đây là blog của mình: http://www.traimientay.com Bạn vào và kiểm tra giúp mình sửa lại nhé! ThankS.

Max4download

:)) , hic sao lại ko làm đc blog mình nhỉ

Phan Dũng

@Max4download : bạn phải đợi blog load hết thì hình nó mới hiển thị đc

Violet ♥

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) <<< Testing

Violet ♥

Love it !! :X

scandal 9x vn

hjc hjc em làm ko dc bác

Phan Dũng

scandal 9x vn : ko phải ko đc đâu bạn, muốn hiển thị đc các hình thì blog phải load hết nó mới hiển thị được.

Khách (ẩn danh)

coi bằng ie ko dc fifox lại coi dc bác

Khách (ẩn danh)

:(

Admin

=))

Khách (ẩn danh)

:))Ko lam được, bạn ơi. Bạn hướng dẫn cụ thể cách chèn hình vào nhận xét đi (nhận xét ngay trên blog của bạn ý). Cảm ơn nhiều

fandung

trên đó là hướng dẫn rồi, ban muốn mình hướng dẫn vấn đề nào nữa ???

Khách (ẩn danh)

Bạn ơi, sau khi mình thêm được các biểu tượng như hướng dẫn thì blog mình bị thông báo là có SPAM. Có cách nào giải quyết ko? Cảm ơn bạn nhiều

Unknown

Làm sao để cái Code "xem - ẩn" này nó mặc định ở chế độ "xem" Dzũng nhỉ ??? click vào mới ẩn đi ấy !!!!

Hiệp Cò

Nghèo nghèo cũng ráng cho thằng tèo có domain...Bọn VNPT này chuyên môn chặn anh em blogspot...

kh48b

Xin lỗi bạn, mình làm đúng các bước rùi, có hiện phần show/hide ở cm nhưng các emoticon ko hiện lên trong phần comments, mong bạn giúp đỡ .

mmovn

hê hê anh Dũng. :D
của em nó cũng không hiện emoticon.

Bình Dương

Bài viết của bạn hay quá. Xin cảm ơn bạn nhiều.:) Bạn cho mình hỏi thêm là có thể chèn link trong phần comment để thêm ảnh hoặc đoạn nhạc vào được không.

Phan Dũng

@Bình Dương : cái này bạn có thể dùng Comment Media.

Khách (ẩn danh)

Nhiều emo chưa có =P~ :X :x

Khách (ẩn danh)

:-"

123
Vinh Le
hasblog

:p không lam được nó báo như thế này :Thông báo lỗi XML: The element type "b:includable" must be terminated by the matching end-tag "".
botay rùi

hasblog

:)) của mình nó hiện lên rồi nhưng không sử dụng được. Nhưng dù sao vẫn cám ơn bạn. vote vì sự chia sẻ thủ thuật của bạn

nguyentien

=))

danghienIT

:))

Khách (ẩn danh)

:)) sao em làm nó ko hiẹn emo ra ta

Khách (ẩn danh)

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Admin Show9VIP.Com

:))

Khách (ẩn danh)

Khà khà cái này có vẻ zui nhỉ :))

Khách (ẩn danh)

sao minh làm được nhưng mình làm giả nặc danh comment thử k thấy hiện biểu tượng hè

Khách (ẩn danh)

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Khách (ẩn danh)

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Khách (ẩn danh)

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Khách (ẩn danh)

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)]

Khách (ẩn danh)

;)) ;)

Khách (ẩn danh)

=))

Khách (ẩn danh)

:))

Jack

Nó ko hiện lên được pác admin ơi :((

Khanh Nguyen

Testttttt :)) ;)) ;;) :D ;) :p :99 :) :( :X =((

Tuấn

:))

Bùi Huệ

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Mr.ZeroT

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

thanhdanh119

:))

thanhdanh119

:))

dunghennessy

:))

BinBinBlogs

=))

Khách (ẩn danh)

=))

Khách (ẩn danh)

anh ơi, file java die rồi, anh up lại được ko

—»™Kyon kull

:))

Công Nguyễn

:))Bây giờ mới biết blog của bạn, cố gắng thực hành xem có được không

Khách (ẩn danh)

anh ơi giúp em với có hiện ra bảng More Emoticons
nhưng ấn vào emo thì ko dc gi` copy '=))'
nó cũng ko hiện

HASACONS VIET NAM

:))

Thpt Hoài Đức A

:))

Công tác Viên

:(( sao em thêm vào ko đc âu

Thủ thuật máy tính

Cái này hay đấy nhưng nó không hiện phần More Emoticons như trang này. thế thì chịu

Bknix

:D

*Fabie*

test :D

Admin

Hiện được icon ở phần trích dẫn nhưng k hiện ở phần nội dung comment :(

Kinhatula(admin)

:))

Unknown

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) hay ! thank anh

Thế Này Nhé

cho mãi ko đc mới ức chứ /:)
GREEN VIETNAM

Thế Này Nhé

Mẫu của bạn không thể được phân tích cú pháp vì được tạo không đúng. Hãy đảm bảo tất cả các phần từ XML được đóng chính xác.
Thông báo lỗi XML: The element type "b:includable" must be terminated by the matching end-tag "".
:((

Vân Hạnh

:D cảm ơn anh^^

Hoa Quach

FD cho mình hỏi, làm cách nào để chỉnh lại khoảng cách căn lề trái của box Emoticons...

Ví dụ : http://www.quachben.com/2012/05/file-hosts-truy-cap-facebook-052012.html <== Cái ký hiệu ẩnh - mở và khung Emo đều lấn sát lề, mình muốn canh lại cho đều, hợp với template thì phải làm sao?

nhờ FD giúp đỡ, xin cảm ơn :)

Hoa Quach

Làm theo cách FD hướng dẫn, nhưng dù ko hiện khi ta sử dụng ở các comment..

Gà Con

:)) sao mà hok chạy đc smile vậy

Unknown

Fandung cho mình hỏi,tại sao sau khi dán những code trên save lại thì ngay lập tức mình bị tự chuyển sang trang có link dưới đây vậy? Buốc lòng mình phải xóa tất cả nhửng gì làm từ nãy giờ để chờ Fandung xem lại code.Mình muốn cài thủ thuật này.Nó tự qua lick như dưới đây :
http://data.fandung.com/

Unknown

Do cái đoạn code js của bạn ,giờ mình xóa đi thì không bị chuyển qua trang http://data.fandung.com/ nữa.Mình vẫn để code của bước 2 trong CSS để chờ bạn nghiên cứu lại giúp mình.Cám ơn.



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home