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

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.

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 Dashboard – Design – Edit HTML , click chọn ” Expand Widget Template ”
– Nếu bạn sử dụng giao diện Blogger mới thì :
Vào Dashboard – Template – Edit HTML – Proceed –  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ó

 
<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>
 

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;awidth: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: Blogspot

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