This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Thursday, 26 April 2018

[Blogger] Hướng dẫn chèn Emoticons vào Thread Comment blogger


Biểu tượng cảm xúc Emoticons thường được sử dụng rất rộng rãi trên các trang mạng xã hội. các hệ thống bình luận hiện nay hầu như đều có tích hợp một bộ Emoticons nào đó, còn riêng đối với blogger điều đó có vẻ khá xa xỉ

Hộp bình luận của blogger chỉ là 1 iframe load từ bên ngoài vào và nó hạn chế khá nhiều, bạn chỉ có thể bình luận kèm theo chèn một số thẻ HTML cơ bản. Tuy nhiên sau bài viết này bạn sẽ có thể tự tạo cho mình một bộ Emoticons đẹp và độc mang phong cách của riêng mình

Bước 1: Chèn script


Bạn tìm trong template đoạn <b:includable id='threaded_comments' var='post'> và chèn script vào phía sau thẻ <div class='comments-content'> 


Script có dạng

<script async='async' type='text/javascript'>//<![CDATA[
// Emoji by hung1001
Display_Emo = true; // Display emoticon or not? set "false" to no display
Replace_Image_Link = true; // Auto replace an image link choose "false" to disable.
Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP']; // (support: jpg, gif, png, bmp), only effect when Replace_Image_Link=true
Content =".comment-content"; // Selector to comment content
Emo_List = [
'short_code_1', 'link_image_1',
'short_code_2', 'link_image_2',
...
];

var _0x135f=['\x73\x75\x62\x73\x74\x72\x69\x6e\x67','\x48\x54\x54\x50\x3a\x2f\x2f','\x69\x6e\x64\x65\x78\x4f\x66','\x74\x6f\x4c\x6f\x77\x65\x72\x43\x61\x73\x65','\x48\x54\x54\x50\x53\x3a\x2f\x2f','\x22\x20\x63\x6c\x61\x73\x73\x3d\x22\x63\x6f\x6d\x6d\x65\x6e\x74\x5f\x69\x6d\x67\x22\x2f\x3e','\x22\x20\x63\x6c\x61\x73\x73\x3d\x22\x63\x6f\x6d\x6d\x65\x6e\x74\x5f\x65\x6d\x6f\x22\x2f\x3e','\x68\x74\x6d\x6c','\x6c\x65\x6e\x67\x74\x68','\x74\x6f\x55\x70\x70\x65\x72\x43\x61\x73\x65'];(function(_0x11c2d3,_0xe2dc3d){var _0x55f084=function(_0x515c52){while(--_0x515c52){_0x11c2d3['\x70\x75\x73\x68'](_0x11c2d3['\x73\x68\x69\x66\x74']());}};_0x55f084(++_0xe2dc3d);}(_0x135f,0x75));var _0xf135=function(_0x33a9e7,_0x4c0a4e){_0x33a9e7=_0x33a9e7-0x0;var _0x12928e=_0x135f[_0x33a9e7];return _0x12928e;};$(Content)[_0xf135('0x0')](function(_0x239287,_0x306e9f){if(Replace_Image_Link){for(var _0x42c512='',_0x5d8383=_0x306e9f,_0xba37bf=0x0;_0xba37bf<Replace_Image_Ext[_0xf135('0x1')];_0xba37bf++)for(var _0x5ca864='\x2e'+Replace_Image_Ext[_0xba37bf],_0x3d978b=_0x5d8383[_0xf135('0x2')](),_0x4f7e17=_0x3d978b['\x69\x6e\x64\x65\x78\x4f\x66'](_0x5ca864);-0x1!=_0x4f7e17;){img_src=_0x5d8383[_0xf135('0x3')](0x0,_0x4f7e17+_0x5ca864[_0xf135('0x1')]);for(var _0x5cf461=_0xf135('0x4'),_0x587e5e=(_0x3d978b=img_src[_0xf135('0x2')]())[_0xf135('0x5')](_0x5cf461),_0x2c282d='';-0x1!=_0x587e5e;)_0x2c282d=_0x5cf461[_0xf135('0x6')](),img_src=img_src[_0xf135('0x3')](_0x587e5e+_0x5cf461[_0xf135('0x1')]),_0x587e5e=(_0x3d978b=img_src[_0xf135('0x2')]())[_0xf135('0x5')](_0x5cf461);for(_0x5cf461=_0xf135('0x7'),_0x587e5e=(_0x3d978b=img_src[_0xf135('0x2')]())[_0xf135('0x5')](_0x5cf461);-0x1!=_0x587e5e;)_0x2c282d=_0x5cf461['\x74\x6f\x4c\x6f\x77\x65\x72\x43\x61\x73\x65'](),img_src=img_src[_0xf135('0x3')](_0x587e5e+_0x5cf461[_0xf135('0x1')]),_0x587e5e=(_0x3d978b=img_src[_0xf135('0x2')]())[_0xf135('0x5')](_0x5cf461);if(''==_0x2c282d||img_src['\x6c\x65\x6e\x67\x74\x68']<0x6)break;img_src=_0x2c282d+img_src,_0x42c512+=_0x5d8383[_0xf135('0x3')](0x0,_0x4f7e17+_0x5ca864[_0xf135('0x1')]-img_src['\x6c\x65\x6e\x67\x74\x68'])+'\x3c\x69\x6d\x67\x20\x73\x72\x63\x3d\x22'+img_src+_0xf135('0x8'),_0x4f7e17=(_0x3d978b=(_0x5d8383=_0x5d8383[_0xf135('0x3')](_0x4f7e17+_0x5ca864[_0xf135('0x1')]))[_0xf135('0x2')]())['\x69\x6e\x64\x65\x78\x4f\x66'](_0x5ca864);}_0x306e9f=_0x42c512+_0x5d8383;}if(Display_Emo){var _0x1888a7=Emo_List['\x6c\x65\x6e\x67\x74\x68'];_0x1888a7%0x2==0x1&&_0x1888a7--;for(_0xba37bf=0x0;_0xba37bf<_0x1888a7;_0xba37bf+=0x2){var _0x24dca6='\x3c\x69\x6d\x67\x20\x73\x72\x63\x3d\x22'+Emo_List[_0xba37bf+0x1]+_0xf135('0x9');for(_0x4f7e17=_0x306e9f['\x69\x6e\x64\x65\x78\x4f\x66'](Emo_List[_0xba37bf]);-0x1!=_0x4f7e17;)_0x4f7e17=(_0x306e9f=_0x306e9f[_0xf135('0x3')](0x0,_0x4f7e17)+_0x24dca6+_0x306e9f['\x73\x75\x62\x73\x74\x72\x69\x6e\x67'](_0x4f7e17+Emo_List[_0xba37bf][_0xf135('0x1')]))['\x69\x6e\x64\x65\x78\x4f\x66'](Emo_List[_0xba37bf]);}}return _0x306e9f;});
//]]></script>

