Hướng dẫn chèn biểu tượng cảm xúc vào nhận xét Blogger

Bạn muốn xem:

Trong quá trình tìm hiểu vè cách thức chèn biểu tượng vào khung nhận xét của Blogger trên mạng mình thấy đa số các bài viết đều cập nhật biểu tượng cũ sử dụng biểu tượng chủ yếu của yahoo và rất ít biểu tượng. Bạn có thể thấy một số mẫu template người ta chèn sẵn nhưng không được đẹp và không tối ưu tốc độ tải trang khi thêm vào mẫu.

Sau khi tìm tòi mình phát hiện ra đa số những trang web hiện nay như Facebook, Twitter đều sử dụng biểu tượng emojione của trang emojione.com và thậm chí ngay cả Blogger cũng đang sử dụng biểu tượng này. Thậm chí Google, Apple, Microsoft họ cũng tích hợp biểu tượng này vào bàn phím. Cách chèn như thê nào thì họ chèn theo cách của họ mình không biết được nhưng họ đều sử dụng host (nguồn lưu trữ từ trang web emojione.com) như vậy nếu trang web đó cập nhật biểu tượng mới thì các trang web đang sử dụng biểu tượng cũng cập nhật theo.

Giới thiệu qua về trang web emojione.com hiện tại trang web này đang sử dụng cả ngàn biểu tượng gồm 8 khung biểu tượng về các chủ đề khác nhau và trong mỗi khung có khoảng hơn 200 biểu tượng.

Quay trở lại tiêu đề bài viết nếu muốn chèn biểu tượng của web này vào nhận xét của Blogger chúng ta sẽ có một vài cách khác nhau từ cách đơn giản đến cách phức tạp can thiệp vào mẫu template. Dưới đây là hướng dẫn cụ thể:

Cách 1: Chèn trực tiếp biểu tượng theo cách đơn giản

Rất đơn giản bạn chỉ cần cài plugin của emojione trên trình duyệt Chrome, Firefox, Opera, Coccoc...Ưu điểm của cách này nhanh gọn nhưng nhược điểm không tùy biến được biểu tượng cho nên biểu tượng sẽ nhỏ.

Để cài đặt truy cập trình duyệt chọn cài tiện ích tìm từ khóa emoji-keyboard

Hoặc nếu bạn sử dụng điện thoại, máy tính bảng bạn có thể sử dụng bàn phím trong đó đã tích hợp sẵn biểu tượng chỉ cần chèn vào thôi. Hoặc nếu bạn đang sử dụng Windows 10 trên máy tính bạn cũng có thể sử dụng nút bàn phím cảm ứng để chèn biểu tượng trực tiếp.

Cách 2: Chèn theo cách phức tạp can thiệp vào mẫu template

Nói là cách phức tạp ở đây không phải là chèn biểu tượng mà là thêm css, js và biểu tượng trực tiếp vào mẫu nó hơi phức tạp. Nhưng ưu diểm có thể tùy biến được biểu tượng và khi thêm cũng không làm ảnh hưởng đến tốc độ tải trang bao gồm những bước sau đây:

Bước 1: Thêm css

Bạn có thể thêm vào trước </b:skin> nhưng theo mình nghĩ khung nhận xét chỉ xuất hiện trong bài viết và trong trang tĩnh cho nên bạn có thể chèn css sau </b:skin> cũng được như sau:

Copy

<b:if cond='data:blog.pageType != &quot;index&quot;'>

<style type='text/css'>

.emojione {

    height: 27px;

    font-size: inherit;

    display: inline-block;

    margin: 6px 3px 0 0;

    line-height: normal;

    vertical-align: bottom

}

img.emojione {

    width: auto

}

.copy-text {

    display: inline-block;

    padding: 0;

    border: 0;

    margin: 0

}

.tooltip {

    position: absolute;

    z-index: 1030;

    display: block;

    font-size: 12px;

    line-height: 1.4;

    opacity: 0;

    filter: alpha(opacity=0);

    visibility: visible

}

.tooltip.in {

    opacity: .9;

    filter: alpha(opacity=90)

}

