Yêu Hà Nội: Bài 4: Cách chỉnh HTML để post hình vào Comment

Thứ Tư, 28 tháng 5, 2014

Bài 4: Cách chỉnh HTML để post hình vào Comment

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é.

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 == "item"'>

//<![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(/&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: