Chèn emoticons và ảnh cho comments blogspot

Bài trước đã hướng dẫn thêm emoticons vào nhận xét trên blogspot nhưng không có chức năng post ảnh.
Bài viết này sẽ giúp bạn cho phép khách truy cập web của bạn có thể chèn được các emticons là những ảnh động vào trong những lời bình luận của mình.
Cùng với việc có thể thêm các emoticons vào khung bình luận thì đồng thời khách truy cập cũng có thể thêm ảnh kèm nhận xét bằng việc dán link ảnh vào khung comments.

Để chèn emoticons và ảnh cho comments blogspot bạn cần thực hiện các bước sau.

Bước 1: Mở template và chèn đoạn mã dưới đây trước thẻ </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![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':':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,{}));
//]]>
</script>
</b:if>

Bước 2: 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.


Tìm đến thẻ <data:blogTeamBlogMessage/> có 4 thẻ như vậy bạn chèn đoạn code sau vào sau thẻ cuối cùng.

<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='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&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-(
</span>
<span id='smiley-toggle'><a href="javascript:moreSmilies()">&#8594;</a></span>
</div>

Lưu ý

Với những mẫu mới mà blogger vừa cung cấp thì thay vì tìm thẻ: <data:blogTeamBlogMessage/> bạn tìm thẻ: <a name='comments'/>

Bước 3: 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;}
.comment-block img {
max-width: 500px !important;
}

Nguồn: duy-pham.blogspot.com