Di chuyển ghi chú nhận xét theo khung nhận xét khi reply
![note comment](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBYczpskhzVcqRL-RpExTsY1kGS3vpACYUUg23O4ppuhziT7XZa7oj99j7uRp8H2wvyFLKlw4vJx_Luiy8h7C1O2OhGDdj24HqaX0BeeHIjFYWr_MQVG7BLzf-EB7Yokut03J_I7nAU9w/s200/note-comment.png)
HTML
nào.![move note](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdivpyDpVgkaHAwRRa4LSjdeNIeJfqI9btt-pNDU6jbB1Lxfiees-7uSGcH4GmK5W5CxdCMM3owvQ6Xyx-zEpuU8nY0L1G7Pgfh0uzMCj3lqVrxrauciL6bBjX619LQVnkZYXO3DiC4Qo/s1600/move-note.png)
Các bước thực hiện.
Bước 1: Tìm trong template thẻ
<b:includable id='threaded-comment-form' var='post'>
.
![code before](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmxR1IIPQWmnIEMllI_dMJYL1yHckWmbuAWIUbIrmQkyBQKiM_kgy_sUg1itJlWA_u90jbtH6X41kK_EY-empeLPqyVWtNM4Jix1O62VJerX-jQ1XSSS_5Teiwf7o0MuUIfAuQqf09RcY/s598/code-before.png)
threaded-comment-form
trước khi thay thếTại hàm
threaded-comment-form
này thay thế thẻ <b:else/>
bằng đoạn mã dưới đây:
<b:else/> <div id='threaded-comment-form'>
Thay thế thẻ
</b:if>
bằng đoạn mã dưới đây:
</div> </b:if>
![code after](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUDSNMbNA-U5u7ZMeUggeS823kns35rQClykQFFbiTnA5JJi7C7xB67XxSpdR6XIAJjUMvUTN-ZQqrTa67xO8yAe94dnXIIKt-VG8gDwODJT9jwZ_9pBbYqc4OZhyh6Te1wnieutuinUQ/s598/code-after.png)
threaded-comment-form
sau khi thay thếBước 2: Thay thế đoạn mã
document.getElementById(domId).insertBefore(replybox, null);
trong template của bạn bằng đoạn mã dưới đây:
document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);
Các bước trên là nhóm những thành phần cần di chuyển theo khung nhận xét vào cùng thẻ<div>
vớiid
là threaded-comment-form và khai báo lại hàminsertBefore
. Thủ thuật đã xong!
Bonus thêm 2 style cho phần ghi chú nhận xét.
Style 1:
![note style one](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdP7DHXmmVmZU3r8moVf5TDqbqJTznbFzG2vA62mMmZtI6ztDk8dzdk0154dkzsndEU17tsAgRs1LKczO_uY-bvwWXnfmhrbCcoeRJhHiCKaIwZLII1vN8jP3MAlLc5e7wiIfB856RsBY/s580/note-style-one.png)
Thêm đoạn mã dưới đây vào trước thẻ
]]></b:skin>
trong template của bạn.
#threaded-comment-form p{position:relative;background:#17b38f;padding:10px;font-size:13px;line-height:1.6em;color:#fff} #threaded-comment-form p:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #17b38f;border-right:20px solid transparent;width:0;height:0;line-height:0}
Style 2:
![note style two](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN_rE-8czGz4sktMgZ6OiyFOFSNJDo0ZszcDjDeAk212Lm4yuaS-XZyDV5bVl3zPKYfp9UOma5FkNkycWerlEUizG2lebpumiTcV7vXTsjJeP66oUL7Raaknf837kut3jATOmY0hF5KrQ/s580/note-style-two.png)
Thêm đoạn mã dưới đây vào trước thẻ
]]></b:skin>
trong template của bạn.
#threaded-comment-form p{position:relative;border-radius:20px;padding:10px;font-size:13px;line-height:1.6em;color:#111} #threaded-comment-form p,#threaded-comment-form p:after,#threaded-comment-form p:before{border:4px solid #ff4e47;background:#fff} #threaded-comment-form p:after{bottom:-20px;right:30px;width:20px;height:20px} #threaded-comment-form p:after,#threaded-comment-form p:before{content:"";position:absolute;border-radius:50%} #threaded-comment-form p:before{bottom:-30px;right:60px;width:10px;height:10px}
Muốn thêm thành phần nào cần di chuyển theo khung nhận xét bạn chỉ cần đặt nó vào trong thẻ <div id='threaded-comment-form'>
.
![](http://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh564KrXSTT491lBKNOVUGHw_ZDjSjp4LIVzu76hHSIXsYvZujUA8LupAhGTHVjcbZJkIxP6QxfcfX08_Y_fiTLq1lRfw99rZVm6awuPdeMSEMbzuK45K2MX7_jct0w0A/w90-h90-p-k-no-nu/Duy.png)
Hướng dẫn thủ thuật Blogger, Blogspot
49
Nhận xét