Trong đó:
  • Display_Emo: Có hiển thị Emoticons hay không ? để false thì sẽ coi như không có chuyện gì xảy ra
  • Replace_Image_Link: Để true sẽ tự động thay thế các short code thành Emoticons và ngược lại
  • Replace_Image_Ext: Các định dạng ảnh được hỗ trợ
  • Content: đây là selector trỏ đến thẻ p chứa nội dung bình luận, nếu blog của bạn có class khác thì bạn thay lại cho hợp lý
  • 'short_code_1', 'link_image_1': tức ứng với short_code_1 thì sẽ được thay thế bởi ảnh có link_image_1,... điều này tức bạn có thể tạo không giới hạn emoticons và ảnh tương ứng

Dưới đây tôi có tạo sẵn 1 đoạn gồm 38 Emoticons


Code sẽ như sau

<script async='async' type='text/javascript'>//<![CDATA[
// Emoji by hung1001
Display_Emo = true; // Display emoticon or not? set "false" to no display
Replace_Image_Link = true; // Auto replace an image link choose "false" to disable.
Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP']; // (support: jpg, gif, png, bmp), only effect when Replace_Image_Link=true
Content =".comment-content"; // Selector to comment content
Emo_List = [
'&lt;3', 'https://i.imgur.com/lR5x4gA.png',
'@@', 'https://i.imgur.com/c7pCZR4.png',
'^_^', 'https://i.imgur.com/ssHCseh.png',
'^^', 'https://i.imgur.com/nqGPr1I.png',
':)', 'https://i.imgur.com/EpAy8Ug.png',
':(', 'https://i.imgur.com/47vo0tT.png',
'hihi', 'https://i.imgur.com/zJs274o.png',
':-)', 'https://i.imgur.com/Q68H3Ld.png',
':D', 'https://i.imgur.com/lb8I15E.png',
'=D', 'https://i.imgur.com/oDiLSQH.png',
':-d', 'https://i.imgur.com/vSy4sGd.png',
';(', 'https://i.imgur.com/6341F45.png',
';-(', 'https://i.imgur.com/GaKsxjk.png',
'@-)', 'https://i.imgur.com/ODxOdf9.png',
':P', 'https://i.imgur.com/YyrwuQH.png',
':o', 'https://i.imgur.com/S1qoQXL.png',
'-_-', 'https://i.imgur.com/BtcOHCG.png',
'(o)', 'https://i.imgur.com/g0Hor7n.png',
'(p)', 'https://i.imgur.com/zmxoslL.png',
':-s', 'https://i.imgur.com/GtrPfJl.png',
'(m)', 'https://i.imgur.com/WSVOm0A.png',
'8-)', 'https://i.imgur.com/cTXCEIx.png',
':-t', 'https://i.imgur.com/Kw9iTZp.png',
':-b', 'https://i.imgur.com/n6Ml1ZZ.png',
'b-(', 'https://i.imgur.com/lp48GRC.png',
':-#', 'https://i.imgur.com/b4fuTw4.png',
'(y)', 'https://i.imgur.com/l2H7MyN.png',
'x-)', 'https://i.imgur.com/87cz10Y.png',
'(k)', 'https://i.imgur.com/roSV0U3.png',
'(h)', 'https://i.imgur.com/eEiNVIc.png',
'cheer', 'https://i.imgur.com/4lTNz0d.png',
'(li)', 'https://i.imgur.com/UqhtaMy.png',
':v', 'https://i.imgur.com/SMOmQ9O.png',
':3', 'https://i.imgur.com/CuOx2n8.png',
'(c)', 'https://i.imgur.com/E1201lo.png',
'(s)', 'https://i.imgur.com/11H0dZr.png',
'(pl)', 'https://i.imgur.com/Kctqt3o.png',
'(f)', 'https://i.imgur.com/PxEbr0L.png'
];

