Advanced Comment Editor for Threaded Comments Blogger

Hiện tại, vì công việc quá bận rộn nên mình không còn thời gian để post bài và duy trì nội dung cho blog nữa. Do đó tại thời điểm này, mình quyết định ngừng phát triển blog. Mọi bài viết sẽ vẫn được lưu trữ và mình sẽ cố gắng hỗ trợ tất cả các bạn khi có comment hỏi. Cảm ơn các bạn đã ủng hộ blog suốt thời gian qua !

Ở bài viết trước mình đã giới thiệu cho các bạn các chèn thêm bộ công cụ hỗ trợ soạn thảo comment cho blogger hoàn chỉnh mình từng sử dụng. Tuy nhiên, cách chèn này chỉ hỗ trợ cho các blog sử dụng hệ thống comment cũ của blogger (không phân cấp). Nếu các bạn nào đang sử dụng bộ công cụ này mà nâng cấp sang hệ thống comment phân cấp của blogger (threaded comments) thì sẽ xuất hiện lỗi và không hiển thị khung soạn thảo này. Vì thế mình viết tiếp bài viết này nhằm hướng dẫn các bạn tích hợp khung soạn thảo này vào hệ thống comment mới của blogger.

Demo

1. Đầu tiên, nếu bạn đang sử dụng khung soạn thảo này cho blog với hệ thống comment cũ, bạn hãy remove đoạn code thứ 3 (đoạn code chèn sau <a name='comment-form'/> trong template đã hướng dẫn ở bài trước)

2. Bây giờ, bạn mở template, tìm đến đoạn <b:includable id='threaded-comment-form' var='post'> (xin nhắc lại là những ai sử dụng hệ thống threaded-comments mới tìm thấy đoạn code này trong template)

3. Tiếp theo, bạn thay thế đoạn code từ <b:else/> đến </b:if> bằng đoạn code sau:

   <div id='threaded-comment-form'>
	   <p><data:blogCommentMessage/></p>
		<!-- Khung soan thao comment moi -->
		<DIV id='new_comments_form' style='margin:5px 0 0 0'>
		<a class="button" href="javascript: void(0);" onClick="addText('&lt;b&gt;$&lt;/b&gt;');" title="Chữ đậm"><b>b</b></a>
		<a class="button" href="javascript: void(0);" onClick="addText('&lt;i&gt;$&lt;/i&gt;');" title="Chữ nghiêng"><i>i</i></a>
		<a class="button" href="javascript: void(0);" onClick="addText('&lt;u&gt;$&lt;/u&gt;');" title="Gạch chân"><u>u</u></a>
		<a class="button" href="javascript: void(0);" onClick="insert_URL();" title="Chèn liên kết"><u><font color="blue">link</font></u></a>
		<a id="btnFancybox" class="button" href="#html-code" title="Chèn mã HTML">code</a>
		<div style="display: none;">
		  <div id="html-code" style="width:380px;overflow:hidden;">
			<textarea id='html' name='html' onfocus='this.value=""' rows='12' style='width:100%;' type='text'>
		Dán code cần mã hóa ở đây.</textarea>
			<p align="center"><a class="button" href="javascript: void(0);" onClick="insert_CODE();">Chèn</a></p>
		  </div>
		</div>
		<a id="btnFancybox" class="button" href="#help-box" title="Giúp đỡ"><b><font color="red">Help ?</font></b></a>
		<div style="display: none;">
		  <div id="help-box" style="width:380px;overflow:hidden;">
			- Đây là khung soạn thảo mới hỗ trợ chèn biểu tượng cảm xúc, các kiểu chữ (đậm, nghiêng, gạch dưới) hoặc chèn link, code vào phản hồi của bạn<br />
			- Sau khi soạn thảo xong, hãy nhấn nút <b>Chọn</b> rồi copy <b><i>(Ctrl + C)</i></b> và paste <b><i>(Ctrl + V)</i></b> vào khung viết bình luận.<br />
			<span style="float:right;margin-top:3px;font-size:60%;">(c) 2011 <a href="http://itdl.blogspot.com" target="_blank">http://itdl.blogspot.com</a></span>
		  </div>
		</div>
		<form name="comments_form" id="comments_form">
		<textarea cols="70" rows="2" style="margin:5px;"></textarea>
		<br />
		<a class="button" href="javascript: void(0);" onclick="document.getElementById('comments_input').select();"><b>Chọn</b></a>
		<a class="button" href="javascript: void(0);" onclick="document.comments_form.reset();">Xoá hết</a>
		</form>
		</DIV>
		<!-- #Khung soan thao comment moi -->	  
      <p><data:blogTeamBlogMessage/></p>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='99%'/>
    </div>

 4. Cuối cùng, bạn tìm đoạn code

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

và thay bằng:

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

Bây giờ bạn lưu template lại và vào blog xem kết quả nhé.

Chúc các bạn thành công !