Chèn emoticons (biểu tượng cảm xúc) của Yahoo vào phần Comment trong Blogger (Blogspot)

Mình đã từng hướng dẫn cách chèn emoticons yahoo và emoticons người củ hành vào Blogger, nhưng các thủ thuật này chỉ hiệu quả ở trong bài viết. Tuy nhiên, Blogger vẫn chưa có bộ emoticons dành cho phần comment của độc giả - Đây là 1 điều thua thiệt so với WordPress. Vậy làm cách nào để thêm biểu tượng cảm xúc vào phần comment được đây? Bài viết này sẽ giúp các bạn đấy !
Đầu tiên, các bạn hãy hãy vào Blogger > Layout > Edit HTML . Tại đây, hãy download lại một bản template phòng trường hợp chỉnh sửa sai
Tiếp theo, các bạn hãy bật Expand Widget Templates (Mở rộng mẫu tiện ích) và thêm đoạn code này vào ngay trước thẻ </body>

<script src='http://javascripthost.com/s1/bin/smileysver1.js' type='text/javascript'/>

Với đoạn java này được add vào templates thì phần comments đã thể hiện được emoticons rồi. Tuy nhiên để chỉ dẫn cho người đọc rõ ràng các bạn nên thêm đoạn sau: bật Expand Widget Templates (Mở rộng mẫu tiện ích) và tìm đoạn code sau

<div class="comment-footer">
<b:if cond="data:post.embedCommentForm">
<b:include data="post" name="comment-form">
<b:else>
<b:if cond="data:post.allowComments">
</b:if></b:else></b:include></b:if></div>
<h3>
<a expr:href="data:post.addCommentUrl" expr:onclick="data:post.addCommentOnclick" href="http://draft.blogger.com/post-create.g?blogID=4157678335535108976">
<data:postcommentmsg></data:postcommentmsg></a></h3>

Và thay chúng bằng đoạn sau - nhớ là xóa đi và thay toàn bộ nhé (Bước này giúp hiển thị bằng smile cho blog, các bạn thông thuộc hoặc muốn điều chỉnh có thể tìm đến đoạn phù hợp nhất)

<p class='comment-footer'>
<b:if cond='data:post.allowComments'>
</b:if>
<b:if cond='data:post.embedCommentForm'>
<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 400; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #fff; height:80'>
<b>
<table><tr>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :)) </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;)) </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;) </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;) </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :(( </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :) </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :( </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X </td></tr>
<tr>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =(( </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/ </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-* </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :| </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-} </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)] </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-( </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L </td>
</tr></table>
</b>
</div>
<b:include data='post' name='comment-form'/>
<b:else/>

</b:if>
</p>
</b:if>

sau đó bấm vào xem thử xem có hoạt động tốt không rùi hãy lưu lại nhé.

Đây là ảnh chụp kết quả:

Vậy là từ nay chúng ta có thể thêm biểu tượng cảm xúc mỗi khi đăng nhận xét rồi. Nếu thích thủ thuật này hãy để lại comment cho mình như một lời động viên nhé. Chúc các bạn thành công !

Update bài viết:
Bạn có thể thay đổi dễ dàng emoticons sử dụng bằng cách thay đổi code javascript ở trên. Hãy load đoạn java sau về và thay đổi hình ảnh smile yahoo bằng hình ảnh bạn thích

Click here - Bấm vào đây

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

Các bài liên quan

Thủ thuật Blog

• Tạo chữ kí online với Mylivesignature.com và ứng dụng của nó cho blog
• Chuyển từ blog yahoo 360 sang blog khác hiệu quả với 360EXP
• 10 mẹo cho người mới dùng blogger blogspot
• Thêm phần "Các bài liên quan" vào cuối bài viết một cách dễ dàng
• [Công cụ] Mặt cười cho Yahoo