var _0x135f=['\x73\x75\x62\x73\x74\x72\x69\x6e\x67','\x48\x54\x54\x50\x3a\x2f\x2f','\x69\x6e\x64\x65\x78\x4f\x66','\x74\x6f\x4c\x6f\x77\x65\x72\x43\x61\x73\x65','\x48\x54\x54\x50\x53\x3a\x2f\x2f','\x22\x20\x63\x6c\x61\x73\x73\x3d\x22\x63\x6f\x6d\x6d\x65\x6e\x74\x5f\x69\x6d\x67\x22\x2f\x3e','\x22\x20\x63\x6c\x61\x73\x73\x3d\x22\x63\x6f\x6d\x6d\x65\x6e\x74\x5f\x65\x6d\x6f\x22\x2f\x3e','\x68\x74\x6d\x6c','\x6c\x65\x6e\x67\x74\x68','\x74\x6f\x55\x70\x70\x65\x72\x43\x61\x73\x65'];(function(_0x11c2d3,_0xe2dc3d){var _0x55f084=function(_0x515c52){while(--_0x515c52){_0x11c2d3['\x70\x75\x73\x68'](_0x11c2d3['\x73\x68\x69\x66\x74']());}};_0x55f084(++_0xe2dc3d);}(_0x135f,0x75));var _0xf135=function(_0x33a9e7,_0x4c0a4e){_0x33a9e7=_0x33a9e7-0x0;var _0x12928e=_0x135f[_0x33a9e7];return _0x12928e;};$(Content)[_0xf135('0x0')](function(_0x239287,_0x306e9f){if(Replace_Image_Link){for(var _0x42c512='',_0x5d8383=_0x306e9f,_0xba37bf=0x0;_0xba37bf<Replace_Image_Ext[_0xf135('0x1')];_0xba37bf++)for(var _0x5ca864='\x2e'+Replace_Image_Ext[_0xba37bf],_0x3d978b=_0x5d8383[_0xf135('0x2')](),_0x4f7e17=_0x3d978b['\x69\x6e\x64\x65\x78\x4f\x66'](_0x5ca864);-0x1!=_0x4f7e17;){img_src=_0x5d8383[_0xf135('0x3')](0x0,_0x4f7e17+_0x5ca864[_0xf135('0x1')]);for(var _0x5cf461=_0xf135('0x4'),_0x587e5e=(_0x3d978b=img_src[_0xf135('0x2')]())[_0xf135('0x5')](_0x5cf461),_0x2c282d='';-0x1!=_0x587e5e;)_0x2c282d=_0x5cf461[_0xf135('0x6')](),img_src=img_src[_0xf135('0x3')](_0x587e5e+_0x5cf461[_0xf135('0x1')]),_0x587e5e=(_0x3d978b=img_src[_0xf135('0x2')]())[_0xf135('0x5')](_0x5cf461);for(_0x5cf461=_0xf135('0x7'),_0x587e5e=(_0x3d978b=img_src[_0xf135('0x2')]())[_0xf135('0x5')](_0x5cf461);-0x1!=_0x587e5e;)_0x2c282d=_0x5cf461['\x74\x6f\x4c\x6f\x77\x65\x72\x43\x61\x73\x65'](),img_src=img_src[_0xf135('0x3')](_0x587e5e+_0x5cf461[_0xf135('0x1')]),_0x587e5e=(_0x3d978b=img_src[_0xf135('0x2')]())[_0xf135('0x5')](_0x5cf461);if(''==_0x2c282d||img_src['\x6c\x65\x6e\x67\x74\x68']<0x6)break;img_src=_0x2c282d+img_src,_0x42c512+=_0x5d8383[_0xf135('0x3')](0x0,_0x4f7e17+_0x5ca864[_0xf135('0x1')]-img_src['\x6c\x65\x6e\x67\x74\x68'])+'\x3c\x69\x6d\x67\x20\x73\x72\x63\x3d\x22'+img_src+_0xf135('0x8'),_0x4f7e17=(_0x3d978b=(_0x5d8383=_0x5d8383[_0xf135('0x3')](_0x4f7e17+_0x5ca864[_0xf135('0x1')]))[_0xf135('0x2')]())['\x69\x6e\x64\x65\x78\x4f\x66'](_0x5ca864);}_0x306e9f=_0x42c512+_0x5d8383;}if(Display_Emo){var _0x1888a7=Emo_List['\x6c\x65\x6e\x67\x74\x68'];_0x1888a7%0x2==0x1&&_0x1888a7--;for(_0xba37bf=0x0;_0xba37bf<_0x1888a7;_0xba37bf+=0x2){var _0x24dca6='\x3c\x69\x6d\x67\x20\x73\x72\x63\x3d\x22'+Emo_List[_0xba37bf+0x1]+_0xf135('0x9');for(_0x4f7e17=_0x306e9f['\x69\x6e\x64\x65\x78\x4f\x66'](Emo_List[_0xba37bf]);-0x1!=_0x4f7e17;)_0x4f7e17=(_0x306e9f=_0x306e9f[_0xf135('0x3')](0x0,_0x4f7e17)+_0x24dca6+_0x306e9f['\x73\x75\x62\x73\x74\x72\x69\x6e\x67'](_0x4f7e17+Emo_List[_0xba37bf][_0xf135('0x1')]))['\x69\x6e\x64\x65\x78\x4f\x66'](Emo_List[_0xba37bf]);}}return _0x306e9f;});
//]]></script>

