.

Hướng dẫn chèn biểu tương cảm xúc (emoticons) vào Blogspot


Nội dung của thủ thuật này hiệu chỉnh bên trong Template nên trước khi làm các bạn nên backup lại Template của mình.  Mẫu Demo tại đây

1- Đăng nhập (login) vào Blog

2- Vào Mẫu (Template)

3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed) => Chọn Mở rộng tiện ích mẫu ( Expand Template Widgets)

4- Chèn code sau trước thẻ </body>

Vì đoạn mã này dài, đưa vào đây nhìn rối mắt nên mình chép thành một file TXT. Các bạn click vào đây để tải về:
http://sokyha.googlecode.com/files/codeemoticon.txt 
Sau khi tải về máy các bạn chép copy và pass toàn bộ đoạn mã trong file này vào vào trước thẻ </body> như trong hình:


5 - Tìm đoạn mã sau đây:
<data:blogTeamBlogMessage/>
Đoạn mã này bắt nằm trong hai thẻ <b:includable id='threaded-comment-form' var='post'> và </b:includable>.
Để tìm được đoạn mã này bạn có thể nhờ duyệt tìm với từ khóa là: <data:blogTeamBlogMessage/> (thường bạn sẽ tìm được nó ở 4 vị trí khác nhau) bạn cũng có thể nhờ trình duyệt tìm giúp với từ khóa <b:includable id='threaded-comment-form' var='post'> (chỉ có duy nhất 1 kết quả)
<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
      <data:post.friendConnectJs/>
      <data:post.cmtfpIframe/>
      <script type='text/javascript'>
      BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
      </script>
   </div>
</b:includable>
Sau khi tìm được đoạn mã phía trên lưu ý hai thẻ tô màu vàng trong đoạn mã này; copy đoạn mã sau vào dưới thẻ thứ 2 trong đoạn trên.
<script type="text/javascript">
//<![CDATA[
function moreSmilies() {
document.getElementById('smiley-more').style.display = 'inline';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()">←</a></span>';
}
function lessSmilies() {
document.getElementById('smiley-more').style.display = 'none';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()">→</a>';
}
//]]>
</script>
<div class='emoticons'>
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voiNIw2I/AAAAAAAAASw/aav2hwqeG0c/1.gif'/>:)
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voq7QQnI/AAAAAAAAAS0/UzoFJOCcPPU/2.gif'/>:(
<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt_XVZKI/AAAAAAAAATI/Q35_W0anT6A/21.gif'/>:))
<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt5z16MI/AAAAAAAAATE/Hx-7Thmr6do/20.gif'/>:((
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuJ1G41I/AAAAAAAAATM/_jLHXvz6PTg/24.gif'/>=))
<span id='smiley-more' style='display: none;'>
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzUt1yQI/AAAAAAAAATY/QHNvnj0gYbU/41.gif'/>=D>
<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-voxnkRKI/AAAAAAAAAS4/PjDn098vm3w/4.gif'/>:D
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpDb68dI/AAAAAAAAAS8/Yv0Uu3qzG_Q/10.gif'/>:P
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpLiW1GI/AAAAAAAAATA/fPyPJcBks7s/13.gif'/>:-O
<img src='http://lh5.ggpht.com/_u7a1IFxc4WI/TM-vua5MF2I/AAAAAAAAATU/N4X-ouMd1-I/39.gif'/>:-?
<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vzUOH79I/AAAAAAAAATc/oNE5H5vcNtI/42.gif'/>:-SS
<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-vz4hwcNI/AAAAAAAAATo/4ySXuvQWma8/104.gif'/>:-t
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuMg6RQI/AAAAAAAAATQ/rWj7euuKOZs/33.gif'/>[-(
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vziH8NXI/AAAAAAAAATg/2evEbN2cJwc/43.gif'/>@-)
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzrqI4MI/AAAAAAAAATk/BhfFnT0Gbro/66.gif'/>b-(
</span>
<span id='smiley-toggle'><a href="javascript:moreSmilies()">→</a></span>
</div>
6 - Thêm một class emoticons .
Tương tự như ở trên các bạn tìm thẻ thẻ: ]]></b:skin> rồi copy đoạn mã phía sau vào trước nó!
.emoticons {-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;text-align: left;} .emoticons a, .emoticons a:hover {font-size: 28px;margin-left: 20px;text-decoration:none;}
Vậy là xong rồi!.
Trình bày tuy dài dòng nhưng ngoài trừ các bước đăng nhập thì chỉ có 3 bước chính thôi. Giờ lưu mẫu của bạn lại và xem kết quả nào. Với thủ thuật này không chỉ có chèn emoticon vào thôi đâu bạn còn có thể thêm hình, phim vào nữa đó.