.tooltip.top {

    padding: 5px 0;

    margin-top: -3px

}

.tooltip.right {

    padding: 0 5px;

    margin-left: 3px

}

.tooltip.bottom {

    padding: 5px 0;

    margin-top: 3px

}

.tooltip.left {

    padding: 0 5px;

    margin-left: -3px

}

.tooltip-inner {

    max-width: 200px;

    padding: 3px 8px;

    color: #fff;

    text-align: center;

    text-decoration: none;

    background-color: #000;

    border-radius: 4px

}

.tooltip-arrow {

    position: absolute;

    width: 0;

    height: 0;

    border-color: transparent;

    border-style: solid

}

.tooltip.top .tooltip-arrow {

    bottom: 0;

    left: 50%;

    margin-left: -5px;

    border-top-color: #000;

    border-width: 5px 5px 0

}

.tooltip.top-left .tooltip-arrow {

    bottom: 0;

    left: 5px;

    border-top-color: #000;

    border-width: 5px 5px 0

}

.tooltip.top-right .tooltip-arrow {

    right: 5px;

    bottom: 0;

    border-top-color: #000;

    border-width: 5px 5px 0

}

.tooltip.right .tooltip-arrow {

    top: 50%;

    left: 0;

    margin-top: -5px;

    border-right-color: #000;

    border-width: 5px 5px 5px 0

}

.tooltip.left .tooltip-arrow {

    top: 50%;

    right: 0;

    margin-top: -5px;

    border-left-color: #000;

    border-width: 5px 0 5px 5px

}

.tooltip.bottom .tooltip-arrow {

    top: 0;

    left: 50%;

    margin-left: -5px;

    border-bottom-color: #000;

    border-width: 0 5px 5px

}

.tooltip.bottom-left .tooltip-arrow {

    top: 0;

    left: 5px;

    border-bottom-color: #000;

    border-width: 0 5px 5px

}

.tooltip.bottom-right .tooltip-arrow {

    top: 0;

    right: 5px;

    border-bottom-color: #000;

    border-width: 0 5px 5px

}

</style>

</b:if>

Bước 2: Thêm javascript trước thẻ đóng </body>

Copy

<script src='//cdn.jsdelivr.net/npm/emojione@3.1.2/lib/js/emojione.min.js' type='text/javascript'/>

<script src='//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js' type='text/javascript'/>

<script src='//cdn.rawgit.com/blogthuthuatwin10/js/master/clipboard.min.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {

 $(".convert-emoji").each(function() {

  var original = $(this).html();

  var converted = emojione.toImage(original);

  $(this).html(converted);

 });

});



$('.copy-text').tooltip({

 trigger: 'click',

 placement: 'bottom'

});



function setTooltip(btn, message) {

 btn.tooltip('hide')

  .attr('data-original-title', message)

  .tooltip('show');

}



function hideTooltip(btn) {

 setTimeout(function() {

  btn.tooltip('hide');

 }, 1000);

}



var clipboard = new Clipboard('.copy-text');



clipboard.on('success', function(e) {

 var btn = $(e.trigger);

 setTooltip(btn, 'Copied');

 hideTooltip(btn);

});

//]]>

</script>

Bước 3: Chèn biểu tượng bên dưới khung nhận xét cho người đọc thấy biểu tượng để chèn

Đầu tiên bạn tìm từ khóa comments-content và thêm trước nó đoạn <div class='convert-emoji'> rồi thêm </div> trước <p class='comment-footer'> như hình minh họa dưới đây:

Tiếp tục thêm đoạn code sau ngay trên </div> mà bạn vừa thêm ở trên

Code:

Copy

<p>Chèn biểu tượng cảm xúc: <a onclick='if(document.getElementById(&apos;spoiler2&apos;) .style.display==&apos;none&apos;) {document.getElementById(&apos;spoiler2&apos;) .style.display=&apos;&apos;}else{document.getElementById(&apos;spoiler2&apos;) .style.display=&apos;none&apos;}' style='outline:0;cursor:pointer;color:#333333' title='nhấp vào đây để thấy biểu tượng' type='button'>nhấp vào đây</a></p>