Đến đây thì bạn đã tích hợp xong Emoticons vào Thread Comment blog của mình. Xem demo

Tuy nhiên nếu không hiện ra list short code thì chẳng ai biết bạn đã dùng short code gì mà áp dụng mỗi khi bình luận

Bước 2: Tạo khung list emoticons cố định với khung viết bình luận


Trước tiên bạn cần ghim khung này cố định luôn đi kèm khung viết bình luận.

  • Tìm đến đoạn <b:includable id='threaded-comment-form' var='post'> và thêm vào sau <b:else/> code sau <div id='threaded-comment-form'> 
  • Tiếp tục chèn phía trên </b:if> code sau </div>
  • Xem ảnh dưới để dễ hình dung



Tìm đoạn mã document.getElementById(domId).insertBefore(replybox, null); và thay thế nó thành document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);

Đến đây bạn đã cố định được khung list emoticon luôn dính vào khung viết bình luận, bạn hiện khung list emotion theo form sau (dán vào dưới <div id='threaded-comment-form'>)

<style>
    .emoji .item{float:left;width:40px;text-align:center;height:40px;margin:10px 0 0 0}
    .emoji span{display:block;font-size:12px}
    .comment_emo{width:20px;height:20px}
</style>
<div class='emoji'>
    <span class='item'><img class='comment_emo' src='link_image_1'/><span>short_code_1</span></span>
    <span class='item'><img class='comment_emo' src='link_image_2'/><span>short_code_2</span></span>
    ...