(Namka)





54 nhận xét:

  1. Thú thật mấy hôm nay tôi làm mãi, làm mãi.
    Backup Theme mình ra cả ngoài word luôn, và chỉnh sửa an toàn.
    Thế nhưng vẫn bị báo lỗi Vy à.
    Bực quá là Bực....
    hichic.

    Trả lờiXóa
    Trả lời
    1. Hì! Lỗi của cái chèn biểu tượng cảm xúc này à! :)

      Thư có thể chụp hình nó báo lỗi như thế nào rồi post lên đây mình xem thử được không? (Trong comment này của mình có thể post hình và film).

      Xóa
    2. Tôi đang đi công tác bên GH. Nên chưa về nhà. Thông tin kia tôi có lưu ở máy thứ 2 ( ở nhà ). Nên k post cho Vy xem được.
      Nó nói là lỗi dòng thứ 1709, cột 24 gì gì đó. Rồi {1} gì gì đó.
      Tôi bực quá, mà cũng k bỏ cuộc đâu.
      Hôm nay tình cờ sang đây, Vy lại có hướng dẫn này, tôi đang xem đây.

      Xóa
    3. Tôi vừa làm xong theo đúng hướng dãn trong entry này.
      Lần này khi Lưu Mẫu, tuyệt đối im ru, k có báo lỗi gì.
      Mừng quá !!!!
      nhưng vô xem blog, ....k thấy gì hết ! ( bộ icon ).
      hichic.... ;(( ;(( ;((
      pó toàn thân luôn. ;((

      Xóa
    4. Hôm qua lễ... đang viết chưa xong lại đi ra ngoài không kiểm tra lại :-s.
      Thư Làm lại như trên nha. :)) (p)

      Xóa
    5. Trời. Má ơi luôn .... ;(( [-( [-(

      Xóa
    6. ThanhThanh cũng làm theo nhưng mà cũng chưa có được... (lol)
      Chúc bạn ngày vui nha

      Xóa
  2. EM TỚI 2 BLOG BÊN NÀY À.CÁI TÊN VI THÙY MÀ BÌNH LUẬN BÊN NHÀ CHỊ Ở ĐÂY CÓ LÀ EM KO ,BLOG ĐÓ CHỊ VÀO KO THẤY BÀI NÊN CHỊ KO CM DC EM À. GIÁNG SINH AN LÀNH HP EM NHÉ!

    Trả lờiXóa
    Trả lời
    1. Bạn Vy Thùy comment bên bộ sưu tập thác nước của chị là một bạn khác, không phải em đâu ạ. Em cũng có qua nhà chị nhưng em chỉ có một Blog thôi.

      Chúc chị một mùa giáng sinh âm áp, vui vẻ! :)

      Xóa
  3. …....... /)
    ……... ( , )
    ….….|░░░|
    ……..|░░░|☆ Merry _(♥)_
    …..@|░░░|¸.¤“˜¨Christmas.
    .¨˜“¤|░░ഐ¤ª@“˜¨¨Happy
    …¨˜“გª¤.¸::¸.¤ª☆“˜¨¨New Year.
    …¤¸*¸.¤ª“˜@¨¨¨***2013****.
    *♥*.

    Trả lờiXóa
    Trả lời
    1. Merry Christmas vậy là đã qua rồi.
      Giờ mừng Happy New Year thôi :)

      Xóa
  4. NH đến thăm bạn Vy đây
    NH chúc bạn Vy một mùa Noel an lành hp và một đêm Noel này sẽ có thật nhìu niềm vui ấm áp ...
    http://4.bp.blogspot.com/-4z2B9iLtTNs/UMRBwv3FVDI/AAAAAAAAD98/aD5Zl4bOxqo/s1600/30-namkna-blogspot-com.gif
    NH thấy bài entry này thật hay, ngày mai NH sẽ đến đem về nhà chèn vô để sd nha ...
    http://4.bp.blogspot.com/-dQxhGD8-aWs/UMQ7JOs33ZI/AAAAAAAAD6c/n7LcxzKTo4g/s1600/01-namkna.gif
    NH thank Vy nhìu thật nhìu ...

    Trả lờiXóa
    Trả lời
    1. Cảm ơn bạn đã ghé thăm Blog của Bo bo.
      Bạn cứ làm thử, chúc bạn thành công! :)

      Xóa
  5. chào chị chúng ta cùng tên hihi vui ha,chúc chị Noel vui hp bên gd nha.

    Trả lờiXóa
  6. làm từ nãy giờ, lưu xong hết nhưng mà vẫn ko thấy gì hết bạn ơi

    Trả lờiXóa
    Trả lời
    1. Cảm ơn bạn đã ghé thăm blog của Bo bo!

      Nội dung ở trên chủ yếu nằm ở hai bước thứ 4, thứ 5

      Bước 4: Có tác dụng thay thế các ký hiệu chữ thành hình tương ứng. Do đó sau khi bạn hoàn thành bước này thì trong comment của bạn đã có thể xuất hiện hình biểu tượng cảm xúc (mặc dù trên khung soạn thảo comment không thấy gì hết). Bạn có thể kiểm tra lại bước này bằng cách thử đánh vào các ký hiệu chữ cảm xúc thông thương vào trong comment của mình.

      Bước 5: Bước này có tác dụng làm các biểu tượng cảm xúc xuất hiện phía trên khung soạn thảo comment.

      Có thể bạn không thấy gì hết là do bạn copy đoạn mã ở bước 5 vào sai vị trí.

      Xóa
  7. Chào Vy, BLT thấy hay quá nhưng chưa có thời gian. Hôm nào qua xem ki và mang bí kip về nhà dùng mới được. Bobo đáng "ghét" quá nhỉ! :)

    Trả lờiXóa
  8. Thanks Vy. Tôi đã chèn được nhưng số lượng biểu tượng mẫu hiện lên chỉ có 5 và kích cỡ khá lớn. Chỉnh thể nào hở bạn?

    Trả lờiXóa
    Trả lời
    1. Cảm ơn bạn đã ghé thăm Blog của Bo bo. :)

      Chúc mừng bạn đã gần hoàn thành rồi. Tiện ích trên có tổng cộng 15 biểu tượng, bình thường thu gọn lại chỉ hiện ra 5 biểu tượng, khi cần dùng bạn có thể click vào dấu"-->" kế bên để hiện lên hết 15 biểu tượng.

      Nếu click vào dấu "-->" mà không hiện ra hết 15 biểu tượng bạn thử copy lại đoạn mã ở bước 5 vào lại (mình đã kiểm tra lại code bước 5)

      Bạn có thể thử nghiệm tại Blog này

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

      Xóa
    2. Cám ơn Vy nhé. Anh đã làm được rồi. :)

      Xóa
  9. Mình làm rùi mừ nó chẳng hịn cái hình lên, gõ kí hiệu thì nó mới ra ... nhức não thiệt lun á!

    Trả lờiXóa
    Trả lời
    1. Loay hoay cả buổi, đúng là bước 5 mình copy nhầm dòng ... cám ơn bạn nhiều nhá :)

      Xóa
  10. Ui rời ui , mắt toét hết cả ra mờ có chỉnh được đâu nường ới @-)

    Trả lờiXóa
  11. [img]http://3.bp.blogspot.com/-xHVZJoIJtRo/UMRDg_Lw1GI/AAAAAAAAD-8/FY1DAOhh1gc/s1600/38-namkna-blogspot-com.gif[/img]

    Trả lờiXóa
    Trả lời
    1. Chị viết thiếu 1 chữ G rồi.. [img]http://4.bp.blogspot.com/-4z2B9iLtTNs/UMRBwv3FVDI/AAAAAAAAD98/aD5Zl4bOxqo/s1600/30-namkna-blogspot-com.gif[/img]

      Xóa
  12. Cám ơn Bobo nhé! chị đã làm xong rồi :)

    Trả lờiXóa
  13. Nhưng ở bên em có tới 38 icons, nhưng trong code của em có 15 cái thôi, để chị tìm xem còn thiếu hình nào nữa.. [-(

    Trả lờiXóa
    Trả lời
    1. Cảm ơn bạn đã ghé thăm Blog của Bo bo.

      Sau khi đã làm hoàn thành thì chúng ta có thể thấy thủ thuật này cũng không có gì phúc tạp hết. Nó gồm 2 bước chính:

      - Bước 4: Chèn vào một đoạn mã có tác dụng thay thế các ký hiệu chữ thành hình biểu tượng cảm xúc tương ứng.

      - Bước 5: Bước này có tác dụng làm các biểu tượng cảm xúc xuất hiện phía trên khung soạn thảo comment.

      Do đó sau khi chúng ta thêm tiện ích này vào Blog được rồi thì chúng ta hoàn toàn có thể mở rộng ra bằng cách tự thêm vào các biểu tượng cảm xúc mà mình thích.

      Bằng cách copy câu lệnh trong cả hai bước thứ 4, thứ 5 rồi thay thế nó bằng link ảnh mà mình muốn thêm vào và ký hiệu chữ tương ứng là được rồi.

      Như vậy muốn bao nhiêu hình thì có bấy nhiêu hình thôi :>)

      Xóa
  14. Nường ới thiệt tềnh chỉnh hoài ko được , nường ới , nường ời cứu mềnh zới ;-(

    Trả lờiXóa
    Trả lời
    1. chỉnh được gòi dưng cơ mà nó lại nằm chềnh ềnh bên trên nường ợ , nó hổng chịu nằm dưới mí chít người :-s

      Xóa
    2. Hì hì! nhớ lúc mình mới chuyển từ blog yahoo sang; lần đầu đụng mấy cái mã này cũng bị choáng như thế (nhà Bo bo mới dọn từ Blog yahoo qua mà) ^^.

      Nường ơi! Nường sao lưu mẫu rồi làm vài lần quen tay là tự nhiên thấy dễ hehe (nếu làm tanh banh mẫu thì phục hồi lại là ok thôi).

      Việc nó nằm chênh vênh chắc là do bước 5 copy sai vị trí thôi hihi

      Xóa
  15. These are not empty words which are uttered by a
    disciple of Jesus who anyone would anticipate to say such as this.
    Pandora is free (ad-supported), but you can buy an upgrade
    for no ads and other improvements. With the Worldmate Nokia 5800 Xpress - Music application you can keep track of the
    current times in up to five different cities worldwide at a go.


    Also visit my webpage :: pattayachaiyo.com

    Trả lờiXóa
  16. The only negative thing that can be said about the movie
    is its relatively poor transition between different
    scenes, but that is not uncommon in documentaries.
    If you are considering doing a movie night every now and
    then with a few people, perhaps an interchangeable room would be better, one
    with the ability to be a living room on the side. Several scenes have you being the
    diver and getting not only the view but the sound effects of going from above to below the surface like hearing the seals barking on their island.


    my blog post: caffeine

    Trả lờiXóa
  17. bạn ơi bạn có nick fb ko cho mình xin với :)

    Trả lờiXóa
  18. Cảm ơn bạn nha mình cũng đang làm blog mà muốn thêm vào hig mình đang làm blog về lĩnh vực này hi Khoan địa chất

    Trả lờiXóa
  19. Mình làm luôn cho blog của mình, hi Biển hiệu quảng cáo

    Trả lờiXóa
  20. mình đã làm được, nhưng chỉ có 4 ảnh vui nhộn, hjhj

    http://phongkhamdakhoatg.blogspot.com/

    Trả lờiXóa
  21. Mình cũng định đang làm Blog cho web của mình về khoan địa chất
    Mình cảm ơn nhiều nhé

    Trả lờiXóa
  22. DÙng tạm cái Blog để lam web vâu <a href=""

    Trả lờiXóa
  23. Cảm ơn bạn về bài viêt nhé, mình sẽ làm blog cho cua nhom xingfa

    Trả lờiXóa
  24. Thank you bạn nhiều nha vì bài viết hay
    mình sẽ làm cho blog của mình khoan địa chất, khảo sát địa chất

    Trả lờiXóa
  25. Cảm ơn bạn rất nhiều nhé mình cũng đang làm blog mà muốn thêm vào hi
    Tủ bếp giá rẻ tại Hà Nội

    Trả lờiXóa

Ghi chú:
Để post hình sử dụng thẻ: [img] ...Link hình... [/img]
Để post phim từ youtube sử dụng thẻ: [youtube] ...Link phim... [/youtube]
Để post nhạc từ nhaccuatoi sử dụng thẻ: [nct]...Link nhạc...[/nct]