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

in Thủ Thuật Blog | 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>

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

7. Thêm đọan code màu đỏ và 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("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; 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.

80

: Không phải spam nhé, mình test thử xem, bên mình gắn vào không chạy :D
: uh :D
: à 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.
: Tùy vào từng template mà có id khác nhau, không nhất thiết phải là "comments" :)
: uh đúng rồi, mỗi template sẽ có nhưng id, class khác nhau, nhưng đa số là tương tự.
: 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
: =)) Có cái dành cho bài viết ko anh !
: được luôn em à.

Nếu muốn anh có thể post 1 bài :D
: @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
: :D demo
: 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.
: :)) , hic sao lại ko làm đc blog mình nhỉ
: @Max4download : bạn phải đợi blog load hết thì hình nó mới hiển thị đc
: :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) <<< Testing
: Love it !! :X
: hjc hjc em làm ko dc bác
: 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.
: coi bằng ie ko dc fifox lại coi dc bác
: :(
: =))
: :))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
: trên đó là hướng dẫn rồi, ban muốn mình hướng dẫn vấn đề nào nữa ???
: 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
: 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 !!!!
: 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...
: 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 đỡ .
: hê hê anh Dũng. :D
của em nó cũng không hiện emoticon.
: 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.
: @Bình Dương : cái này bạn có thể dùng Comment Media.
: Nhiều emo chưa có =P~ :X :x
: :-"


: :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
: :)) 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
: =))
: :))
: :)) sao em làm nó ko hiẹn emo ra ta
: :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))
: :))
: Khà khà cái này có vẻ zui nhỉ :))
: 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è
: :)) ;)) ;;) :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( =)) :)) ;)) ;;) :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-} :)]
: ;)) ;)
: =))
: :))
: Nó ko hiện lên được pác admin ơi :((
: Testttttt :)) ;)) ;;) :D ;) :p :99 :) :( :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( =))
: :))
: :))
: :))
: =))
: =))
: anh ơi, file java die rồi, anh up lại được ko
: :))
: :))Bây giờ mới biết blog của bạn, cố gắng thực hành xem có được không
: 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
: :))
: :))
: :(( sao em thêm vào ko đc âu
: 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
: :D
: test :D
: Hiện được icon ở phần trích dẫn nhưng k hiện ở phần nội dung comment :(
: :))
: :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) hay ! thank anh
: cho mãi ko đc mới ức chứ /:)
GREEN VIETNAM
: 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 "".
:((
: :D cảm ơn anh^^
: 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 :)
: Làm theo cách FD hướng dẫn, nhưng dù ko hiện khi ta sử dụng ở các comment..
: :)) sao mà hok chạy đc smile vậy
: 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/
: 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.