</div>

Bạn thay link và short code như bạn đã đặt ở phần js. Nếu bạn sử dụng 38 Emoticons như tôi ở trên code sẽ là

<style>
    .emoji .item{float:left;width:40px;text-align:center;height:40px;margin:10px 0 0 0}
    .emoji span{display:block;font-size:12px}
    .comment_emo{width:20px;height:20px}
</style>
<div class='emoji'>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/lR5x4gA.png'/><span>&lt;3</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/c7pCZR4.png'/><span>@@</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/ssHCseh.png'/><span>^_^</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/nqGPr1I.png'/><span>^^</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/EpAy8Ug.png'/><span>:)</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/47vo0tT.png'/><span>:(</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/zJs274o.png'/><span>hihi</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/Q68H3Ld.png'/><span>:-)</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/lb8I15E.png'/><span>:D</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/oDiLSQH.png'/><span>=D</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/vSy4sGd.png'/><span>:-d</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/6341F45.png'/><span>;(</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/GaKsxjk.png'/><span>;-(</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/ODxOdf9.png'/><span>@-)</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/YyrwuQH.png'/><span>:P</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/S1qoQXL.png'/><span>:o</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/BtcOHCG.png'/><span>-_-</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/g0Hor7n.png'/><span>(o)</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/zmxoslL.png'/><span>(p)</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/GtrPfJl.png'/><span>:-s</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/WSVOm0A.png'/><span>(m)</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/cTXCEIx.png'/><span>8-)</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/Kw9iTZp.png'/><span>:-t</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/n6Ml1ZZ.png'/><span>:-b</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/lp48GRC.png'/><span>b-(</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/b4fuTw4.png'/><span>:-#</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/l2H7MyN.png'/><span>(y)</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/87cz10Y.png'/><span>x-)</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/roSV0U3.png'/><span>(k)</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/eEiNVIc.png'/><span>(h)</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/4lTNz0d.png'/><span>cheer</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/UqhtaMy.png'/><span>(li)</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/SMOmQ9O.png'/><span>:v</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/CuOx2n8.png'/><span>:3</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/E1201lo.png'/><span>(c)</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/11H0dZr.png'/><span>(s)</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/Kctqt3o.png'/><span>(pl)</span></span>
    <span class='item'><img class='comment_emo' src='https://i.imgur.com/PxEbr0L.png'/><span>(f)</span></span>
</div>

Sau khi làm đến đây bạn đã hiện được khung list emotions đi kèm khung viết bình luận, nhưng nó chỉ hiện ở những bài viết có bình luận, vì thế bạn cần lặp lại bước 2 cho bài viết chưa có bình luận nào. Bạn làm tương tự với thẻ <b:includable id='comment-form' var='post'> nhưng bỏ qua phần thay thế document.getElementById(domId).insertBefore(replybox, null); vì đã làm ở trên rồi


Bạn lưu ý nếu như dùng short code có chứa kí tự < hoặc > thì cần thay chúng thành &lt;&gt; để không bị lỗi mã HTML nhé. Việc đặt short code nên tránh kiểu đặt như sau:
  • Short code 1 :)
  • Short code 2 :))
Nếu bạn đặt như trên thì short code 2 sẽ không bao giờ được hiện vì nó có bao gồm short code 1. Bạn có thể tìm kiếm trên mạng các bộ emoticons và lấy link ảnh của chúng, upload lên 1 host nào đó có link ảnh thật ngắn để giảm kích thước trang. Bạn cũng không nên lạm dụng tạo quá nhiều icon vì sẽ làm script nặng thêm

Ok vậy thôi cũng không phức tạp lắm, hi vọng thủ thuật này có ích cho bạn, và đừng ngại để lại bình luận nếu gặp vướng mắc nhé !

Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Quang Thắng 10/13/2018 06:25:00 PM
    :d làm sao mà bấm vào nó tự coppy vậy a?
    Please wait while i am loading Facebook SDK js