<div id='spoiler2' style='display:none;margin-bottom:10px'>

<p>Nhấp chuột trái vào biểu tượng cần chèn rồi chuột phải vào khung nhận xét chọn Paste (Ctrl+V)</p>

<a class='copy-text' data-clipboard-target='#p1' data-clipboard-text=':grinning:' href='javascript:void(0);'><p id='p1'>:grinning:</p></a>

<a class='copy-text' data-clipboard-target='#p2' data-clipboard-text=':smiley:' href='javascript:void(0);'><p id='p2'>:smiley:</p></a>

<a class='copy-text' data-clipboard-target='#p3' data-clipboard-text=':smile:' href='javascript:void(0);'><p id='p3'>:smile:</p></a>

<a class='copy-text' data-clipboard-target='#p4' data-clipboard-text=':grin:' href='javascript:void(0);'><p id='p4'>:grin:</p></a> 

<a class='copy-text' data-clipboard-target='#p5' data-clipboard-text=':laughing:' href='javascript:void(0);'><p id='p5'>:laughing:</p></a> 

<a class='copy-text' data-clipboard-target='#p6' data-clipboard-text=':sweat_smile:' href='javascript:void(0);'><p id='p6'>:sweat_smile:</p></a> 

<a class='copy-text' data-clipboard-target='#p7' data-clipboard-text=':joy:' href='javascript:void(0);'><p id='p7'>:joy:</p></a> 

<a class='copy-text' data-clipboard-target='#p8' data-clipboard-text=':rofl:' href='javascript:void(0);'><p id='p8'>:rofl:</p></a> 

<a class='copy-text' data-clipboard-target='#p9' data-clipboard-text=':blush:' href='javascript:void(0);'><p id='p9'>:blush:</p></a> 

<a class='copy-text' data-clipboard-target='#p10' data-clipboard-text=':innocent:' href='javascript:void(0);'><p id='p10'>:innocent:</p></a> 

<a class='copy-text' data-clipboard-target='#p11' data-clipboard-text=':slight_smile:' href='javascript:void(0);'><p id='p11'>:slight_smile:</p></a> 

<a class='copy-text' data-clipboard-target='#p12' data-clipboard-text=':upside_down:' href='javascript:void(0);'><p id='p12'>:upside_down:</p></a> 

<a class='copy-text' data-clipboard-target='#p13' data-clipboard-text=':wink:' href='javascript:void(0);'><p id='p13'>:wink:</p></a> 

<a class='copy-text' data-clipboard-target='#p14' data-clipboard-text=':relieved:' href='javascript:void(0);'><p id='p14'>:relieved:</p></a> 

<a class='copy-text' data-clipboard-target='#p15' data-clipboard-text=':heart_eyes:' href='javascript:void(0);'><p id='p15'>:heart_eyes:</p></a> 

<a class='copy-text' data-clipboard-target='#p16' data-clipboard-text=':kissing_heart:' href='javascript:void(0);'><p id='p16'>:kissing_heart:</p></a> 

<a class='copy-text' data-clipboard-target='#p17' data-clipboard-text=':kissing:' href='javascript:void(0);'><p id='p17'>:kissing:</p></a> 

<a class='copy-text' data-clipboard-target='#p18' data-clipboard-text=':kissing_smiling_eyes:' href='javascript:void(0);'><p id='p18'>

:kissing_smiling_eyes:</p></a>

<a class='copy-text' data-clipboard-target='#p19' data-clipboard-text=':kissing_closed_eyes:' href='javascript:void(0);'><p id='p19'>

:kissing_closed_eyes:</p></a>

<a class='copy-text' data-clipboard-target='#p20' data-clipboard-text=':yum:' href='javascript:void(0);'><p id='p20'>

:yum:</p></a>

<a class='copy-text' data-clipboard-target='#p21' data-clipboard-text=':stuck_out_tongue_winking_eye:' href='javascript:void(0);'><p id='p21'>

:stuck_out_tongue_winking_eye:</p></a>

<a class='copy-text' data-clipboard-target='#p22' data-clipboard-text=':stuck_out_tongue_closed_eyes:' href='javascript:void(0);'><p id='p22'>

