Đưa biểu tượng cảm xúc vào bài viết và nhận xét Blogger

Sau khi tạo được cách đưa biểu tượng cảm xúc :4) vào nhận xét, mình vẫn trăn trở về việc làm cách nào để đưa biểu tượng cảm xúc vào bài viết Blogger. Lang thang trên mạng Internet mình tìm thấy nhiều blogger bình luận về đề tài này. Đối với Wordpress thì việc đưa biểu tượng cảm xúc vào bài viết thật quá dễ dàng bởi vì Wordpress có tính năng tự động chuyển các nhóm ký tự định sẵn thành các biểu tượng cảm xúc. Tuy nhiên đối với Blogger thì không có tính năng đó. Chẳng lẽ Blogger đành bó tay hay sao? :20)

Sau nhiều lần lang thang Internet, mình lại học hỏi thêm nhiều điều thú vị, phát hiện Cộng đồng Blogger có nhiều bài viết giới thiệu cách đưa biểu tượng cảm xúc vào bài viết Blogger nhờ đến addon Greasemonkey của Firefox để cài đặt vào công cụ đăng bài viết của Blogger (Edit Posts). Ví dụ như ở Blog Blog Blogger-emoticon hay Blog Boyprod. Và tất nhiên các thủ thuật này chỉ hiển thị trên công cụ trình duyệt Firefox mà thôi, thật buồn cho Internet Explorer quá. :10)

Qua quá trình miệt mài nghiên cứu, cuối cùng mình đã thử nghiệm thành công thủ thuật Đưa biểu tượng cảm xúc vào bài viết và nhận xét Blogger (Emoticons for Blogger Posts and Comments) hoạt động trên tất cả các công cụ trình duyệt. Có lẽ đây là một trong những tin vui :6) dành cho những người yêu thích Blogger.

Nét độc đáo của thủ thuật này là có thể đưa biểu tượng cảm xúc vào bài viết, vào nhận xét (của độc giả và của tác giả/admin), vào cả tiện ích (widget).

Xem Demo.

Mình cho rằng bạn sẽ thích thủ thuật này và nghĩ ngay đến việc cài đặt cho blogspot của mình. Hãy làm theo các bước sau đây.

1. Vào Settings (Cài đặt) >> Comments (Nhận xét) >> chọn Embedded below post (Nhúng bên dưới bài đăng) rồi nhấn Save Settings (Lưu Cài đặt).

2. Vào Design (Thiết kế) >> Edit HTML (Chỉnh sửa HTML) chọn Expand Widget Templates (Mở rộng mẫu tiện ích).

Tìm dòng <b:if cond='data:post.embedCommentForm'> và đặt sau nó với toàn bộ đoạn code sau đây.

<div style='width: 383px; text-align: left; border: 1px solid #cdc9c9;margin:0px auto; padding: 5px; background: #eee9e9; height:86'>
<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/5.gif' width='18'/>w-)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/78.gif' width='26'/>:-j
<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/104.gif' width='30'/>:-T
<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/25.gif' width='30'/>o%
<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'/>=))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif' width='18'/>:-?
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif' width='28'/>:-h
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif' width='21'/>I-)
</b>
</div>

3. Tiếp tục đặt đoạn code dưới đây vào trước thẻ </body>.

<script src='http://hacodeproject.googlecode.com/files/emoticon4blogger.js' type='text/javascript'></script>

Lưu Template là OK.

Như vậy mỗi khi bạn viết bài hay viết nhận xét, nếu muốn đưa biểu tượng cảm xúc vào thì chỉ cần đánh nhóm ký tự đại diện cho biểu tượng cảm xúc tương ứng thì sẽ thành công.