"Thủ thuật chèn biểu tượng cảm xúc vui vào comment cho Blogspot"

(Traidatmui.com) – Thời gian qua có một số bạn yêu cầu mình hướng dẫn cách để chèn biểu tượng cảm xúc cho Blogger, nên hôm nay mình xin chia sẻ cùng các bạn thủ thuật này. Thật ra thì thủ thuật này đã được một số Blogspot hướng dẫn cách chèn biểu tượng này cho phần comments của Blogspot như Blog Nhật Hà hay Blog Fandung. Mỗi blog có một cách chèn khác nhau và nó cũng có những ưu điểm riêng và cách trình bày các biểu tượng khác nhau. Để giúp những bạn chưa biết cách thực hiện việc này mình xin chia sẻ thủ thuật này với cách trình bày các biểu tượng dạng ẩn hiện khi click vào more hay less.
Hình ảnh minh họa
Kết quả sau thủ thuật này
» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng tiện ích (Expand Widget Templates)
5. Chèn code bên dưới vào trước thẻ </body>
<script type='text/javascript'>
/* <![CDATA[ */
function moreEmotion() {
document.getElementById('emotion-more').style.display = 'inline';
document.getElementById('emotion-toggle').innerHTML = '<a href="javascript:lessEmotion()">« less</a></span>';}
function lessEmotion() {
document.getElementById('emotion-more').style.display = 'none';
document.getElementById('emotion-toggle').innerHTML = '<a href="javascript:moreEmotion()">more »</a>';
}
/* ]]> */
</script>
<script src='http://data-traidatmui.appspot.com/scripts/emotion_comment.js' type='text/javascript'/>

6. Tiếp theo bạn tìm đến code bên dưới hoặc tương tự
<data:blogTeamBlogMessage/>

7. Sau đó chèn code bên dưới vào ngay sau code vừa tìm được
<div style='width:410px;text-align: left; font-weight:bold;color:#000;border: 1px solid #cccccc; padding: 2px; background: #eeeddf;'>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :<strong/>))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;<strong/>))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;<strong/>)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :<strong/>D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;<strong/>)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :<strong/>p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :<strong/>((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :<strong/>)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :<strong/>(<span id='emotion-more' style='display:none'>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :<strong/>X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =<strong/>((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :<strong/>-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :<strong/>-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :<strong/>-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :<strong/>|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8<strong/>-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :<strong/>)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~<strong/>x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :<strong/>-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b<strong/>-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :<strong/>-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x<strong/>(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =<strong/>))</span> <span id='emotion-toggle'><a href='javascript:moreEmotion()'>more »</a></span></div>

8. Cuối cùng save template lại

Bạn chú ý để các biểu tượng cảm xúc vui này hiển thị trong comment của bạn thì nội dung comment phải được bao bởi class="comment-body" trong thẻ <dd> </dd> tương tự như bên dưới (Trong đó dấu (---) là còn những code khác tùy mỗi template, mình chỉ cho bạn thấy cơ bản cần phải có code bao quanh phần nội dung comment như vậy), nếu trong template của bạn chưa có bạn có thể thêm vào class="comment-body".
<dd class='comment-body'>
------------------------
<data:comment.body/>
-----------------------
</dd>


Như vậy là xong, nếu bạn không rỏ thì bạn có thể để lại comment bên dưới để thảo luận thêm nhé!

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

Tổng hợp

Xem khác cùng chủ đề

21 nhận xét | Viết lời bình

5/17/2011 07:19:00 SA Trả lời

Của mình ko hiện đc bạn à roile! Mặc dù đã thêm class như bạn nói! Bạn có thể xem qua temp của mình đc ko?

http://www.kpop247.info/

5/17/2011 07:53:00 SA Trả lời

Có thể chèn cript để click vào emotion tự động chèn vào giống wp không ?

Admin
5/17/2011 08:26:00 SA Trả lời

Cái này chính là hạn chế của Blogger đó bạn, chúng ta sử dụng comment dạng Iframe nó không hỗ trợ thì bó tay. Không biết tương lai có cải thiện không nhưng chúng ta đã có cách chèn tuy thủ công nhưng cũng khá hay đấy. ;)

Admin
5/17/2011 08:30:00 SA Trả lời

Bạn Thế giới Kpop nói nó không hiện là không hiện thế nào z bạn? Bạn nhớ là phải thêm file Bước 5 vapf đúng vị trí của nó nhé.

5/18/2011 04:30:00 SA Trả lời

Hic, tức là mình làm đúng tất cả các bước rùi, nhưng nó ko hiển thị thành các emo, mà vẫn chỉ là các kí tự thui. Bạn xem hộ mình với :(

5/18/2011 04:54:00 SA Trả lời

Cuoilon Không được thì chèn các Emotion giống bên Blog duypham hướng dẫn ấy

5/18/2011 05:20:00 SA Trả lời

Hic.Chip cũng làm thử có được đâu.Anh Vdinh dạy chèn biểu tượng to to như anh ấy.Em có bài viết này kiếm dduwwocj trên mạng hay lắm.Ko biết anh có cho chèn link không?http://www.chipkool.cz.cc/2011/04/tao-bieu-tuong-mat-cuoi-cho-blogspot.html?showComment=1301742559906

Admin
5/18/2011 08:10:00 SA Trả lời

Bạn Thế giới Kpop, mình có xem sơ qua blog của bạn thì k thấy được file JS chứa các biểu tượng comment ở trước thẻ body, bạn phải chèn đúng vị trí nó mới hiển thị được bạn ah. :-*

5/18/2011 08:31:00 SA Trả lời

Mình đã chèn rùi nhưng ko đc mà :( Ko hỉu sao nữa! Làm nhiều kiểu khác cũng ko đc!

Admin
5/18/2011 09:01:00 SA Trả lời

Nếu trong thẻ <dd> có code expr:class='"comment-body " + data:comment.commentAuthorClass' thì bạn hãy xóa nó đi và thay bằng class='comment-body' để tránh bị trùng lặp và nó sẽ hiển thị được ngay thôi bạn. Thân!

5/18/2011 05:59:00 CH Trả lời

ủa mà pak có các emotion rồi thì cần gi chèn thêm nữa Cuoilon

5/24/2011 12:05:00 SA Trả lời

Thanks vì thủ thuật hay nha votay

5/31/2011 04:05:00 SA Trả lời

:))

6/24/2011 05:35:00 CH Trả lời

Bài này hay đấy ! =L:

7/10/2011 03:13:00 SA Trả lời

Cái file "http://traidatmui-tips.googlecode.com/files/emotion_comment.js" này em nghĩ là nên chèn thẳng vào phía trước (/body),vì nó cũng ngắn thôi mà

9/01/2011 03:30:00 SA Trả lời

bác ơi
bác thâm hậu thật
chèn cả link bài viết
cả blog vào blog của người khác nữa
chỉ em với đc ko?

Admin
9/01/2011 08:47:00 SA Trả lời

mình không hiểu ý của bạn

3/20/2012 02:16:00 SA Trả lời

aa hehehe

1/02/2013 10:45:00 CH Trả lời

bạn ơi sao mà mình thì nó hiện thị lên rồi nhưng mà sao khi mình thử comment thì nó lại khôgng hiện lên biểu tượng nhỉ . Bạn giúp mình với nhé .

Admin
1/05/2013 07:23:00 CH Trả lời

Bạn hãy xem nội dung comment đã có <dd class='comment-body'> bao quanh chưa nhé

7/24/2015 02:21:00 SA Trả lời

Bạn ơi bên mình có dịch vụ Đăng tin tự động lên groups trên facebook miễn phí bạn xem qua nhé. miễn phí 100%
Ngoài ra các bạn có thể đọc tin tức tại Kênh tin tức giải trí yeubao.com
Các bạn có thể truy cập link sau để xem thông tin công nghệ
Khoinguoncongnghe.net | kênh thông tin dành cho tín đồ công nghê
cám ơn bạn đã đọc
đăng tin tự động trên facebook miễn phí 100% xem tại Đăng tin tự động lên groups trên facebook miễn phí
xem thủ thuật blogspot, thủ thuật blogger, thủ thuật facebook tại thủ thuật tổng hợp facebook, blogger,coputuer
xem tin tức giới trẻ, các tin nổi bật tin tức nổi bật, tin sao, tin giới trẻ, đời sống xã hội
xem thong tin giải trí, cung hoàng đạo, tại bí mật 12 chòm sao,tâm sự,blog tâm sự

giải trí thư giã relax giải trí thư giãn relax
khám phá du lịch, bi ẩn khám phá du lịch, bí ẩn
kho video giải trí khổng lồ video đời sống xã hội, video giải trí
khởi nguồn công nghệ, xem tin tức công nghệ, tin tức internet
tin tức internet
Tin tức itc , tin tức technogoy tin tức ict

Khám phá công nghệ
khám phá

Thủ thuật công nghê thủ thuật công nghệ, tips





Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang