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

Điểm 4.6/5 dựa vào 87 đánh giá

(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

Loading...

21 nhận xét

  1. 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/

    Trả lờiXóa
  2. Có thể chèn cript để click vào emotion tự động chèn vào giống wp không ?

    Trả lờiXóa
  3. 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. ;)

    Trả lờiXóa
  4. 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é.

    Trả lờiXóa
  5. 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 :(

    Trả lờiXóa
  6. Cuoilon Không được thì chèn các Emotion giống bên Blog duypham hướng dẫn ấy

    Trả lờiXóa
  7. 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

    Trả lờiXóa
  8. 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. :-*

    Trả lờiXóa
  9. 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!

    Trả lờiXóa
  10. 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!

    Trả lờiXóa
  11. ủa mà pak có các emotion rồi thì cần gi chèn thêm nữa Cuoilon

    Trả lờiXóa
  12. 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à

    Trả lờiXóa
  13. 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?

    Trả lờiXóa
  14. 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é .

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

      Xóa
  15. 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





    Trả lờiXóa