Văn Vỹ IT: Chèn emotions, ảnh và Youtube vào Thread Comment - Star Tuấn

Tham gia nhóm BSW Community để cùng trao đổi và nhận nhiều bài viết hay, hữu ích nhé!

Một tiện ích cho Thread Comment, Bài viết sẽ giúp bạn thêm những icon emotion quen thuộc trên facebook messenger vào khung comment blogspot của bạn và bạn có thể chèn ảnh, video youtube chỉ cần comment url của ảnh hoặc video đó.

Demo bên dưới bài viết nhé
Hình minh họa:

Chèn đoạn mã dưới đây vào trước thẻ </body>

123<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://rawgit.com/tuan2308/js/master/st-emotion.js' type='text/javascript'></script><noscript><a href='http://www.startuanit.net/2017/06/chen-emotions-anh-va-youtube-vao-thread-comment.html' target='_blank'><span style='font-size: x-small;'>Add emoticons</span></a></noscript>
</b:if>

Tiếp theo tìm đoạn code sau (Bạn sẽ thấy nó 4 lần và nhớ là chọn cái ở lần thứ 2)

1<data:blogTeamBlogMessage/>

Và chèn đoạn code sau ngay bên dưới nó :

12345<div class='comment_emo_list'>
<div class='item'>
<img class='comment_emo' src='//lh5.googleusercontent.com/-1oM_TE5VfbU/WHTncvNBORI/AAAAAAAACTQ/9rRLfcfYKlYW5M7ZHIlkeij9VHPMTUqtQCLcB/s20/icon-cuoi-mim-blogttcn-blogspot-com.png'/><span> :)</span></div><div class='item'><img class='comment_emo' src='//lh4.googleusercontent.com/-MvpmHqY81vg/WHTncOUc90I/AAAAAAAACTM/CbeflLmiwswbStXvdskh9GM8BKYHAPYIgCLcB/s1600/icon-cuoi-lon-blogttcn-blogspot-com.png'/><span> :))</span></div><div class='item'><img class='comment_emo' src='//lh3.googleusercontent.com/-PVBIliYz67o/WHTncp4PXfI/AAAAAAAACTU/-Mp4Tf2HrHAJ0h8WcNVmJnBuvHdRbXxKQCLcB/s20/icon-cuoi-nhe-rang-blogttcn-blogspot-com.png'/><span> :D</span></div><div class='item'><img class='comment_emo' src='//lh5.googleusercontent.com/-Cec2pPubVOc/WHTnc_21m3I/AAAAAAAACTY/EUhUYSgrE_gFbrM8_wkWVbBphvc0FWo-wCLcB/s20/icon-cuoi-ra-nuoc-mat-blogttcn-blogspot-com.png'/><span> =))</span></div><div class='item'><img class='comment_emo' src='//lh3.googleusercontent.com/-r7szGiJPRW4/WHTnbloHYEI/AAAAAAAACS8/JHTPfRRTac04Y1Im8nJK3wUZdcWHNLR6gCLcB/s20/icon-buon-blogttcn-blogspot-com.png'/><span> :(</span></div><div class='item'><img class='comment_emo' src='//lh3.googleusercontent.com/-DWDSdGErhuw/WHTndYMzY2I/AAAAAAAACTk/8FX8pJHdfaUAKpxlk5dQmTnJnohuf3VDQCLcB/s20/icon-khoc-mot-dong-song-blogttcn-blogspot-com.png'/><span> :((</span></div><div class='item'><img class='comment_emo' src='//lh3.googleusercontent.com/-uNPH8DfKccM/WHTnd6kNQsI/AAAAAAAACT0/5AHLbo1rVVUsx7-wF5Q9svhOMTeTzSNTgCLcB/s20/icon-ngac-nhien-blogttcn-blogspot-com.png'/><span> :o</span></div><div class='item'><img class='comment_emo' src='//lh5.googleusercontent.com/-N-9a8JIJ1Rw/WHTncBwOW0I/AAAAAAAACTI/Azfkbn34DOgQeJV6CfYNpxY76ViE4T2VACLcB/s20/icon-cuoi-mac-co-blogttcn-blogspot-com.png'/><span> ^_^</span></div><div class='item'><img class='comment_emo' src='//lh3.googleusercontent.com/-s8ctkdgok3E/WHTndHQYshI/AAAAAAAACTc/X_zzwmr8HYscUN1kAr8w6nn3DRZrbgy8gCLcB/s1600/icon-cuoi-tit-mat-blogttcn-blogspot-com.png'/><span> ^-^</span></div><div class='item'><img class='comment_emo' src='//lh4.googleusercontent.com/-hmjAxdkivPQ/WHzb9U_G5cI/AAAAAAAACWM/ihDBd07fNssoNpeJQBaIXw9X-Hhgu4roACLcB/s1600/2emoticon-blogttcn-blogspot-com.png'/><span>/-f</span></div><div class='item'><img class='comment_emo' src='//lh3.googleusercontent.com/-N52zwdjsG3g/WHzb9wgsbzI/AAAAAAAACWU/yZT_cjOtYT4Po5-1LRJVlzz31xpb-7jDwCLcB/s1600/emoticon-blogttcn-blogspot-com.png'/><span>^.^</span></div><div class='item'><img class='comment_emo' src='//lh3.googleusercontent.com/-zVDDwHkIJ4E/WHzb9U28KLI/AAAAAAAACWQ/3G2Qunlbza8aNHpwjZM0rScW1YxFEwZwgCLcB/s1600/4emoticon-blogttcn-blogspot-com.png'/><span>/-g</span></div><div class='item'><img class='comment_emo' src='//lh3.googleusercontent.com/-Atbet-GzQXs/WHzb9a62gsI/AAAAAAAACWI/G-J67WEx4WkgL0nsKfSCr97R0ZrwTUNVQCLcB/s1600/3emoticon-blogttcn-blogspot-com.png'/><span>;)</span></div><div class='item'><img class='comment_emo' src='//lh3.googleusercontent.com/-PdYIkQ1TlTQ/WHTndg61xpI/AAAAAAAACTo/7HvIzDRxmWwizkw4XNXHziYmUei9dJc6ACLcB/s20/icon-khong-hai-long-blogttcn-blogspot-com.png'/><span> -_-</span></div><div class='item'><img class='comment_emo' src='//lh3.googleusercontent.com/-z89lvV3G1wM/WHTnbg4LfjI/AAAAAAAACS4/rptz1JXzcU4k5wtDUflKXigB15OP949awCLcB/s1600/icon-angry-blogttcn-blogspot-com.png'/><span> =_=</span></div><div class='item'><img class='comment_emo' src='//lh3.googleusercontent.com/-130QOfdenN4/WHTndoBraQI/AAAAAAAACTs/-4i9OFkFfz8kGKuY9qlMPjpyWhuY8_TFgCLcB/s1600/icon-liec-ngang-blogttcn-blogspot-com.png'/><span> /-r</span></div><div class='item'><img class='comment_emo' src='//lh3.googleusercontent.com/-qu98DTf0jVo/WHTnblrPacI/AAAAAAAACTA/_gKer8Nimzkv8dB2VO_212b56x08792YgCLcB/s1600/icon-chay-mo-hoi-blogttcn-blogspot-com.png'/><span> -.-</span></div><div class='item'><img class='comment_emo' src='//lh3.googleusercontent.com/-2rfPgFZUQ1c/WHTncESnKGI/AAAAAAAACTE/RlJsk8ua-FMy2HYLOWfIqpZACdMag3u5QCLcB/s20/icon-cuoi-le-luoi-blogttcn-blogspot-com.png'/><span> :p</span></div><div class='item'><img class='comment_emo' src='//lh3.googleusercontent.com/-dLQZY9F2Rgw/WHTneZRbRdI/AAAAAAAACT8/SqdfwoADabMT44EQ99Ae4oKJIE09uSMbwCLcB/s1600/icon-ngac-nhien-hoang-mang-blogttcn-blogspot-com.png'/><span> /-o</span></div><div class='item'><img class='comment_emo' src='//lh3.googleusercontent.com/-LuPjeIPajCI/WHTndFOTkfI/AAAAAAAACTg/Yum-gheeiR4AIAX3UI3vGTsVaK9dKu-jACLcB/s1600/icon-hello-hi-blogttcn-blogspot-com.png'/><span> /-hi</span></div><div class='item'><img class='comment_emo' src='//lh3.googleusercontent.com/-RLbdmcajB-0/WHTnevNlwQI/AAAAAAAACUA/4zxoidiXZQQDxU22B2DFnn97GsBCDlN5wCLcB/s1600/icon-ok-blogttcn-blogspot-com.png'/><span> /-ok</span></div><div class='item'><img class='comment_emo' src='//lh3.googleusercontent.com/-qVt33tDzEjk/WHTnfKGkEnI/AAAAAAAACUM/tlmiSemEFx0BpKmdeaUrVEy9iw7bodp7ACLcB/s1600/icon-vo-tay-blogttcn-blogspot-com.png'/><span> /-clap</span></div><div class='item'><img class='comment_emo' src='//lh3.googleusercontent.com/-2iyJ877TTfw/WHTnd4eTHJI/AAAAAAAACTw/zo-2Qam5gd4M6CwtW06xkTjHyQvUNElYgCLcB/s20/icon-like-blogttcn-blogspot-com.png'/><span> (y)</span></div><div class='item'><img class='comment_emo' src='//lh3.googleusercontent.com/-UzK_X8UMjRk/WHTne6ws5EI/AAAAAAAACUI/NCQDl_nuhuArNjkhzMul1G-e_7pfCMcXQCLcB/s20/icon-trai-tim-blogttcn-blogspot-com.png'/><span> &lt;3</span>
</div>
</div>

Cuối cùng, tìm đoạn code này
]]></b:skin>
Và đặt đoạn code nằm bên trên nó

1.comment_emo_list{padding:0;margin:0 0 15px;clear:both;float:left}.comment_emo_list .item{float:left;text-align:center;height:55px;width:55px;margin:0;padding:10px 0 15px;border-radius:50px}.comment_emo_list .item:hover{background:#eee}.comment_emo_list .item:hover{color:#66689c}.comment_emo_list span{display:block;font-weight:500;font-size:14px;letter-spacing:0;color:#c7c7c7;transition:.33s}img.comment_emo{width:23px;height:23px;pointer-events:none;-webkit-user-select:none}.comment-replybox-single .item,.comment-replybox-thread .item{width:53px}.comment_emo_list span{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;-o-user-select:all;}

Save template và hoàn thành
Hy vọng là với thủ thuật này, blog của bạn sẽ có những biểu tượng thật đẹp mắt.
Chúc các bạn thành công !