Blog DX

Di chuyển ghi chú nhận xét theo khung nhận xét khi trả lời

14 tháng 11, 2014
note commentMộ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ã HTML nào.


move note


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
Mã hàm 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
Mã hàm 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ớ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.


Style 1:

note style one

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

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'>.
Tác giả: Duy Pham
Nguồn: Di chuyển ghi chú nhận xét theo khung nhận xét khi reply

Không có nhận xét nào:

Đăng nhận xét