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

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 đỏ 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(&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.