Thêm biểu tượng vui cho comment

[Vnadmin] - 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, và mình cảm thấy nó rất tiện dụng trong cộng đồng blogger hiện nay nên mình cũng đã sưu tầm được và hôm nay xin đăng lại cho mọi người cùng xem. Thủ thuật này còn có thêm hiệu ứng khá đẹp mắt là ẩn hiện tab chú thích những kí hiệu cho các biểu tượng.

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 hoàn toàn 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.

☼ 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://luat1x1.googlecode.com/files/Smile.js' type='text/javascript'/>

6. Rồi tìm đến đoạn 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à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.

Nguồn Fandung