Hướng dẫn chèn biểu tượng nằm cố định trên khung nhận xét của Blog

Bạn muốn xem:

Mình viết bài này vì cảm thấy nó thật sự cần thiết với người viết blog đặc biệt với những blog có bài viết có nhiều nhận xét và sử dụng khung nhận xét của blog. Lý do vì sao thì bên dưới mình sẽ nói rõ nguyên nhân. Mặc định thì blog cho phép bạn chèn Thư thông báo mẫu nhận xét trong phần cài đặt > Bài đăng, nhận xét và chia sẻ. Tại đây bạn có thể ghi vài dòng thông báo, ghi chú hoặc điều khoản..., và những gì bạn thêm sẽ xuất hiện trong khung nhận xét của blog. Tuy nhiên vấn đề ở đây mình muốn đề cập là mặc định nếu bài viết không có nhận xét thì những dòng thông báo sẽ nằm trên khung nhận xét, và ngược lại nếu bài viết có nhận xét thì những dòng thông báo sẽ mặc định nằm dưới khung nhận xét.

Vấn đề mình nhấn mạnh ở đây là khi bạn muốn trả lời (reply) nhận xét của ai đó thì khung nhận xét nhảy theo nhưng phần thông báo luôn cố định không nhảy theo khung nhận xét, như vậy rất bất tiện với những blog sử dụng chèn biểu tượng, hình ảnh, điều khoản. Lấy ví dụ bạn reply nhận xét của ai đó mà nếu muốn chèn thêm hình ảnh, biểu tượng lại phải cuộn xuống cuối nếu bài viết có vài trăm nhận xét thì rất bất tiện và thật bực mình phải không.

Bây giờ để làm mất đi sự bất tiện thì chúng ta phải can thiệp chỉnh sửa template để cố định phần ghi chú, thông báo, biểu tượng nằm trên khung nhận xét và khi muốn reply nhận xét thì phần thông báo cũng nhảy cùng với khung nhận xét. Mình sẽ thực hành với một blog chưa thêm gì, và trong bài viết này mình cũng tổng hợp chèn luôn biểu tượng cảm xúc, code, hình ảnh và video. Đầu tiên truy cập blog chỉnh sửa Chủ đề > chỉnh sửa HTML và làm theo các bước sau đây, bạn lưu ý phải làm thật chính xác:

Bước 1: Thay đổi Javascript mặc định của blog

Bạn tìm thẻ <b:includable id='threaded_comment_js' var='post'> bên dưới sẽ có đoạn js mặc định của blog, công việc chúng ta sẽ tìm đoạn sau đây:

Copy

document.getElementById(domId).insertBefore(replybox, null);

Khi tìm thấy bạn hãy thay nó thành đoạn bên dưới rồi lưu lại:

Copy

document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);

Bước 2: Thêm id='threaded-comment-form' trong thẻ <b:includable id='threaded-comment-form' var='post'>

Trong thẻ này lúc đầu nó sẽ có dạng này:

Copy

<div class='comment-form'>

    <a name='comment-form'/>

    <b:if cond='data:mobile'>

      <p><data:blogCommentMessage/></p>

      <data:blogTeamBlogMessage/>

      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='210' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>

    <b:else/>

      <p><data:blogCommentMessage/></p>

      <data:blogTeamBlogMessage/>

      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='210' id='comment-editor' name='comment-editor' src='' width='100%'/>

    </b:if>

    <data:post.friendConnectJs/>

    <data:post.cmtfpIframe/>

    <script type='text/javascript'>

      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);

    </script>

  </div>

Bạn hãy để ý chữ <b:else/> và </b:if> mình ghi màu đỏ, bây giờ bạn thêm <div id='threaded-comment-form'> ngay sau <b:else/> và </div>  trước </b:if> cụ thể:

Copy

<div class='comment-form'>

    <a name='comment-form'/>

    <b:if cond='data:mobile'>

      <p><data:blogCommentMessage/></p>

      <data:blogTeamBlogMessage/>

      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='210' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>

    <b:else/>

    <div id='threaded-comment-form'>  

    <p><data:blogCommentMessage/></p>

      <data:blogTeamBlogMessage/>

      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='210' id='comment-editor' name='comment-editor' src='' width='100%'/>

    </div> 

    </b:if>

    <data:post.friendConnectJs/>

    <data:post.cmtfpIframe/>

    <script type='text/javascript'>

      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);

    </script>

  </div>

Khi thêm xong lưu lại bước này.

