[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'>)

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 < và > để 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é !

Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam

Lưu ý khi bình luận

1. Không vi phạm luật pháp nước CHXHCN Việt Nam

2. Không vi phạm thuần phong mỹ tục Việt Nam

3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị

4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website

5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán

6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt

7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên

Đã hiểu

Emoji Emoticon Parse

Chèn ảnh bằng cách dán trực tiếp link ảnh | Tool upload ảnh

Chèn video Youtube bằng cách dán trực tiếp link video

Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

6 comments

Hide all replies

Potato 10/13/2018 06:25:00 PM

:d làm sao mà bấm vào nó tự coppy vậy a?

Hưng Hoàng Văn 10/13/2018 07:46:00 PM

clipboardjs

Potato 10/14/2018 11:00:00 PM

thực sự e ko biết sử dụng sao ạ :(

Hưng Hoàng Văn 10/15/2018 03:39:00 PM

1. Link thư viện clipboadjs
[pre]<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min.js'/>[/pre]

2. Khởi tạo 1 button với class bất kì ví dụ .btn thì sẽ khai báo như sau
[pre]<script>new ClipboardJS('.btn')</script>[/pre]

3. Tạo button và target id tương ứng ví dụ
[pre]<a class='btn' data-clipboard-target="#i1">Icon 1</a> <span id='i1'>Short Code 1</span>
<a class='btn' data-clipboard-target="#i2">Icon 2</a> <span id='i2'>Short Code 2</span>
<a class='btn' data-clipboard-target="#i3">Icon 3</a> <span id='i3'>Short Code 3</span>[/pre]

NAD 7/05/2020 01:00:00 AM

Ví dụ mình có link emo width 120px:
https://1.bp.blogspot.com/-fB_jL0tkjMw/WRcj_msM-gI/AAAAAAAALIo/8DK4qRD2ezAbImZ9q4sRnIY2gh-opMeTQCLcB/s180/X.png

Giờ muốn đặt width cho nó nén xuống còn 40px thì làm thế nào Hưng?

(cái này để khắc phục tình trạng trên mobile nhìn các emo rất mờ, chất lượng hình ảnh kém)

:)

NAD 7/05/2020 01:02:00 AM

Test, có vẻ hay hơn của duypham

https://www.youtube.com/watch?v=rWqnqm5KjpQ

Hưng Hoàng Văn | Thủ thuật quản lý chuyên sâu

Labels

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

Bước 1: Chèn script

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

About this article

Featured Post

NewsPlus - Premium Blogger Template by Hung1001

Category

Trending Posts

[BatchScript] Nhập key và lấy Installation ID Office nhanh và chuẩn nhất

[Blogger] Tạo khung chứa code có nút copy to clipboard cho blogspot

Lưu trữ code cho website sử dụng GitHub phân phối qua CDN jsDelivr

Tìm hiểu về file EI.cfg và PID.txt trong sources ISO

[Blogger] Hướng dẫn chèn phân trang cho blogspot

[Tips] Hướng dẫn cài đặt Media Feature Pack cho các phiên bản N và KN

Blogger JSON Feed API - Feed Post

Sử dụng GitHub Page xem trước nội dung tĩnh HTML

Hướng dẫn cách tạo Subdomain cho Blogspot

[Blogger] Blogger template test code, demo code

Most Viewed

[BatchScript] Nhập key và lấy Installation ID Office nhanh và chuẩn nhất

[BatchScript] Nhập key và lấy Installation ID Windows nhanh và chuẩn nhất

[Tips] Hướng dẫn cài đặt Media Feature Pack cho các phiên bản N và KN

[Blogger] Hiệu ứng tuyết rơi bằng CSS3

[Tutorial] Activate by phone Windows & Office with MSAct

Partner