:stuck_out_tongue_closed_eyes:</p></a>

<a class='copy-text' data-clipboard-target='#p23' data-clipboard-text=':stuck_out_tongue:' href='javascript:void(0);'><p id='p23'>:stuck_out_tongue:</p></a>

<a class='copy-text' data-clipboard-target='#p24' data-clipboard-text=':hugging:' href='javascript:void(0);'><p id='p24'>:hugging:</p></a>

<a class='copy-text' data-clipboard-target='#p25' data-clipboard-text=':nerd:' href='javascript:void(0);'><p id='p25'>:nerd:</p></a>

<a class='copy-text' data-clipboard-target='#p26' data-clipboard-text=':sunglasses:' href='javascript:void(0);'><p id='p26'>:sunglasses:</p></a>

<a class='copy-text' data-clipboard-target='#p27' data-clipboard-text=':clown:' href='javascript:void(0);'><p id='p27'>

:clown:</p></a>

<a class='copy-text' data-clipboard-target='#p28' data-clipboard-text=':cowboy:' href='javascript:void(0);'><p id='p28'>:cowboy:</p></a>

<a class='copy-text' data-clipboard-target='#p29' data-clipboard-text=':smirk:' href='javascript:void(0);'><div id='p29'>:smirk:</div></a>

<a class='copy-text' data-clipboard-target='#p30' data-clipboard-text=':unamused:' href='javascript:void(0);'><p id='p30'>:unamused:</p></a>

<a class='copy-text' data-clipboard-target='#p31' data-clipboard-text=':disappointed:' href='javascript:void(0);'><p id='p31'>:disappointed:</p></a>

<a class='copy-text' data-clipboard-target='#p32' data-clipboard-text=':pensive:' href='javascript:void(0);'><p id='p32'>:pensive:</p></a>

<a class='copy-text' data-clipboard-target='#p33' data-clipboard-text=':worried:' href='javascript:void(0);'><p id='p33'>:worried:</p></a>

<a class='copy-text' data-clipboard-target='#p34' data-clipboard-text=':confused:' href='javascript:void(0);'><p id='p34'>:confused:</p></a>

<a class='copy-text' data-clipboard-target='#p35' data-clipboard-text=':slight_frown:' href='javascript:void(0);'><p id='p35'>:slight_frown:</p></a>

<a class='copy-text' data-clipboard-target='#p36' data-clipboard-text=':persevere:' href='javascript:void(0);'><p id='p36'>:persevere:</p></a>

<a class='copy-text' data-clipboard-target='#p37' data-clipboard-text=':confounded:' href='javascript:void(0);'><p id='p37'>:confounded:</p>

</a>

<a class='copy-text' data-clipboard-target='#p38' data-clipboard-text=':tired_face:' href='javascript:void(0);'><p id='p38'>:tired_face:</p></a>

<a class='copy-text' data-clipboard-target='#p39' data-clipboard-text=':weary:' href='javascript:void(0);'><p id='p39'>:weary:</p></a>

<a class='copy-text' data-clipboard-target='#p40' data-clipboard-text=':triumph:' href='javascript:void(0);'><p id='p40'>:triumph:</p></a>

<a class='copy-text' data-clipboard-target='#p41' data-clipboard-text=':angry:' href='javascript:void(0);'><p id='p41'>:angry:</p></a>

<a class='copy-text' data-clipboard-target='#p42' data-clipboard-text=':rage:' href='javascript:void(0);'><p id='p42'>:rage:</p></a>

<a class='copy-text' data-clipboard-target='#p43' data-clipboard-text=':no_mouth:' href='javascript:void(0);'><p id='p43'>:no_mouth:</p></a>

<a class='copy-text' data-clipboard-target='#p44' data-clipboard-text=':neutral_face:' href='javascript:void(0);'><p id='p44'>:neutral_face:</p></a>

<a class='copy-text' data-clipboard-target='#p45' data-clipboard-text=':expressionless:' href='javascript:void(0);'><p id='p45'>:expressionless:</p></a>

