Chèn Emoticons vào bình luận Blog

Lê An    3/27/2014    Emoticons , Thủ thuật blog    Comments   

Do Blogspot không hỗ trợ các biêt tượng mặt cười ở phần comment như của Yahoo do vậy nhiều khi các bạn muốn chèn các biểu tượng cảm xúc nhưng lại không biết cách do vậy mình xin giới thiệu cho các bạn cách chèn biểu tượng mặt cười giúp khung bình luận của bạn thêm phần sống động hơn.

Tiện ích Emoticons này là bản nâng cấp từ Blog Duypham đã được mình bổ xung thêm một số biểu tượng thêm phong phú. 

Đặc biệt Tiện ích này hổ trợ chèn trực tiếp link Video trực tiếp từ Youtube, link hình có các đuôi như png, jpg, gif và bmp. 

Bạn thực hiện như sau:

1- Đăng nhập vào tài khoản Blogger
2- Vào phần Mẫu (Template)
3- Chọn Chỉnh sửa HTML
4- Chèn đoạn mã dưới đây trước thẻ </body>:

// Emoticons Update by TyniSoft
//<![CDATA[
var copyright='Emoticons & Multimedia for Thread Comment by http://duypham.info';
var smileys=[
{'text':':))','img':'http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt_XVZKI/AAAAAAAAATI/Q35_W0anT6A/21.gif'},
{'text':':)','img':'http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voiNIw2I/AAAAAAAAASw/aav2hwqeG0c/1.gif'},
{'text':':((','img':'http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt5z16MI/AAAAAAAAATE/Hx-7Thmr6do/20.gif'},
{'text':':(','img':'http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voq7QQnI/AAAAAAAAAS0/UzoFJOCcPPU/2.gif'},
{'text':':D','img':'http://lh3.ggpht.com/_u7a1IFxc4WI/TM-voxnkRKI/AAAAAAAAAS4/PjDn098vm3w/4.gif'},
{'text':'=))','img':'http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuJ1G41I/AAAAAAAAATM/_jLHXvz6PTg/24.gif'},
{'text':'=D&gt;','img':'http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzUt1yQI/AAAAAAAAATY/QHNvnj0gYbU/41.gif'},
{'text':':-O','img':'http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpLiW1GI/AAAAAAAAATA/fPyPJcBks7s/13.gif'},
{'text':':-?','img':'http://lh5.ggpht.com/_u7a1IFxc4WI/TM-vua5MF2I/AAAAAAAAATU/N4X-ouMd1-I/39.gif'},
{'text':':-SS','img':'http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vzUOH79I/AAAAAAAAATc/oNE5H5vcNtI/42.gif'},
{'text':':-t','img':'http://lh3.ggpht.com/_u7a1IFxc4WI/TM-vz4hwcNI/AAAAAAAAATo/4ySXuvQWma8/104.gif'},
{'text':'[-(','img':'http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuMg6RQI/AAAAAAAAATQ/rWj7euuKOZs/33.gif'},
{'text':'@-)','img':'http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vziH8NXI/AAAAAAAAATg/2evEbN2cJwc/43.gif'},
{'text':'b-(','img':'http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzrqI4MI/AAAAAAAAATk/BhfFnT0Gbro/66.gif'},
{'text':'=.=','img':'https://lh4.googleusercontent.com/_9-sNIAfGhKg/TXyK4vY1n3I/AAAAAAAAAIg/uyq9XnzO7iU/52.gif'},
{'text':'T_T','img':'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWFwqjK9_pYhVuyNbcd3aTwRO7nyDq5-n21ukAYjDQnFHKZVeIbo8w1eWL-2_kf_mF68k0tK-56i6zGy4t3IVPZ_QrgX9pZxcTGKuIXhu-H0VVz16HgWP0-iuoV71pZ4wiTI6KzQrGNtXm/'},
{'text':':ok','img':'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg78hm0rjGLYZnMfah1wGdciOdk-FJtLBDzc-9CVQVNdVI6UYCLB3M50XY1UTz_HrrdVg2KNI3MO0DWa-6EVW1t5EFX6HtDMyxp3FsfUfK7edvharJ-Ga1cTL4nmyDZ6wkJmiRLQ8NxAYHK/'},
{'text':':iou','img':'https://lh5.googleusercontent.com/_9-sNIAfGhKg/TXxptF1kJSI/AAAAAAAAAIY/oEhVU5Ne49U/yeulam.gif'},
{'text':':cdv','img':'https://lh4.googleusercontent.com/_9-sNIAfGhKg/TXyK41uQ_ZI/AAAAAAAAAIo/WFnc77M2sww/38.gif'},
{'text':':woa','img':'https://lh6.googleusercontent.com/-HUHxT4EOSOU/UlBKz_8GDNI/AAAAAAAABy4/vj7_fRq2jIs/s36/85.gif'},
{'text':':la','img':'https://lh5.googleusercontent.com/-BBV7mrokau8/UlBKzwVVDcI/AAAAAAAABy8/1hnpUgbLo3g/s36/67.gif'},
{'text':':x','img':'https://lh3.googleusercontent.com/_9-sNIAfGhKg/TXxpsb1FvKI/AAAAAAAAAIQ/mGikiSKPedg/soldierbaby.gif'},
{'text':':-d','img':'https://lh5.googleusercontent.com/-R7piU_aiQSs/UlDqCRvbfHI/AAAAAAAAB0Y/vPxnb9YxKRs/s36/5.gif'},
{'text':':bye','img':'https://lh3.googleusercontent.com/-XyiFQYIxQ9E/UlDt06AXbxI/AAAAAAAAB04/KbYXdbGROR0/s36/48.gif'},
{'text':';-(','img':'https://lh5.googleusercontent.com/-sZO0cHc2ekY/UlDovg4qJdI/AAAAAAAAB0I/3G7hdBieQpY/s36/1.gif'},
{'text':':mz','img':'https://lh5.googleusercontent.com/-uZaj4hR-308/UnziGjbufLI/AAAAAAAACNo/NcWMvxGxI38/s36/110.gif'},
{'text':'<3','img':'https://lh6.googleusercontent.com/-TO5fOOB_jF4/Uv-GHvtoz4I/AAAAAAAACaM/TkhK5NWg9mM/s36/102.gif'},
{'text':':P','img':'http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpDb68dI/AAAAAAAAAS8/Yv0Uu3qzG_Q/10.gif'}];
var type_img=['png','PNG','jpg','JPG','jpeg','JPEG','gif','GIF','bmp','BMP'];
var dp=['Q a=["\\1b\\m\\w\\b\\q\\t\\w\\z\\u\\r\\1r\\r\\1c\\F\\s\\b\\q\\m\\h\\C\\q\\k\\r\\O\\w\\l\\r\\1e\\o\\l\\h\\k\\C\\r\\1H\\w\\m\\m\\h\\z\\b\\r\\E\\N\\r\\o\\b\\b\\B\\R\\n\\n","\\N\\B","\\q\\z\\O\\w","\\t\\w\\m\\m\\h\\z\\b\\W\\o\\w\\s\\C\\h\\l","\\J\\h\\b\\1b\\s\\h\\m\\h\\z\\b\\1v\\N\\1z\\C","\\B","\\J\\h\\b\\1b\\s\\h\\m\\h\\z\\b\\u\\1v\\N\\1e\\k\\J\\1W\\k\\m\\h","\\s\\h\\z\\J\\b\\o","","\\q\\z\\z\\h\\l\\1X\\1e\\1c\\1T","\\q\\b\\h\\m","\\o\\b\\b\\B","\\u\\B\\s\\q\\b","\\o\\b\\b\\B\\R\\n\\n\\v\\v\\v\\M\\N\\w\\F\\b\\F\\E\\h\\M\\t\\w\\m\\n\\v\\k\\b\\t\\o\\1d\\1g\\A","\\o\\b\\b\\B\\R\\n\\n\\v\\v\\v\\M\\z\\o\\k\\t\\t\\F\\k\\b\\F\\q\\M\\t\\w\\m\\n\\z\\J\\o\\h\\1d","\\M","\\q\\z\\C\\h\\T\\1Z\\O","\\u\\F\\E\\u\\b\\l\\q\\z\\J","\\r","\\H","\\H\\E\\l\\n\\L\\H\\E\\l\\n\\L\\H\\q\\m\\J\\r\\u\\b\\N\\s\\h\\A\\p\\m\\k\\T\\W\\v\\q\\C\\b\\o\\R\\1S\\G\\G\\1R\\p\\r\\u\\l\\t\\A\\p","\\p\\n\\L","\\1r","\\H\\E\\l\\n\\L\\H\\E\\l\\n\\L\\H\\q\\O\\l\\k\\m\\h\\r\\v\\q\\C\\b\\o\\A\\p\\1p\\G\\G\\p\\r\\o\\h\\q\\J\\o\\b\\A\\p\\1f\\1Q\\G\\p\\r\\u\\l\\t\\A\\p\\o\\b\\b\\B\\R\\n\\n\\v\\v\\v\\M\\N\\w\\F\\b\\F\\E\\h\\M\\t\\w\\m\\n\\h\\m\\E\\h\\C\\n","\\1d\\l\\h\\s\\A\\G\\p\\r\\O\\l\\k\\m\\h\\E\\w\\l\\C\\h\\l\\A\\p\\G\\p\\r\\k\\s\\s\\w\\v\\O\\F\\s\\s\\u\\t\\l\\h\\h\\z\\L\\H\\n\\q\\O\\l\\k\\m\\h\\L","\\H\\E\\l\\n\\L\\H\\E\\l\\n\\L\\H\\h\\m\\E\\h\\C\\r\\u\\b\\N\\s\\h\\A\\p\\v\\q\\C\\b\\o\\R\\1f\\G\\G\\B\\T\\1P\\o\\h\\q\\J\\o\\b\\R","\\1c\\A","\\1f\\G\\G","\\1p\\G\\G","\\B\\T\\p\\r\\u\\l\\t\\A\\p\\o\\b\\b\\B\\R\\n\\n\\v\\v\\v\\M\\z\\o\\k\\t\\t\\F\\k\\b\\F\\q\\M\\t\\w\\m\\n","\\m\\n","\\s\\n","\\p\\r\\O\\s\\k\\u\\o\\1g\\k\\l\\u\\A\\p\\k\\F\\b\\w\\u\\b\\k\\l\\b\\A\\O\\k\\s\\u\\h\\p\\r\\1N\\F\\k\\s\\q\\b\\N\\A\\p\\o\\q\\J\\o\\p\\r\\v\\m\\w\\C\\h\\A\\p\\b\\l\\k\\z\\u\\B\\k\\l\\h\\z\\b\\p\\r\\b\\N\\B\\h\\A\\p\\k\\B\\B\\s\\q\\t\\k\\b\\q\\w\\z\\n\\T\\W\\u\\o\\w\\t\\1D\\v\\k\\1g\\h\\W\\O\\s\\k\\u\\o\\p\\L\\H\\n\\h\\m\\E\\h\\C\\L","\\b\\h\\T\\b","\\H\\q\\m\\J\\r\\u\\l\\t\\A\\p","\\q\\m\\J","\\l\\h\\B\\s\\k\\t\\h","\\C\\F","\\o\\k\\m\\M"];Q V=[];K=[];I=[];1q=a[0];1w=a[1];1u=a[2];1s=1Y[a[4]](a[3]);c=1s[a[6]](a[5]);D(c){U(x=0;x<c[a[7]];x++){Q 1i=a[8];1o=a[8];P=a[8];d=c[a[10]](x)[a[9]];e=d[a[12]](a[11]);f=d[a[12]](a[13]);g=d[a[12]](a[14]);U(Q i=1;i<e[a[7]];i++){U(Q j=0;j<Z[a[7]];j++){1h=e[i][a[16]](a[15]+Z[j]);D(1h!=-1){V[i]=a[11]+e[i][a[17]](0,1h)+a[15]+Z[j];D((V[i][a[16]](a[18])==-1)&&(V[i][a[16]](a[19])==-1)){1i+=a[20]+V[i]+a[21]}}}};U(Q i=1;i<f[a[7]];i++){1a=f[i][a[16]](a[18]);X=f[i][a[16]](a[19]);D(1a!=-1){K[i]=f[i][a[17]](0,1a);Y=K[i][a[16]](a[19]);D(Y!=-1){K[i]=K[i][a[17]](0,Y)}}S{D(X!=-1){K[i]=f[i][a[17]](0,X)}S{D(i==f[a[7]]-1){K[i]=f[i][a[17]](0,d[a[7]])}}};K[i]=K[i][a[12]](a[22]);K[i]=K[i][0];1o+=a[1x]+K[i]+a[1U]};U(Q i=1;i<g[a[7]];i++){1m=g[i][a[16]](a[18]);1n=g[i][a[16]](a[19]);D(1m!=-1){I[i]=g[i][a[17]](0,1m);1j=I[i][a[16]](a[19]);D(1j!=-1){I[i]=I[i][a[17]](0,1j)}}S{D(1n!=-1){I[i]=g[i][a[17]](0,1n)}S{D(i==g[a[7]]-1){I[i]=g[i][a[17]](0,d[a[7]])}}};1k=I[i][a[17]](0,2);I[i]=I[i][a[17]](2,I[i][a[7]]);P+=a[1V];D(1k==a[1t]){P+=a[1O]}S{P+=a[1J]};P+=a[1A];D(1k==a[1t]){P+=a[1y]}S{P+=a[1B]};P+=I[i]+a[1M]};U(Q y=0;y<1l[a[7]];y++){d=d[a[1K]](1l[y][a[1L]],a[1I]+1l[y][a[1E]]+a[21])};D(1G==1q+a[1F]+1w+a[1C]+1u){c[a[10]](x)[a[9]]=d+1i+1o+P}}};',"|","split","||||||||||_0xf28e|x74||||||x65|||x61|x72|x6D|x2F|x68|x22|x69|x20|x6C|x63|x73|x77|x6F|||x6E|x3D|x70|x64|if|x62|x75|x30|x3C|nct|x67|youtube|x3E|x2E|x79|x66|a3|var|x3A|else|x78|for|img|x2D|aft_y2|aft_y3|type_img|||||||||||aft_y1|x45|x4D|x3F|x54|x33|x76|dot_png|a1|aft_nct3|m_l|smileys|aft_nct1|aft_nct2|a2|x34|cbef|x26|cL|26|cbef3|x42|cbef2|23|30|x49|29|31|38|x6B|35|37|copyright|x43|34|28|36|33|32|x71|27|x3B|x32|x25|x31|x4C|24|25|x4E|x48|document|x4F|||","","fromCharCode","replace","\\w+","\\b","g"];eval(function(d,e,a,c,b,f){b=function(a){return(a<e?dp[4]:b(parseInt(a/e)))+(35<(a%=e)?String[dp[5]](a+29):a.toString(36))};if(!dp[4][dp[6]](/^/,String)){for(;a--;)f[b(a)]=c[a]||b(a);c=[function(a){return f[a]}];b=function(){return dp[7]};a=1}for(;a--;)c[a]&&(d=d[dp[6]](RegExp(dp[8]+b(a)+dp[8],dp[9]),c[a]));return d}(dp[0],62,127,dp[3][dp[2]](dp[1]),0,{}));
//]]>

