Một trong những điều khó chịu khi sử dụng Thread Comment của Blogger là khi reply lại nhận xét nào đó thì chỉ khung nhận xét di chuyển tới vị trí cần reply. Sẽ chẳng ra sao khi khung nhận xét và phần ghi chú nhận xét mỗi thứ ở một nơi. Thủ thuật sau đây sẽ giúp bạn mang phần ghi chú nhận xét đi theo khung nhận xét mỗi khi nhấn reply. Và không chỉ phần ghi chú nhận xét, bạn có thể thêm phần chú thích những ký tự tắt của emoticons hay bất cứ mã HTMLnào.

Các bước thực hiện.

Mã hàm threaded-comment-form trước khi thay thế

<b:else/>
<div id='threaded-comment-form'>

</div>
</b:if>

Mã hàm threaded-comment-form sau khi thay thế

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ới id là threaded-comment-form và khai báo lại hàm insertBefore. Thủ thuật đã xong!

Bonus thêm 2 style cho phần ghi chú nhận xét.

#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}

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

Posted in MẸO VẶT BLOGGER