Chèn biểu tượng Emoticons/Smileys vào trong Blogger Comments

16/09/2012

Bài viết này sẽ giúp bạn cho phép khách viếng thăm web của bạn có thể chèn được các biểu tượng ảnh động vào trong những lời bình luận của mình.Nhưng trước hết , nếu bạn muốn những biểu tượng này có thể xuất hiện trên blog của bạn thì bạn phải xóa bỏ hệ thống bình luận mặc định trong blog của bạn. Các bạn có thể tham khảo bài viết Hướng dẫn xóa bỏ comments mặc định trong blogspot.

Chèn biểu tượng Emoticons/Smileys vào trong Blogger Comments
Các bước tiến hành như sau :
Bước 1 : Nếu bạn sử dụng giao diện Blogger cũ thì :
Vào DashboardDesignEdit HTML , click chọn ” Expand Widget Template
– Nếu bạn sử dụng giao diện Blogger mới thì :
Vào DashboardTemplateEdit HTMLProceed –  Click chọn ” Expand Widget Template
Bước 2 : Tìm dòng code sau :

</body>

Chèn đoạn code sau ngay trên nó

<!--kolobok-smileys-->
<script src='http://helplogger.googlecode.com/svn/trunk/[helplogger.blogspot.com]smileys.js' type='text/javascript'/><noscript><a href='http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html' target='_blank'><span style='font-size: x-small;'>Add emoticons</span></a></noscript>
<!--kolobok-smileys-->

Bước 3 : Tìm dòng code sau:

<b:loop values='data:post.comments' var='comment'>

Và ngay trên đoạn code này các bạn paste dòng code sau :

<div id='smileys'>

Bước 4 :  Kế tiếp tìm đoạn code sau :

</b:loop>

Paste dòng code sau ngay bên dưới nó

</div>

Bước 5 : Tìm đoạn code sau (Bạn sẽ thấy nó 4 lần và nhớ là chọn cái ở lần thứ 2)

<data:blogTeamBlogMessage/>

Và chèn đoạn code sau ngay bên dưới nó :

<script type='text/javascript'>
//<![CDATA[
function moreSmilies() {
document.getElementById('smiley-more').style.display = 'inline';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()"><div style="font-size:small; font-weight:bold;color:#000000;">Hide Emoticons /<a href="http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html">Add Emoticons</div></a></span>';
}
function lessSmilies() {
document.getElementById('smiley-more').style.display = 'none';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()"><div style="font-size:small; font-weight:bold;">Show Emoticons</div></a>';
}
//]]>
</script>
<div class='emoticons'>
<span id='smiley-more' style='display: none;'>
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/smile3.gif'/>:)
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/sad3.gif'/>:(
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/laugh.gif'/>:))
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/cray-1.gif'/>:((
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/rofl-1.gif'/>=))
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/suicide-1.gif'/>=D&gt;
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/biggrin2.gif'/>:D
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/blum.gif'/>:P
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/shok.gif'/>:-O
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/eusa_think.gif'/>:-?
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/unsure.gif'/>:-SS
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/flowers1-1.gif'/>:-f
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/doh-1.gif'/>d(
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/air_kiss3.gif'/>:-*
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/threaten-1.gif'/>b-(
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/help2.gif'/>h-(
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/good-1.gif'/>g-)
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/beee-1.gif'/>5-p
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/yahoo2-1.gif'/>y-)
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/crazy3-1.gif'/>c-)
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/spiteful.gif'/>s-)
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/drinks-1.gif'/>d-)
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/cheer-1.gif'/>w-)
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/hi-1.gif'/>:-h
<img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/give_heart-1.gif'/>:X
</span>
<span id='smiley-toggle'><a href='javascript:moreSmilies()'><div style='font-size:small;font-weight:bold;'>Show Emoticons <img src='https://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/smile3.gif'/></div></a></span>
</div>

Bước 6 : Cuối cùng, tìm đoạn code này

]]></b:skin>

Và đặt đoạn code nằm bên trên nó

.emoticons {-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;text-align: left;width:400px;}
.emoticons a, .emoticons a:hover {margin-left: 20px;text-decoration:none;}

Bước 7 : Save template và hoàn thành
Hy vọng là với thủ thuật này, blog của bạn sẽ có những biểu tượng thật đẹp mắt.
Chúc các bạn thành công !

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !
  • conguyen

    Tôi đã thực đầy đủ các bước như trên đây nhưng sao nó vẫn không hiện bộ Emoticons thì làm sao gửi kèm dc? Xin hướng dẫn rõ hơn.Cảm ơn bạn .