<a class='copy-text' data-clipboard-target='#p46' data-clipboard-text=':hushed:' href='javascript:void(0);'><p id='p46'>:hushed:</p></a>

<a class='copy-text' data-clipboard-target='#p47' data-clipboard-text=':frowning:' href='javascript:void(0);'><p id='p47'>:frowning:</p></a>

<a class='copy-text' data-clipboard-target='#p48' data-clipboard-text=':anguished:' href='javascript:void(0);'><p id='p48'>:anguished:</p></a>

<a class='copy-text' data-clipboard-target='#p49' data-clipboard-text=':open_mouth:' href='javascript:void(0);'><p id='p49'>:open_mouth:</p></a>

<a class='copy-text' data-clipboard-target='#p50' data-clipboard-text=':astonished:' href='javascript:void(0);'><p id='p50'>:astonished:</p></a>

<a class='copy-text' data-clipboard-target='#p51' data-clipboard-text=':dizzy_face:' href='javascript:void(0);'><p id='p51'>:dizzy_face:</p></a>

<a class='copy-text' data-clipboard-target='#p52' data-clipboard-text=':flushed:' href='javascript:void(0);'><p id='p52'>:flushed:</p></a>

<a class='copy-text' data-clipboard-target='#p53' data-clipboard-text=':scream:' href='javascript:void(0);'><p id='p53'>:scream:</p></a>

<a class='copy-text' data-clipboard-target='#p54' data-clipboard-text=':fearful:' href='javascript:void(0);'><p id='p54'>:fearful:</p></a>

<a class='copy-text' data-clipboard-target='#p55' data-clipboard-text=':cold_sweat:' href='javascript:void(0);'><p id='p55'>:cold_sweat:</p></a>

<a class='copy-text' data-clipboard-target='#p56' data-clipboard-text=':cry:' href='javascript:void(0);'><p id='p56'>:cry:</p></a>

<a class='copy-text' data-clipboard-target='#p57' data-clipboard-text=':disappointed_relieved:' href='javascript:void(0);'><p id='p57'>:disappointed_relieved:</p></a>

<a class='copy-text' data-clipboard-target='#p58' data-clipboard-text=':drooling_face:' href='javascript:void(0);'><p id='p58'>:drooling_face:</p></a>

<a class='copy-text' data-clipboard-target='#p59' data-clipboard-text=':sob:' href='javascript:void(0);'><p id='p59'>:sob:</p></a>

<a class='copy-text' data-clipboard-target='#p60' data-clipboard-text=':sweat:' href='javascript:void(0);'><p id='p60'>:sweat:</p></a>

<a class='copy-text' data-clipboard-target='#p61' data-clipboard-text=':sleepy:' href='javascript:void(0);'><p id='p61'>:sleepy:</p></a>

<a class='copy-text' data-clipboard-target='#p62' data-clipboard-text=':sleeping:' href='javascript:void(0);'><p id='p62'>:sleeping:</p></a>

<a class='copy-text' data-clipboard-target='#p63' data-clipboard-text=':rolling_eyes:' href='javascript:void(0);'><p id='p63'>:rolling_eyes:</p></a>

<a class='copy-text' data-clipboard-target='#p64' data-clipboard-text=':thinking:' href='javascript:void(0);'><p id='p64'>

:thinking:</p></a>

<a class='copy-text' data-clipboard-target='#p65' data-clipboard-text=':lying_face:' href='javascript:void(0);'><p id='p65'>:lying_face:</p></a>

<a class='copy-text' data-clipboard-target='#p66' data-clipboard-text=':grimacing:' href='javascript:void(0);'><p id='p66'>:grimacing:</p></a>

<a class='copy-text' data-clipboard-target='#p67' data-clipboard-text=':zipper_mouth:' href='javascript:void(0);'><p id='p67'>:zipper_mouth:</p></a>

<a class='copy-text' data-clipboard-target='#p68' data-clipboard-text=':nauseated_face:' href='javascript:void(0);'><p id='p68'>:nauseated_face:</p></a>

<a class='copy-text' data-clipboard-target='#p69' data-clipboard-text=':sneezing_face:' href='javascript:void(0);'><p id='p69'>:sneezing_face:</p></a>

