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 Yahooemoticons người củ hành vào Blogger ở những bài viết trước, 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à 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>
Hãy xóa chúng và thay thế bằng code dưới đây
<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 khi đã thay đổi xong, bạn hãy kéo xuống tận cùng template và thêm đoạn code này vào ngay trước thẻ </body>
<script src='http://boyprodx.110mb.com/Yahoo_Emoticons_Comment_Blogger.js' type='text/javascript'/>

Đây là kết quả chụp từ blog của mình :

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 !

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

NAD on 21 December 2008 at 22:40 said...

Thủ thuật hay lắm, giao diện blog cũng đẹp hơn trước :D

Andy Nguyen's World on 22 December 2008 at 00:54 said...

Thnks!Mình thấy đẹp hơn, nhưng sao không có tác dụng:((. Đây là hướng dẫn để ng khác comment bằng cách gõ theo ký tự như trên ah, không click vào trực tiếp được sao??

aaa said...

:X

Benjami Tennyson on 22 December 2008 at 15:01 said...

@NAD : Thanks
@Andy Nguyen : Đúng vậy, để sự dụng tính năng này thì đòi hỏi người dùng phải chịu khó gõ các kí tự. Nhưng mình thấy điều này chẳng gây phiền phức gì mấy bởi vì trên Yahoo Messenger, chúng ta vẫn thường hay gõ các kí tự tắt của emoticons đấy thôi.
@aaa : Bạn có điều gì muốn nói à :D

Pika Rock on 25 December 2008 at 10:41 said...

merry Xmas ae ;)

Ngankvn ® on 26 December 2008 at 14:19 said...

Mình không tìm thấy dòng <div class="comment-footer"> mà chỉ thấy dòng :
<p class='comment-footer'> thôi , làm sao để thực hiện tiếp ???

Benjami Tennyson on 26 December 2008 at 18:35 said...

@Ngankvn : Vậy à ! Bạn cứ backup lại template rồi thử thay đổi y như hướng dẫn xem được không. Nếu không thì bạn vui lòng cho mình mượn mã nguồn template của bạn nhé, nếu chỉnh được mình sẽ báo lại bạn.
Hầu hết mọi template khi bật Mở rộng mẫu tiện ích thì chỉ có 1 dòng <div class="comment-footer"> nên việc thay đổi rất dễ dàng. Có lẽ template của bạn khi được tạo, tác giả đã chỉnh sửa hơi nhiều nên bị thiếu sót.

Ngankvn ® on 26 December 2008 at 18:55 said...

Ha ha vấn đề đơn giản hơn mình nghĩ : chỉ việc cho cái file js của cậu vào template thôi , còn cái mục trên không dùng , mới đầu mình tưởng nó là phần bắt buộc - thì ra chỉ để minh hoạ thôi :D
Thank nhé !!

Benjami Tennyson on 26 December 2008 at 19:37 said...

@Ngankvn : À, mục trên là để mọi người comment biết kí hiệu tắt của emoticons , chứ không có tác dụng thay thế , cái quan trọng là file javascript. Chúc blog bạn luôn phát triển nhé. ^^!

iuconan on 12 January 2009 at 10:47 said...

hix, tình hình làm mình đã thử thay đổi code lung tung :D, chỉ cần thêm cái script trc -body vậy mà vẫn hem đc, hứt hứt

mún thử tất cả các chức năng trong blog của bạn nhưng cuối cùng làm đc mỗi cái widget đếm số comment :(

Raul on 15 January 2009 at 22:36 said...

làm ko dc gi hết

Benjami Tennyson on 16 January 2009 at 10:16 said...

@iuconan : Có lẽ bạn nên tìm 1 template khác thích hợp hơn, điều này sẽ giúp bạn có thể tùy biến được template của blog dễ dàng hơn. đồng thời tạo 1 giao diện hoàn toàn mới cho Blog của bạn.
@Raul : Bạn nên đọc kĩ lại bài viết, có thể trong lúc chỉnh sửa bạn gặp sai sót, hoặc do mã nguồn HTML của template không thích hợp.

JEFFERSON LA [JEFFY] on 22 March 2009 at 10:43 said...

Bạn ơi , mình đưa cái mã HTML của mình cho bạn , bạn làm dùm mình với , mình thích cái này lắm mà không tìm ra cái class="comment-footer"> , buốn quá . Được kho6ng vậy bạn ?

Benjami Tennyson on 23 March 2009 at 19:13 said...

Nếu bạn không tìm thấy đoạn comment-footer , giống trường hợp của bạn Ngân bên trên, thì bạn chỉ cần chèn mã javascript vào trước /b:skin là đủ rồi.
Đoạn code thay đổi đó chỉ có tác dụng làm hiện bảng thông báo các emoticons có thể dùng, chứ không có tác dụng chèn emoticons.

Phước on 28 March 2009 at 17:58 said...

Nhưng nó không chạy kìa anh xem lại giúp em đi.

Benjami Tennyson on 29 March 2009 at 12:35 said...

@Phước : Nhiều blogger đã thử thủ thuật này rồi nên bạn an tâm là không phải do file .js hư đâu . Bạn vào đây comment thử xem nào.
Có thể do Blog bạn nặng quá nên dẫn đến các emoticons không load kịp. Khuyên bạn nên hạn chế dùng slideshow dạng Flash nhé. Nó sẽ làm chậm tốc độ tải của Blog đấy !

heyyyyyyyyyyyy said...

addmin ơi có thể làm được mấy cái hình khác được không mấy hình này thấy nó không vui.
giống như khỉ yoyo có làm vi6 được không vậy. ???

heyyyyyyyyyyyy said...

hình như hồi trước mình làm cái này rồi nên không tìm được div class="comment-footer"

bạn có biết đoạn code trên bỏ ở trên đoạn code nào và đưới đoạn code nào không.

nếu được thì mình khỏi cần biết div class="comment-footer" nó nằm ở đâu

scandal 9x vn on 7 April 2009 at 12:13 said...

sao làm hoài ko dc dzậy trời hjc hjc

Benjami Tennyson on 8 April 2009 at 18:32 said...

@heyyy : Mình ko chắc với bạn rằng vị trí của div class="comment-footer" có khác nhau ở mỗi template không. Ở template mình đang test, thì nó nằm ở giữa khoảng này, bạn xem hình.
@scandal 9x vn : Thủ thuật này , quan trọng là chỉ cần thêm file .js vào template là hoạt động được mà bạn. Bạn check lại dùm mình nhé.

KjnG on 16 April 2009 at 13:38 said...

mình đã làm thử nhưng khi test thì comm vẫn ko hiện lên icon

Benjami Tennyson on 17 April 2009 at 18:16 said...

@KjnG : Bạn vui lòng sửa link file .js thành link mới ở host 110mb.com mình vừa đưa lên nhé. Trang javascripthost.com dạo này bị trục trặc nên ko load được file .js . Cám ơn bạn đã thông báo !

KjnG on 17 April 2009 at 23:57 said...

thú vị thật. blog mình đã hiện lên icon ở phần comm rồi. thx bạn nha ^^ Còn phần icon ở bài post thì mình sẽ nghiên cứu tiếp. Blog của bạn rất hay đó ^^. Nice to meet u

Benjami Tennyson on 18 April 2009 at 18:31 said...

@KjnG : U're welcome :D

Anonymous said...

rr

7on7 on 31 May 2009 at 18:53 said...

bài viết rất bổ ích :)

Góc Nhìn on 4 June 2009 at 02:28 said...

Rất thú vị, cảm ơn bạn ;)

