Chèn Emoticons vào bình luận Blog
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:
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>','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/AVvXsEhnybpT1ZyEzmLz4vbnRoPbsCwkctxAoe2KKw5Wjm3Mo7JQUXvHwawuk7ovahB49-x3Mgcp8aFyK6tQ0QhRewvNOL8cujhaqiC-vCOjOay-19nzoDxBQSTe7Q2QiiKCFgXZ5xzhkXh0FHka/'},
{'text':':ok','img':'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbJv2Ei9nIDRBkECCnrO7vxKR2IGNUplaevS7yvVibBzbIwkHtq6GdX6l_0FrUpo_YHstjCRv2fhc9VWkguWkWSTOjJfIlggKy0O0q4fS7qNTJRvfYHL3_jUn5ekbWAadea7oeKHX8WzZo/'},
{'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 |
(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'>8- Thêm một class emoticons. Chèn đoạn mã dưới vào trước thẻ ]]></b:skin>
//<![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='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>
<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/AVvXsEhnybpT1ZyEzmLz4vbnRoPbsCwkctxAoe2KKw5Wjm3Mo7JQUXvHwawuk7ovahB49-x3Mgcp8aFyK6tQ0QhRewvNOL8cujhaqiC-vCOjOay-19nzoDxBQSTe7Q2QiiKCFgXZ5xzhkXh0FHka/'/>T_T
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbJv2Ei9nIDRBkECCnrO7vxKR2IGNUplaevS7yvVibBzbIwkHtq6GdX6l_0FrUpo_YHstjCRv2fhc9VWkguWkWSTOjJfIlggKy0O0q4fS7qNTJRvfYHL3_jUn5ekbWAadea7oeKHX8WzZo/'/>: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()'>→</a></span>
</div>
.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;}