Bước 3: Thêm biểu tượng bên dưới <div id='threaded-comment-form'>

Tiếp tục trong bước 2 bạn thêm phần sau bên dưới <div id='threaded-comment-form'> mà bạn vừa thêm ở bước 2:

Copy

<div class='bieutuong'>

<button onclick='if(document.getElementById(&apos;spoiler&apos;) .style.display==&apos;none&apos;) {document.getElementById(&apos;spoiler&apos;) .style.display=&apos;&apos;}else{document.getElementById(&apos;spoiler&apos;) .style.display=&apos;none&apos;}' style='outline:0;cursor:pointer' type='button'><i class='fa fa-smile-o'/></button>

<button onclick='if(document.getElementById(&apos;spoiler1&apos;) .style.display==&apos;none&apos;) {document.getElementById(&apos;spoiler1&apos;) .style.display=&apos;&apos;}else{document.getElementById(&apos;spoiler1&apos;) .style.display=&apos;none&apos;}' style='outline:0;cursor:pointer' type='button'><i class='fa fa-code'/></button>

<button 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' type='button'><i class='fa fa-picture-o'/></button>

<button onclick='if(document.getElementById(&apos;spoiler3&apos;) .style.display==&apos;none&apos;) {document.getElementById(&apos;spoiler3&apos;) .style.display=&apos;&apos;}else{document.getElementById(&apos;spoiler3&apos;) .style.display=&apos;none&apos;}' style='outline:0;cursor:pointer' type='button'><i class='fa fa-youtube-play'/></button>

<div class='chenbieutuong' id='spoiler' style='display:none'>

<p>Nhấp chuột <b>copy</b> biểu tượng cần chèn rồi chuột phải vào khung nhận xét chọn <b>paste</b></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>

<div class='chenbieutuong' id='spoiler1' style='display:none'>

  <p>Chèn code: [pre]code[/pre]</p>

</div>

<div class='chenbieutuong' id='spoiler2' style='display:none'>

  <p>Chèn ảnh: [img]link ảnh[/img]</p>

</div>

<div class='chenbieutuong' id='spoiler3' style='display:none'>

  <p>Chèn video: link video YouTube trực tiếp</p>

</div>

</div>

Phần chữ tiếng Việt bạn muốn ghi gì thì tùy hoặc giữ nguyên cũng được, nó chỉ là hướng dẫn cách chèn. Khi thêm xong lưu lại bước này

Bước 4: Thêm <div class='convert-emoji'> trong thẻ <b:includable id='threaded_comments' var='post'>

Trong thẻ này bạn hãy thêm <div class='convert-emoji'> ngay dưới <b:includable id='threaded_comments' var='post'> và thêm </div> bên trên </b:includable> của thẻ này như sau:

Copy

 <b:includable id='threaded_comments' var='post'>

<div class='convert-emoji'>

.....

</div>

</b:includable>

Tiếp tục trong thẻ này tìm đoạn <p class='comment-footer'> và thêm đoạn js dưới đây bên trên nó:

Copy

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

Khi thêm xong lưu lại bước này

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

Bạn hãy thêm javascript dưới đây trước thẻ đóng </body> sau đó lưu lại:

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 6: Thêm CSS

Ngay dưới </b:skin> bạn thêm đoạn css sau:

Copy

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

<style type='text/css'>

.image,iframe{width:100%}

.image,img{height:auto}

pre{display:block;background:#f9f9f9;border:1px solid #d3d6db;max-height:400px;font:16px Roboto,sans-serif;color:#333;text-align:left;overflow:auto;margin:0 0 25px;padding:0 20px;line-height:1.6em;transition:all .3s ease-out 0s;white-space:pre-wrap}

.emojione{height: 27px;font-size:inherit;display:inline-block;margin:6px 3px 0 0;line-height:normal;vertical-align:bottom}img.emojione{width:auto}

.bieutuong{padding:0 8px;margin-bottom:-8px}

.chenbieutuong{border-color: transparent;padding-top:10px;border:1px solid #dddfe2;border-radius:3px;padding:15px}

.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>

Khi thêm css là xong, lưu lại bước này truy cập blog kiểm tra lại nhé. Nếu bạn không thấy biểu tượng thì trong template không có font-awesome, hãy thêm đoạn js sau ngay dưới phần css đã thêm ở trên

Copy

<script type='text/javascript'>

//<![CDATA[

function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }

loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

//]]>

</script>

Bạn làm theo đúng 6 bước trên rồi kiểm tra thành quả nhé.

loading...

  

Loading...