Anonymous said...

:p

Nguyễn Sỹ Bằng on 7 June 2009 at 12:20 said...

:)) khong phai moi template deu lam giong nhu the, may mo moi ra duoc

boyproDX on 7 June 2009 at 17:28 said...

@Nguyễn Sỹ Bằng : Thủ thuật này dùng JS để hoạt động mà, đâu phải thay đổi template gì đâu :| .
Chúng ta chỉ cần chèn code của file JS vào trước thẻ /body là ok rồi. Còn mấy cái 'râu ria' phía trên thì mình có nói là ko quan trọng :D , thêm vào cũng đc mà ko thêm cũng chả sao .

soft-hot on 30 June 2009 at 08:20 said...

mình chèn vào mà không được nhỉ :((

Anonymous said...

vớ vẩn quá, không hiển thị ra ngay cả trên blog của chủ nhân bàiviết thì còn làm ăn gì =))

boyproDX on 7 July 2009 at 02:45 said...

Ủa, mình thấy hiện rõ ràng mà :|. Bạn thử lại dùm mình xem :|

m3onh0x84 on 13 July 2009 at 19:41 said...

hix, em dò code thế quái nào tìm mãi k0 ra đoạn code cũ để thay code của anh vào, chán quá. Blogger em khô khan quá :((

boyproDX on 14 July 2009 at 01:24 said...

@m3onh0x84 : Đa số template đều có mã nguồn ko giống nhau, nên có thể bạn không tìm thấy. Mình có hướng khắc phục, bạn thử xem nhé :
- Mở rộng Template và tìm code b:if cond='data:post.embedCommentForm'.
- Sau khi tìm ra, copy toàn bộ code ở trên bài viết từ [b][table]...[/b] và dán ngay bên dưới đoạn b:if (bạn thay dấu [,] thành 2 thẻ đóng <,> dùm mình nhé. Save lại và kiểm tra.
Hy vọng sẽ giúp ích cho bạn. Thân!

Ly Ly Na on 20 August 2009 at 04:05 said...

:)) hay ghê mà mình thay đổi một số thứ giờ ko ra :D

NAD on 16 September 2009 at 23:59 said...

=P~ 8-x

Linh on 17 December 2009 at 19:48 said...

cám ơn nhìu :)

Anonymous said...

;)

yeuthuthuat on 19 February 2010 at 20:51 said...
This comment has been removed by the author.
Quanghieu97 on 27 May 2010 at 11:26 said...

:D hay

Anonymous said...

camm on da chia se nhe ;)

A3FC on 26 October 2011 at 12:33 said...

bài viết không hiệu quả. có vẻ chả ai làm đc

chautuan.duong on 7 January 2013 at 15:34 said...

;;), tuyệt lắm

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3