Chèn ảnh, video, nhạc vào comment Blogger
Điểm mạnh của blog là tính tương tác giữa người viết và người đọc. Những dẫn chứng dạng chữ chưa đủ tính thuyết phục thì người đọc còn muốn chèn thêm ảnh, video hoặc nhạc. Ở diễn đàn thì việc chèn ảnh, video hay nhạc được thực hiện dễ dàng với BB code, còn Blogger chỉ hỗ trợ 3 thẻ HTML là <b>, <i> và <a> - điều đó chưa đủ làm thỏa mãn bạn? Bài viết này sẽ giúp bạn làm việc đó dễ dàng cho khung comment của Blogger.Ảnh được chèn từ link direct còn video và nhạc thì từ Youtube và Nhaccuatui dựa vào link trên thanh địa chỉ. Code để chèn cụ thể:
- Chèn ảnh:
Link ảnh làhttp://domain.com/image.pngthì code chèn sẽ là[img]http://domain.com/image.png[/img]
- Chèn video từ Youtube:
Link video làhttp://www.youtube.com/watch?v=0nbY7Mg_vMI&feature=relatedthì code chèn sẽ là[youtube]http://www.youtube.com/watch?v=0nbY7Mg_vMI&feature=related[/youtube]
Link video làhttp://youtu.be/0nbY7Mg_vMIthì code chèn sẽ là[youtube]http://youtu.be/0nbY7Mg_vMI[/youtube]
- Chèn nhạc từ Nhaccuatui:
Link nhạc làhttp://www.nhaccuatui.com/nghe?L=6g3kDUIYbvmtthì code chèn sẽ là[nct]http://www.nhaccuatui.com/nghe?L=6g3kDUIYbvmt[/nct]
Link nhạc làhttp://www.nhaccuatui.com/nghe?M=B_6M7IcZTzthì code chèn sẽ là[nct]http://www.nhaccuatui.com/nghe?M=B_6M7IcZTz[/nct]
Bước 1: Mở template và chèn đoạn mã dưới đây trước thẻ
</body><b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("multimedia");
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>Bước 2: Tìm thẻ
<b:loop values='data:post.comments' var='comment'> và thêm trước nó thẻ <div id='multimedia'>. Tìm thẻ đóng </b:loop> và thêm sau nó thẻ </div>.Có thể bạn muốn thêm bước 3 là hướng dẫn cho người đọc biết được cách để chèn ảnh, video và nhạc vào nhận xét? Mình để mọi người tự làm bước này.
Dễ nhận thấy thủ thuật này tương tự như bài Emoticons for Blogspot (work in IE) - Biểu tượng mặt cười cho Blogspot. Nếu bạn đã áp dụng thủ thuật đó cho blog rồi thì chỉ cần thêm đoạn mã mình đánh dấu bằng màu tím ở bước 1 vào trướcbodyText.innerHTML = theText;trong template và bỏ qua bước 2.
Blog mình không có nhu cầu chèn ảnh hay video ở comment nên không áp dụng thủ thuật này, các bạn có thể test thoải mái ở blog demo.
Đã cập nhật phiên bản mới sửa lỗi người dùng tự động thêmstyle,class,idlàm phá vỡ bố cục của blog. Các bạn sử dụng đoạn mã mới ở bước 1.
Hướng dẫn thủ thuật Blogger, Blogspot
144
Nhận xét