<a class='copy-text' data-clipboard-target='#p70' data-clipboard-text=':mask:' href='javascript:void(0);'><p id='p70'>:mask:</p></a>

<a class='copy-text' data-clipboard-target='#p71' data-clipboard-text=':thermometer_face:' href='javascript:void(0);'><p id='p71'>:thermometer_face:</p></a>

<a class='copy-text' data-clipboard-target='#p72' data-clipboard-text=':head_bandage:' href='javascript:void(0);'><p id='p72'>:head_bandage:</p></a>

<a class='copy-text' data-clipboard-target='#p73' data-clipboard-text=':smiling_imp:' href='javascript:void(0);'><p id='p73'>:smiling_imp:</p></a>

<a class='copy-text' data-clipboard-target='#p74' data-clipboard-text=':imp:' href='javascript:void(0);'><p id='p74'>:imp:</p></a>

<a class='copy-text' data-clipboard-target='#p75' data-clipboard-text=':japanese_ogre:' href='javascript:void(0);'><p id='p75'>

:japanese_ogre:</p></a>

<a class='copy-text' data-clipboard-target='#p76' data-clipboard-text=':japanese_goblin:' href='javascript:void(0);'><p id='p76'>

:japanese_goblin:</p></a>

<a class='copy-text' data-clipboard-target='#p77' data-clipboard-text=':poop:' href='javascript:void(0);'><p id='p77'>:poop:</p></a>

<a class='copy-text' data-clipboard-target='#p78' data-clipboard-text=':ghost:' href='javascript:void(0);'><p id='p78'>:ghost:</p></a>

<a class='copy-text' data-clipboard-target='#p79' data-clipboard-text=':skull:' href='javascript:void(0);'><p id='p79'>:skull:</p></a>

<a class='copy-text' data-clipboard-target='#p80' data-clipboard-text=':alien:' href='javascript:void(0);'><p id='p80'>:alien:</p></a>

<a class='copy-text' data-clipboard-target='#p81' data-clipboard-text=':space_invader:' href='javascript:void(0);'><p id='p81'>:space_invader:</p></a>

<a class='copy-text' data-clipboard-target='#p82' data-clipboard-text=':robot:' href='javascript:void(0);'><p id='p82'>:robot:</p></a>

<a class='copy-text' data-clipboard-target='#p83' data-clipboard-text=':jack_o_lantern:' href='javascript:void(0);'><p id='p83'>:jack_o_lantern:</p></a>

<a class='copy-text' data-clipboard-target='#p84' data-clipboard-text=':smiley_cat:' href='javascript:void(0);'><p id='p84'>:smiley_cat:</p></a>

<a class='copy-text' data-clipboard-target='#p85' data-clipboard-text=':smile_cat:' href='javascript:void(0);'><p id='p85'>:smile_cat:</p></a>

<a class='copy-text' data-clipboard-target='#p86' data-clipboard-text=':joy_cat:' href='javascript:void(0);'><p id='p86'>:joy_cat:</p></a>

<a class='copy-text' data-clipboard-target='#p87' data-clipboard-text=':heart_eyes_cat:' href='javascript:void(0);'><p id='p87'>:heart_eyes_cat:</p></a>

<a class='copy-text' data-clipboard-target='#p88' data-clipboard-text=':smirk_cat:' href='javascript:void(0);'><p id='p88'>:smirk_cat:</p></a>

<a class='copy-text' data-clipboard-target='#p89' data-clipboard-text=':kissing_cat:' href='javascript:void(0);'><p id='p89'>:kissing_cat:</p></a>

<a class='copy-text' data-clipboard-target='#p90' data-clipboard-text=':scream_cat:' href='javascript:void(0);'><p id='p90'>:scream_cat:</p></a>

<a class='copy-text' data-clipboard-target='#p91' data-clipboard-text=':crying_cat_face:' href='javascript:void(0);'><p id='p91'>:crying_cat_face:</p></a>

<a class='copy-text' data-clipboard-target='#p91' data-clipboard-text=':pouting_cat:' href='javascript:void(0);'><p id='p91'>:pouting_cat:</p></a>

