Cách chỉnh HTML để post hình vào Comment.

Trang Blogspot này thật lôi thôi, nó chỉ là một trang blog thô, đòi hỏi người sử dụng phải nắm được một số thuật ngữ để chỉnh sửa và trang trí trang blog hoàn chỉnh theo ý muốn của mỗi người. 

Lúc tôi chuyển bài từ Multiply về blogspot xong, thì cũng gặp một số khó khăn như bạn bè hiện nay. May thay, ở trong blogspot này có rất nhiều cao thủ về lập trình và viết ra những bài hướng dẫn cơ bản. Thế là tôi vào xin về và thiết lập được trang blog màu mè như trang tôi đang sử dụng.

Nay có thể bạn có trang blog, mà khi bạn bè đến viết comment xong muốn gửi vào đó một tấm hình, một cái clip... thì khi post xong ở ô comment đó chỉ hiện ra đơn thuần là dòng chữ code mà không hiện thị ra hình ảnh.

Cho nên tôi đưa đoạn code này về đây, để giúp cho các bạn chỉnh sửa HTML để những code hình ấy có thể được hiện thị ra nhé.


Thuật ngữ code post hình vào comment:
(Đoạn code lấy ở bên trang nhà anh Từ Thức và bongnguoilangle)


Trước hết, Bạn hãy click vào "Thiết kế" -> vào trang tổng quan, nhìn thấy 2 tấm hình, click vào "chỉnh sửa HTML - edit HTML";

Nhấn tổ hợp bàn phím: Ctrl+F để hiện ô tìm kiếm ở phía dưới trang bên tay trái: bỏ chữ </body> vào ô trống đó để tìm đoạn code dưới đây:

<b:include data='blog' name='google-analytics'/>
</body>


Khi thấy chữ </body> hiện ra ở trong khung:
Mẫu > Chỉnh sửa HTML
Mở rộng Mẫu Tiện ích


Thì bạn hãy copy đoạn code dưới đây và past chèn trước thẻ </body>  :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("comment-holder");
theText = bodyText.innerHTML;
theText = theText.replace(/\[img\].*?'.*?\[\/img\]/gi, "");
theText = theText.replace(/\[nct\].*?'.*?\[\/nct\]/gi, "");
theText = theText.replace(/\[youtube\].*?'.*?\[\/youtube\]/gi, "");
theText = theText.replace(/\[img\]/gi, "<div style='clear:both'></div><img style='float:left;margin:10px 0;border:1px solid #DDD;max-width:590px;background:#FFF;padding:4px' src='");
theText = theText.replace(/\[\/img\]/gi, "'/><div style='clear:both'></div>");
theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed");
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
theText = theText.replace(/&amp;feature=/gi, "?rel=0' '");
theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
theText = theText.replace(/\[nct\]http:\/\/www.nhaccuatui.com\/nghe\?L=/gi, "<div style='overflow:hidden'><embed style='margin-top:-250px;width:300px;height:400px' src='http://www.nhaccuatui.com/l/");
theText = theText.replace(/\[nct\]http:\/\/www.nhaccuatui.com\/nghe\?M=/gi, "<div style='overflow:hidden'><embed style='margin-top:-350px;width:300px;height:400px' src='http://www.nhaccuatui.com/m/");
theText = theText.replace(/\[\/nct\]/gi, "' quality='high' wmode='transparent' type='application/x-shockwave-flash'></embed></div>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
</b:if>


Sau đó Lưu Mẫu (save template)

Sau khi Lưu mẫu xong, thì bạn vào lại trang blog của mình, thử chọn code hình lấy từ photobucket rồi post vào thử xem nhé.

Cách lấy code hình ở photobucket bằng cách lấy code ở dòng: IMG Code (dòng cuối cùng trong cụm code hình ở photobucket):

[IMG]http://i1041.photobucket.com/albums/b416/TTM0123/anh-dep-vuon-hoa-p1-16.jpg[/IMG]

Nhìn vào đoạn code trên, điều đó suy ra bạn cũng có thể lấy link của code hình ở bất kỳ nơi nào như lấy ở blogspot, ở flickr, ở picasa... để post hình đó. Chỉ cần chọn link hình:

• http://i1041.photobucket.com/albums/b416/TTM0123/anh-dep-vuon-hoa-p1-16.jpg

Rồi thêm thuật ngữ vào hai đầu link hình như sau:

• [img] link hình [/img]

Như vậy khi bạn bè hay bạn muốn đến nhà bạn gửi một tấm hình.. thì sẽ nhìn thấy hình thay vì chỉ nhìn thấy đoạn code.

Nhân đây lại một lần nữa cám ơn các anh Từ Thức và Bóng Người Lặng lẽ nhé!
Chúc các bạn hưởng một năm mới vui vẻ hạnh phúc.

TTM

SG. 06/02/2013