5- Tìm đến thẻ

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

Và thêm trước nó thẻ

<div id='emocomments'>

6- Tìm thẻ đóng tương ứng với thẻ trên

</b:loop>

- Và thêm sau nó thẻ

</div>

7- Bước này là hiển thị những ký tự tắt và emoticons tương ứng với nó cho người đọc có thể biết được để chèn vào khung Nhận xét.

Hình DEMO

Tìm đến thẻ <data:blogTeamBlogMessage/> thứ 2 và chèn đoạn mã dưới đây vào sau nó:
(Lưu ý: Tùy thuộc vào tác giả thiết kế mà Blog bạn gồm nhiều đoạn tương tự. Bạn đặc sao cho phù hợp với Blog của mình) 
Và chèn đoạn mã dưới đây vào sau nó:

<script type='text/javascript'>
//<![CDATA[
function moreSmilies() {
    document.getElementById('smiley-more').style.display = 'inline';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()">&#8592;</a></span>';
}
function lessSmilies() {
    document.getElementById('smiley-more').style.display = 'none';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()">&#8594;</a>';
}
//]]>
</script>
<div class='emocomments'>
<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&gt;
<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-(
<img src='https://lh4.googleusercontent.com/_9-sNIAfGhKg/TXyK4vY1n3I/AAAAAAAAAIg/uyq9XnzO7iU/52.gif'/>=.=
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWFwqjK9_pYhVuyNbcd3aTwRO7nyDq5-n21ukAYjDQnFHKZVeIbo8w1eWL-2_kf_mF68k0tK-56i6zGy4t3IVPZ_QrgX9pZxcTGKuIXhu-H0VVz16HgWP0-iuoV71pZ4wiTI6KzQrGNtXm/'/>T_T
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg78hm0rjGLYZnMfah1wGdciOdk-FJtLBDzc-9CVQVNdVI6UYCLB3M50XY1UTz_HrrdVg2KNI3MO0DWa-6EVW1t5EFX6HtDMyxp3FsfUfK7edvharJ-Ga1cTL4nmyDZ6wkJmiRLQ8NxAYHK/'/>:ok
<img src='https://lh5.googleusercontent.com/_9-sNIAfGhKg/TXxptF1kJSI/AAAAAAAAAIY/oEhVU5Ne49U/yeulam.gif'/>:iou
<img src='https://lh4.googleusercontent.com/_9-sNIAfGhKg/TXyK41uQ_ZI/AAAAAAAAAIo/WFnc77M2sww/38.gif'/>:cdv
<img src='https://lh6.googleusercontent.com/-HUHxT4EOSOU/UlBKz_8GDNI/AAAAAAAABy4/vj7_fRq2jIs/s36/85.gif'/>:woa
<img src='https://lh5.googleusercontent.com/-BBV7mrokau8/UlBKzwVVDcI/AAAAAAAABy8/1hnpUgbLo3g/s36/67.gif'/>:la
<img src='https://lh5.googleusercontent.com/-R7piU_aiQSs/UlDqCRvbfHI/AAAAAAAAB0Y/vPxnb9YxKRs/s36/5.gif'/>:-d
<img src='https://lh5.googleusercontent.com/-sZO0cHc2ekY/UlDovg4qJdI/AAAAAAAAB0I/3G7hdBieQpY/s36/1.gif'/>;-(
<img src='https://lh3.googleusercontent.com/-XyiFQYIxQ9E/UlDt06AXbxI/AAAAAAAAB04/KbYXdbGROR0/s36/48.gif'/>:bye
<img src='https://lh3.googleusercontent.com/_9-sNIAfGhKg/TXxpsb1FvKI/AAAAAAAAAIQ/mGikiSKPedg/soldierbaby.gif'/>:x
</span>
<span id='smiley-toggle'><a href='javascript:moreSmilies()'>&#8594;</a></span>
  </div>

8- Thêm một class emoticons. Chèn đoạn mã dưới vào trước thẻ ]]></b:skin>

.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;}