<a class='copy-text' data-clipboard-target='#p92' data-clipboard-text=':open_hands:' href='javascript:void(0);'><p id='p92'>:open_hands:</p></a>

<a class='copy-text' data-clipboard-target='#p93' data-clipboard-text=':raised_hands:' href='javascript:void(0);'><p id='p93'>:raised_hands:</p></a>

<a class='copy-text' data-clipboard-target='#p94' data-clipboard-text=':clap:' href='javascript:void(0);'><p id='p94'>:clap:</p></a>

<a class='copy-text' data-clipboard-target='#p95' data-clipboard-text=':pray:' href='javascript:void(0);'><p id='p95'>:pray:</p></a>

<a class='copy-text' data-clipboard-target='#p96' data-clipboard-text=':handshake:' href='javascript:void(0);'><p id='p96'>:handshake:</p></a>

<a class='copy-text' data-clipboard-target='#p97' data-clipboard-text=':thumbsup:' href='javascript:void(0);'><p id='p97'>:thumbsup:</p></a>

<a class='copy-text' data-clipboard-target='#p98' data-clipboard-text=':thumbsdown:' href='javascript:void(0);'><p id='p98'>:thumbsdown:</p></a>

<a class='copy-text' data-clipboard-target='#p99' data-clipboard-text=':punch:' href='javascript:void(0);'><p id='p99'>:punch:</p></a>

<a class='copy-text' data-clipboard-target='#p100' data-clipboard-text=':fist:' href='javascript:void(0);'><p id='p100'>:fist:</p></a>

<a class='copy-text' data-clipboard-target='#p101' data-clipboard-text=':left_facing_fist:' href='javascript:void(0);'><p id='p101'>:left_facing_fist:</p></a>

<a class='copy-text' data-clipboard-target='#p102' data-clipboard-text=':right_facing_fist:' href='javascript:void(0);'><p id='p102'>:right_facing_fist:</p></a>

<a class='copy-text' data-clipboard-target='#p103' data-clipboard-text=':fingers_crossed:' href='javascript:void(0);'><p id='p103'>:fingers_crossed:</p></a>

<a class='copy-text' data-clipboard-target='#p104' data-clipboard-text=':v:' href='javascript:void(0);'><p id='p104'>:v:</p></a>

<a class='copy-text' data-clipboard-target='#p105' data-clipboard-text=':metal:' href='javascript:void(0);'><p id='p105'>:metal:</p></a>

<a class='copy-text' data-clipboard-target='#p106' data-clipboard-text=':ok_hand:' href='javascript:void(0);'><p id='p106'>:ok_hand:</p></a>

<a class='copy-text' data-clipboard-target='#p107' data-clipboard-text=':point_left:' href='javascript:void(0);'><p id='p107'>:point_left:</p></a>

<a class='copy-text' data-clipboard-target='#p108' data-clipboard-text=':point_right:' href='javascript:void(0);'><p id='p108'>:point_right:</p></a>

<a class='copy-text' data-clipboard-target='#p109' data-clipboard-text=':point_up_2:' href='javascript:void(0);'><p id='p109'>:point_up_2:</p></a>

<a class='copy-text' data-clipboard-target='#p110' data-clipboard-text=':point_down:' href='javascript:void(0);'><p id='p110'>:point_down:</p></a>

<a class='copy-text' data-clipboard-target='#p111' data-clipboard-text=':point_up:' href='javascript:void(0);'><p id='p111'>:point_up:</p></a>

<a class='copy-text' data-clipboard-target='#p112' data-clipboard-text=':raised_hand:' href='javascript:void(0);'><p id='p112'>:raised_hand:</p></a>

<a class='copy-text' data-clipboard-target='#p113' data-clipboard-text=':raised_back_of_hand:' href='javascript:void(0);'><p id='p113'>:raised_back_of_hand:</p></a>

<a class='copy-text' data-clipboard-target='#p114' data-clipboard-text=':hand_splayed:' href='javascript:void(0);'><p id='p114'>:hand_splayed:</p></a>

<a class='copy-text' data-clipboard-target='#p115' data-clipboard-text=':vulcan:' href='javascript:void(0);'><p id='p115'>:vulcan:</p></a>

<a class='copy-text' data-clipboard-target='#p116' data-clipboard-text=':wave:' href='javascript:void(0);'><p id='p116'>:wave:</p></a>

<a class='copy-text' data-clipboard-target='#p117' data-clipboard-text='call_me:' href='javascript:void(0);'><p id='p117'>:call_me:</p></a>

<a class='copy-text' data-clipboard-target='#p118' data-clipboard-text=':muscle:' href='javascript:void(0);'><p id='p118'>:muscle:</p></a>

<a class='copy-text' data-clipboard-target='#p119' data-clipboard-text=':middle_finger:' href='javascript:void(0);'><p id='p119'>

:middle_finger:</p></a>

<a class='copy-text' data-clipboard-target='#p120' data-clipboard-text=':face_with_raised_eyebrow:' href='javascript:void(0);'><p id='p120'>

:face_with_raised_eyebrow:</p></a>

<a class='copy-text' data-clipboard-target='#p121' data-clipboard-text=':star_struck:' href='javascript:void(0);'><p id='p121'>

:star_struck:</p></a>

<a class='copy-text' data-clipboard-target='#p122' data-clipboard-text=':crazy_face:' href='javascript:void(0);'><p id='p122'>

:crazy_face:</p></a>

<a class='copy-text' data-clipboard-target='#p123' data-clipboard-text=':shushing_face:' href='javascript:void(0);'><p id='p123'>

:shushing_face:</p></a>

<a class='copy-text' data-clipboard-target='#124' data-clipboard-text=':face_with_symbols_over_mouth:' href='javascript:void(0);'><p id='p124'>

:face_with_symbols_over_mouth:</p></a>

<a class='copy-text' data-clipboard-target='#p125' data-clipboard-text=':face_with_hand_over_mouth:' href='javascript:void(0);'><p id='p125'>

:face_with_hand_over_mouth:</p></a>

<a class='copy-text' data-clipboard-target='#p126' data-clipboard-text=':face_vomiting:' href='javascript:void(0);'><p id='p126'>

:face_vomiting:</p></a>

<a class='copy-text' data-clipboard-target='#p127' data-clipboard-text=':exploding_head:' href='javascript:void(0);'><p id='p127'>

:exploding_head:</p></a>

<a class='copy-text' data-clipboard-target='#p128' data-clipboard-text=':palms_up_together:' href='javascript:void(0);'><p id='p128'>

:palms_up_together:</p></a>

<a class='copy-text' data-clipboard-target='#p129' data-clipboard-text=':heart:' href='javascript:void(0);'><p id='p129'>:heart:</p></a>

</div>

Lưu template lại là xong. Đây là đoạn code mình làm sẵn chỉ bao gốm một số biểu tượng cảm xúc thường hay sử dụng.

Nếu bạn muốn thêm theo ý thích thì cách làm như sau, đoạn mẫu cần thiết

Copy

<a class='copy-text' data-clipboard-target='#p1' data-clipboard-text='shortcut' href='javascript:void(0);'><p id='p1'>shortcut</p></a>

Như vậy bạn cần tìm shortcut (shortcode) của biểu tượng theo chúng ta hay gọi là viết tắt. Bạn truy cập trang emoji.codes nhấp vào biểu tượng cần thêm để lấy shortcut sau đó thay vào đoạn mẫu trên ví dụ để lấy biểu tượng cờ Việt Nam

Copy

<a class='copy-text' data-clipboard-target='#p1' data-clipboard-text=':flag_vn:' href='javascript:void(0);'><p id='p1'>:flag_vn:</p></a>

Trường hợp bạn muốn thêm biểu tượng thứ 2, 3, 4... bạn cần phải thay p1 bằng p2, p3, p4...và tất nhiên là cả shortcut nữa rồi.

Nếu bạn không muốn thêm thủ công có thể mở trang emoji.codes copy biểu tượng cần chèn vào khung nhận xét rất đơn giản.

loading...

  

Loading...