Bầu trời của tôi

Chèn ảnh, video, nhạc vào comment Blogger

<div class="separator" style="clear: left; float: left; font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 1em; margin-right: 1em; text-align: center;">
<span style="background-color: white;"><img border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilQeb6GIxOjBuDllYzQsIlv62LHz0IY4Wrf8kRuMk1EIRhlTEl30cYWHvQ0jjofb5K0Qlzx-519JbJE75GmYs2qD4gyxYUMO5QE9b5Ls7GJzY50ugVbPWyso_C6wtPNLdxgirzB5n6V5rr/s320/multimedia-chen-anh-video-vao-blogspot-namkna-ngoctra-true-love.png" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" width="128" /></span></div>
<div style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<span style="background-color: white;">Đ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><b></b>, <b><i></b> và <b><a></b> - đ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.</span></div>
<span style="background-color: white;"><a href="https://www.blogger.com/null" name="more" style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;"></a><br style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;" /></span>
<div style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<span style="background-color: white;">Ả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ể:</span></div>
<span style="background-color: white;"><br style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;" /></span>
<div style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;">
<div style="text-align: center;">
<span style="background-attachment: scroll; background-image: none; background-position: 0% 0%; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; padding: 5px 10px;"><span style="background-color: white; font-family: Arial, Helvetica, sans-serif;">Xem <a href="http://demo-namkna.blogspot.com/2012/02/chen-anh-video-nhac-vao-comment-blogger.html" style="color: #006666; text-decoration: none;" target="_blank"><b><span style="color: red;">Demo</span></b></a></span></span></div>
</div>
<div style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;">
<div style="text-align: center;">
<b style="background-color: white;"><br /></b></div>
<div style="font-family: Arial, Helvetica, sans-serif;">
<b style="background-color: white;">Chèn ảnh:</b></div>
</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px;">
<span style="background-color: white;">Link ảnh là <b style="color: red;">http://domain.com/image.png</b> thì code chèn sẽ là</span></div>
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;">[img]<b style="color: red;">http://domain.com/image.png</b>[/img]</span></pre>
<span style="background-color: white;"><b style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px;">Chèn video từ Youtube</b><span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px;">:</span></span><br />
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<span style="background-color: white;">Link video là <b style="color: red;">http://www.youtube.com/watch?v=0nbY7Mg_vMI&feature=related</b> thì code chèn sẽ là </span><pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;">[youtube]<b style="color: red;">http://www.youtube.com/watch?v=0nbY7Mg_vMI&feature=related</b>[/youtube]</span></pre>
<span style="background-color: white;">Link video là <b style="color: red;">http://youtu.be/0nbY7Mg_vMI</b> thì code chèn sẽ là </span><pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;">[youtube]<b><i><span style="color: red;">http://youtu.be/0nbY7Mg_vMI</span></i></b>[/youtube]</span></pre>
<span style="background-color: white;"><b>Chèn nhạc từ Nhaccuatui</b>:<br />Link nhạclà <b><i><span style="color: red;">http://www.nhaccuatui.com/nghe?L=6g3kDUIYbvmt</span></i></b> thì code chèn sẽ là </span><pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;">[nct]<b><span style="color: red;">http://www.nhaccuatui.com/nghe?L=6g3kDUIYbvmt</span></b>[/nct]</span></pre>
<span style="background-color: white;">Link nhạc là <b><i><span style="color: red;">http://www.nhaccuatui.com/nghe?M=B_6M7IcZTz</span></i></b> thì code chèn sẽ là </span><pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;">[nct]<b><span style="color: red;">http://www.nhaccuatui.com/nghe?M=B_6M7IcZTz</span></b>[/nct]</span></pre>
</div>
<span style="background-color: white;"><br style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;" /><b style="color: red; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px;">Bước 1</b><span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px;">: Mở template và chèn đoạn mã dưới đây trước thẻ <b><span style="color: lime;"> </span></b></span><b style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;"><span style="color: lime; font-family: Arial, Helvetica, sans-serif;"></body> </span></b></span><br />
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;"><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("multimedia");
theText = bodyText.innerHTML;
<span style="color: magenta;">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>");</span>
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
</b:if></span></pre>
<span style="background-color: white;"><b style="color: red; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px;">Bước 2</b><span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px;">: Tìm thẻ </span></span><br />
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;"><b:loop values='data:post.comments' var='comment'></span></pre>
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px;">và thêm trước nó thẻ </span></span><br />
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;"><div id='multimedia'></span></pre>
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px;">Tìm thẻ đóng tương ứng:</span></span><br />
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;"></b:loop></span></pre>
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px;">và thêm sau nó thẻ </span></span><br />
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;"></div></span></pre>
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px;">- Với một số Blog thì bạn thay đoạn code:</span></span><br />
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;">bodyText = document.getElementById("<b>multimedia</b>");</span></pre>
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px;">Thành:</span></span><br />
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;">bodyText = document.getElementById("<b>Blog1</b>");</span></pre>
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px;">Và bỏ qua bước 2.</span><br style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;" /><span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px;"><b><span style="color: red;">- Update 20/02/2012:</span></b> Update ngày 20/02/2012: Đối với các bạn sử dụng Thread Comment mặc định của Blogger (tức là blogspot mới tạo có phân cấp tới cấp 2) thì các bạn thay đoạn code sau:</span></span><br />
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;">bodyText = document.getElementById("<b>multimedia</b>");</span></pre>
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px;">Thành đoạn sau:</span></span><br />
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;">bodyText = document.getElementById("<b>comment-holder</b>");</span></pre>
<span style="background-color: white;"><br style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;" /></span>
<div class="note" style="-webkit-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 2px; background-image: url(http://goo.gl/w4a2f); background-position: 0px 0px; background-repeat: repeat no-repeat; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; border: 1px solid rgb(225, 181, 0); box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 2px; color: #796100; font-family: Arial; font-size: 14px; left: 34px; line-height: 19.600000381469727px; margin-bottom: 2.5em; padding: 13px 15px 0px; position: relative; width: 504.625px;">
<h5 style="font-size: 14px; margin: 0px 0px 0.65em;">
<span style="background-color: white;">Luu ý!</span></h5>
<span style="background-color: white;">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.<br />Dễ nhận thấy thủ thuật này tương tự như bài Emoticons for Blogspot (work in IE) - <a href="http://namkna.blogspot.com/2011/07/bieu-tuong-mat-cuoi-cho-phan-comment.html" style="color: #006666; text-decoration: none;"><b>Biểu tượng mặt cười cho Blogspot</b></a>. 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ước<i><b> bodyText.innerHTML = theText</b><b>;</b></i> trong template và bỏ qua bước 2.<br />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.</span></div>

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

Chèn biểu tượng cảm xúc vào nhận xét dạng input

<div class="separator" style="clear: right; float: right; font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 1em; margin-left: 1em; text-align: center;">
<span style="background-color: white;"><img alt="Chèn biểu tượng cảm xúc vào nhận xét dạng input" border="0" height="106" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxvBWPj0ZxVpODUz1q0VKnv2MhaMyNdszCMr7utTcwkr64mGJFOzTNSGk6TzJxAey3SUZXbYk45freMSE0fdocjwQrbh6US1XGsCLMtHRTzlUqVYifE0pApbZIH6-hMwAMkMvIFl6bmOFv/s200/bieu-tuong-cam-suc-comment-namkna-ngoctra.jpg" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" title="Chèn biểu tượng cảm xúc vào nhận xét dạng input" width="200" /></span></div>
<div style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<span style="background-color: white;">Chắc hẳn bạn cũng biết rằng hệ thống nhận xét của Blogspot có phần khung viết nhận xét (Comments Form and Editor) dưới dạng nhúng từ bên ngoài qua thẻ iframe do đó chúng ta không thể chèn biểu tượng cảm xúc (Emoticons) vào nhận xét bằng phương pháp input như Wordpress. Để giải quyết vấn đề này, chỉ có một cách là tạo khung nhận xét riêng theo kiểu Wordpress cho Blogspot.</span></div>
<span style="background-color: white;"><br style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;" /><a href="https://www.blogger.com/null" name="more" style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;"></a></span>
<div style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<span style="background-color: white;">Tuy nhiên tạm thời mình chưa tìm ra giải pháp vì thế có thể áp dụng một thủ thuật trung gian, tức là tạo tính năng chèn biểu tượng cảm xúc trực tiếp vào một vùng <b>text </b>(<i><b>textarea</b></i>) kết hợp nút chọn để người dùng copy mã nhập rồi dán vào khung viết nhận xét, ngoài ra còn có chức năng chèn các thẻ như <b><b></b>, <i><b><i></b></i>, <i><em></i>, <b><a></b>. Hy vọng đây sẽ là bàn đạp để chúng ta tiến thêm một bước trong công cuộc hiện đại hóa hệ thống nhận xét của Blogspot so với cách mình giới thiệu <a href="http://namkna.blogspot.com/2011/07/bieu-tuong-mat-cuoi-cho-phan-comment.html" style="color: #006666; text-decoration: none;" target="_blank"><b>trước đây</b></a>.</span></div>
<div class="separator" style="clear: both; font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: center;">
<b><i><i><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9gEoz-UX5ZjYd65Sx1VnVwXIbrgjRouhR4c_WCStWuVthT_qvMwdESBsie589Da8kqYWKZmyEwWYaMhd8rsH2Xr9XMHp6BDZ7rNSRfgsSaMyU1dXqjjgTiHN-Mr-f1gqWGr5AB1UXCbSP/s1600/bieu-tuong-cam-suc-cho-comment-namkna-ngoctra-1.PNG" imageanchor="1" style="background-color: white; color: #006666; text-decoration: none;"><img alt="Chèn biểu tượng cảm xúc vào nhận xét dạng input" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9gEoz-UX5ZjYd65Sx1VnVwXIbrgjRouhR4c_WCStWuVthT_qvMwdESBsie589Da8kqYWKZmyEwWYaMhd8rsH2Xr9XMHp6BDZ7rNSRfgsSaMyU1dXqjjgTiHN-Mr-f1gqWGr5AB1UXCbSP/s1600/bieu-tuong-cam-suc-cho-comment-namkna-ngoctra-1.PNG" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" title="Chèn biểu tượng cảm xúc vào nhận xét dạng input" /></a></i></i></b></div>
<div style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<span style="background-color: white;">Thủ thuật này đã kết hợp thủ thuật tạo bộ biểu tượng cảm xúc cho nhận xét vì thế nếu áp dụng thủ thuật này thì bạn cần tháo thủ thuật cũ liên quan (nếu đã cài đặt rồi) và thực hiện theo các bước sau đây:</span></div>
<h3 style="border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; font-family: Arial; line-height: 19.600000381469727px; margin: 0px; padding: 3px; text-align: justify;">
<span style="background-color: white;">» Các bước để chèn biểu tượng cảm xúc dạng input vào nhận xét của blogspot</span></h3>
<div style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<span style="background-color: white;"><br /><b>1. Đăng nhập </b>vào tài khoản Blogger<br /><b>2. </b>Vào <b>Mẫu </b>(template)<br /><b>3.</b> Chọn <b>Chỉnh sửa HTML</b> ( Edit HTML)<br /><b>4. </b>Đặt đoạn code sau đây vào trước thẻ <b></body></b> (Đây là script chức năng cho bộ biểu tượng cảm xúc hoạt động).</span></div>
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;"><b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
//Emoticons for Blogger Comments || Author: Ta Van Nam || http://namkna.blogspot.com/ || © Copyright 2011
function emoticonBloggerHuynhNhatHa() {

if(!document.getElementById) {return;} // no support

bodyText = document.getElementById('<b style="color: red;">comments-block</b>');

theText = bodyText.innerHTML;
theText = theText.replace(/:1\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinbUIjcUyQwLkUrwh3LCO481nVmY_-YBmSpUsT3hA-gn5WLcTXDJiOckCKvBAesIC8mmuxGbqI3zyRN2AxdqhAYZClLvnufzqNErDKzAgyLxa4vo3a7aULR7rb3l2E1iDzbZpL6QR7dTwE/s1600/49.gif" />');
theText = theText.replace(/:2\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiloZ0hqVfZ5LZO2gBL7X5lMJIp-z_fs08RZsVj7iNjbnH7xnKZdHTgHPVs6Pg30FS7_3VL712_eyCdAMvOGx17E8ptNCMZ2V2MBc4vpE12xkj86ChFGoAOqqKcnZCbJXOZk5f_lVcmc4IT/s1600/102.gif" />');
theText = theText.replace(/:3\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIXwYmUpSTARSjJi8y1FpUAhJ4xdrK6t0ltHF3PAfO2Hm09EOAiTETH5H2YXEzUV7kr700p1L4irVlwy6z1sl_m6RTVVjWKi9-HZCXKKZKakzyfCWrmN_ycHr_XwyQa4NCO67e2YIZC706/s1600/113.gif" />');
theText = theText.replace(/:4\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCQX0HgMsgiaVLtZ-kMwaBILa8zHLAmUcCID8aPCiJ3T2ad6uKzWQ_8Yfo6-NlDgDvrF-6782QuXoZm2JPp2WIff_qA_vr3eQwyQTRCmyaTlqoP8rS_19yhM63hBOLI9yynABRX0oCcLBo/s1600/93.gif" />');
theText = theText.replace(/:5\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK75vZ-jGsxh6IccEUoG9SXtbDQqnnR87nqRrMTtWH67Mn0vc7PtBQ8t3MH8aIme2PpQMhzi6niFPL3K6nOiSHme8XPE2kCQ1nizoCjvpEq0N0VsU6jC-kAu0mogZgy6aGtqspLxlyuHo-/s1600/61.gif" />');
theText = theText.replace(/:6\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBXyWfEU2UNYyg4uPjKaxT1iKXza9tcDuCcUBttrKdFnerCMWzGUy55M50EYu2t6RV2uSerf8dc5UDvFaw5ziePxOXHyLT8Nda9ZHdYmJhUxs9AemP1mg9YLe218lfqnyRIx_OgMPTR89v/s1600/134.gif" />');
theText = theText.replace(/:7\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif3Ycdk-YXstrLG5_lLMGdhYHy5dHt58QH2esISuuy5Gf4aREikbSgs-hiEDISVoJWLHDJguKYt2HdrlkpbR9SOmVdj5QnbogMWuX065aGDHLlJesmljEwSedtX64qJhR1oCJvlulcQzg2/s1600/39.gif" />');
theText = theText.replace(/:8\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC2HLazlHu4S87quQCyfkGqjhmU64BEqYYn3VUKDZqYUd5Pf_KcOibeSuQHXnUruCxQYtckNWfnebY1Txvn9SAMWrdWZJaX-fwT2ZJJaWV2l0t8Fyxj2pC2XovZzL5mcyHqdjQNigKsyph/s1600/106.gif" />');
theText = theText.replace(/:9\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFHXIHt5NUkJnoM7NcSpZxF0j1I4hocB73rxvJL8nqUykGE59y4DFQGmoR63vc8eanyVyjtR4M4kpoFCenDOw8hs_PpkR8kjDZQhWVrHnFbxgaRX_WqqyPgyWA9YuKIKu6xZBuVtS_KdzJ/s1600/43.gif" />');
theText = theText.replace(/:A\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhypF2NdYAi3zEKPM_6l5jRMDIpHEdlUbrwm8yvzlZtFIl5IVk6nOfwpg-bGjt41uREjbM2O20Gbl9zbSAcs1wjtedjn9M0vzwUJAp9-pfjLAn1XvQ1hF0iev-4c2khzwGPyxBWUseKi4ik/" />');
theText = theText.replace(/:B\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16BKQYPfzOuCrqKUOgT48l-9VS_DoyaNGYEGHu1A4t9k8LZfG7VcI5RrT2Fs1881b8R5laZ9S2sWK2HXvke11fG7yCSykOr7I_3fBZkKWdhK06_R250hOio2ohVmX-0Hv0s29_YxJSQAA/s1600/48.gif" />');
theText = theText.replace(/:C\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaOBM6cSgDiO_6j-3Us0zaEY4JZXFlHXCfjCI84reHHqfB4i0T6lXq3eneYNv1Gm-iUctuCHmgHgmBu07e7Z7bXB1f9jXqYHqsuw_MboAfdsL_S3cJVGPgyKbFxvXdaAl-8GVOCFwcQ1_X/s1600/54.gif" />');
theText = theText.replace(/:D\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmeVdEEGzAziU6Xtnbd2eAuTwFO7CjsniCXTiuyDwdZEqWI9meeKHoGdB83vVM2py9BAwG3h-DoZncrHagJU3qAuAd5yYOpoYZ3AeHkHZPl3j-F-BSYYkms_wcmXuLHpCox-vsRKzRBtfr/" />');
theText = theText.replace(/:E\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDIkZdkN79hyJY7YRuUF6Weq6Blo0wSynMPAAn955lJ3PGiCbRPEWUs4Ne7QrA7r5g6bPCHE6MQ-xOiknNYiz8vCX2DJhtgSS6HbXEdZ44gdIaAlnCW1xqgUfYn823vcNbU4aJGPHCU5oG/s1600/100.gif" />');
theText = theText.replace(/:F\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyfP-40sr6yZhW1hygN6KPws3i61Se3uJ5nXAkdjqLGQpf-qk1yvETti1kaAAneIQZseCSMOwtUQVp7o98IKYUpNgcnVNIdikrHelaeHJ55Lw5loH0MPmcnzPSRjkI8CLHT9sZefSESeCD/s1600/45.gif" />');
theText = theText.replace(/:G\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMl7k2BpCihDizHgduUR37YtG40Q4rS1WEltPQtZ-dnU4_5JjvGa803BGp-EZcEZpuhglQzcTU6QhtiZhgPL_DIijf3EH9uMxZvXSWhCmCc9sGaC0t42_DBo3d77H6CIRb0OCJ3bZHJZlz/s1600/77.gif" />');
theText = theText.replace(/:H\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM9QVKC3MGbt-tQopoCAgdEg8xFB9pKGta3P-fx6MygJkFXEVqDYnbYMcFrOFKz1W-fiqA9wGnuzLxljx75hmb59TgnF4fXEO_BMjIPrlRi3vHk8N1N4rh7sEG10zVfhNFFNxhVmg4TIu5/s1600/86.gif" />');
theText = theText.replace(/:I\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLVRoLIUxqOahSMcQKjbVu_iJt7nL0d8ERd98QOWVJyN_9IuaMyxMJkiiEssT30bHwj0iwQ7gBPuacbdGEgrfpwpvYRaSU8L7wMkNQPfxQlp2p2WFonVm6IgKpTp1jAv8cJdeJRUNjysFT/s1600/94.gif" />');
theText = theText.replace(/:J\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHe7mEA9DZ_yLatPrrZyI5XYzzEgaJagU8zNr9l0jTwOMS32OlfwMBTzESYq5AvTfGPjFh0E3PYijtl5TSDiwA6EXu_wupZ7sNuSjVEs8Sgk_5Uza7eyBLUXEXGO4veg-7X-IMq9ZwIIf3/s1600/83.gif" />');
theText = theText.replace(/:K\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSNXuFfoh9Q4d16RWZw2LD-X9tXoB4xU6n7Jmhdhgh3TsjCu9Tm1Tr3-J9RzL_JarQ9m1GWovkO2vTC5sIqknudbkz6yWiNdPIVcLQPmt7VPV_ZFb1DBHMLbbpdwSoYqx3CejJwShV52M5/s1600/59.gif" />');
theText = theText.replace(/:L\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN69-iV1BWDAy6Ve-Fe3QYQIpKO32MqPriuNksupqjIyg8xtHOFxEw3T6yGSuin4KSUs3BMb9v77q8LYTRUEZkZeT-EISzDPBcEHko5HS6C2QBdn7lpg7iJK53-oYJiFKYcBcoynuRqFG9/s1600/soldierbaby.gif" />');
theText = theText.replace(/:M\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF8bv7yPEiSoyeTdBy_VW83RHMvXvQm2b6BCt0znyJZVeTMyIUNUezA_ema1A_tc2jqCW5bVDVSzKZWuDsOICbiUOEt_HxBIz29XRlCeYouIBRYOpyNgIhStbbeDSS8gL7Uh8xoRZ_0l-8/s1600/alo.gif" />');
theText = theText.replace(/:N\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9-l86hiOOl-p8I0Nq75v-tfKj_6Y9U1ZswYke7XtidiH-0a_ykL2Fz82k3x57tRN2eR8idI9hkqdr1XWYQqsVPo_aT322R7IpPx4bok_4lSD_l5MT2WPgTIEmzKEhxzmGGWKIhirzSn_Y/s1600/shutup.gif" />');
theText = theText.replace(/:O\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg9QwgCp_6ygn9xY2S1VUWsq3MC3dI1JnEWqkSuiwYQriDP-RjHuVHz3mZTRVAySr9bWi54D0UkgZtqjKxvE7GtR1Atr2hMAMkEkhTWHQj81LTgYxbOdnQxXRtCwfOjTuB2ZCru6rrArxX/s1600/yeulam.gif" />');
theText = theText.replace(/:P\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7-_ybnUs_qugzVqJJnCQ6RfRNIqKTSWtvg5OQPVTXmbNoRyoDjprtN07ykPfaaQx4HDKL3-5_APbpdRWngJuEULOFsFHQn_CYDTkVOuHjKAn5fSS3uqYVVaeDzD1OuMFCDVzJFRBe-DOy/s1600/datbomb.gif" />');

bodyText.innerHTML = theText;}
//]]>
</script>
<script type='text/javascript'>
emoticonBloggerHuynhNhatHa();
</script>
</b:if></span></pre>
<div style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<span style="background-color: white;">- Cần chú ý để chức năng biểu tượng cảm xúc hoạt động trong phần nhận xét thì bạn phải thay đổi ID <b>comments-block</b> cho phù hợp. ID này nằm trong một thẻ chỉ định thành phần chứa các dữ liệu của nhận xét, thẻ này thường nằm ngay trước dòng:</span></div>
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span class="Apple-style-span" style="background-color: white; color: red;"><b:loop values='data:post.comments' var='comment'></span></pre>
<div style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<span style="background-color: white;">- Tùy theo cách đặt tên của người thiết kế Template mà id này có thể có tên khác nhau ví dụ:<b>comments-block</b>, <b>comments-block3</b>, <b>comments_block</b>, <b>cm_block</b>, <b>commentsblock</b> …<br /><br />- Nếu bạn nào dùng Chèn comment phân cấp vào Blogspot mà mình giới thiệu<a href="http://namkna.blogspot.com/2011/10/chen-comment-phan-cap-vao-blogspot-cua.html" style="color: #006666; text-decoration: none;" target="_blank"><b> trước đây</b></a>  thì thay đoạn:</span></div>
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;">bodyText = document.getElementById('<b><span style="color: red;">comments-block</span></b>');</span></pre>
<span style="background-color: white;"><span style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;">thành:</span></span><br />
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;">bodyText = document.getElementById('<b>cm_block</b>'); </span></pre>
<div style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<span style="background-color: white;"><br /></span></div>
<div style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<span style="background-color: white;"><b>» Cập nhật với các bạn dùng mẫu Thread Comment:</b> </span></div>
<div style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<span style="background-color: white;">Đối với các bạn sử dụng Thread Comment mặc định của Blogger (tức là blogspot mới tạo có phân cấp tới cấp 2) thì các bạn thay đoạn trên thành đoạn sau:</span></div>
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;">bodyText = document.getElementById("<b><span style="color: red;">comment-holder</span></b>"); </span></pre>
<span style="background-color: white;"><b style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;"><i><i><br /></i></i></b><span style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;"></span><b style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;"><i><i><span style="font-size: x-small;"><span style="font-family: Arial, Helvetica, sans-serif;"><span class="postbody"></span></span></span></i></i></b><br style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;" /><b style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;">5.</b><span style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;"> Tìm đến đoạn code như bên dưới. Đoạn code này biểu thị phần khung viết nhận xét. </span></span><br />
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;"><data:blogTeamBlogMessage/>
<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='100%'/></span></pre>
<span style="background-color: white;"><span style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;">- Đặt trước đoạn code trên bằng đoạn code bên dưới: </span></span><br />
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;"><script type='text/javascript'>
//<![CDATA[
// Script to insert Emoticons and Links on Blogspot Comments V1 by www.thuthuatblogger.info
function comments_URL() {
var r = prompt("<span style="color: red;">Nhập địa chỉ trang</span>", "http://");
var p = prompt("<span style="color: red;">Nhập link text hiển thị</span>", "Text");
if(r != "") ; if(p != ""){
document.getElementById('comments_input').value += "<a href='" + r + "' rel='nofollow'>" + p + "<\/a>";
} else {
alert("<span style="color: red;">Bạn đã nhập xong dữ liệu</span>");
}
}
function comments_HTML() {
document.getElementById('comments_input').value += '<a href=\'<span style="color: red;">http://URL dẫn đến link \</span>'><span style="color: red;">Trang</span><\/a>';
}
function comments_B() {
document.getElementById('comments_input').value += '<b><\/b>';
}
function comments_I() {
document.getElementById('comments_input').value += '<i><\/i>';
}
function comments_EM() {
document.getElementById('comments_input').value += '<em><\/em>';
}
function moreSmilies() {
document.getElementById('smiley-more').style.display = 'inline';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()">&laquo;&nbsp;Less</a></span>';
}
function lessSmilies() {
document.getElementById('smiley-more').style.display = 'none';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()">More&nbsp;&raquo;</a>';
}
//]]>
</script>
<style>
#comments_insert {padding:0;margin:0;<b style="color: lime;">width:600px</b>;<b>float:<span style="color: red;">left</span></b>;text-align: center}
#comments_insert img {padding:0;border:none;margin:2px}
.text_style_wrap {margin-top:10px;}
.text_style {border:1px solid #069;padding:3px;background: #d8eaee}
#comments_insert a {text-decoration:none}
#comments_HTML {display: none}
#comments_input {margin-top:10px}
.tooltip{outline:none;cursor:help;text-decoration:none;position:relative}
.tooltip span{margin-left:-999em;position:absolute}
.tooltip:hover span{border-radius:5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;box-shadow:5px 5px 5px rgba(0,0,0,0.1);-webkit-box-shadow:5px 5px rgba(0,0,0,0.1);-moz-box-shadow:5px 5px rgba(0,0,0,0.1);font-family:Calibri,Tahoma,Geneva,sans-serif;position:absolute;left:1em;top:2em;z-index:99;margin-left:0;width:300px}
.tooltip:hover img{border:0;margin:-10px 0 0 -55px;float:left;position:absolute}
.tooltip:hover em{font-family:Candara,Tahoma,Geneva,sans-serif;font-size:1.2em;font-weight:bold;display:block;padding:0.2em 0 0.6em 0}
.help{padding: 0.8em 1em; background: #FFCCAA; border: 1px solid #FF3334;text-align:justify;color:#000}
</style>

<div class='text_style_wrap'>
<a href='javascript: void(0);' onClick='comments_B()'><span class='text_style'><b><b style="color: red;">Chữ đậm</b></b></span></a>
<a href='javascript: void(0);' onClick='comments_I()'><span class='text_style'><i><b style="color: red;">Chữ nghiêng</b></i></span></a>
<a href='javascript: void(0);' onClick='comments_EM()'><span class='text_style'><em><b style="color: red;">Chữ nghiêng 2</b></em></span></a>
<a href='javascript: void(0);' id='comments_HTML' onClick='comments_HTML()'><span class='text_style'><b style="color: red;">Chèn Link</b></span></a>
<a href='javascript: void(0);' id='comments_URL' onClick='comments_URL()'><span class='text_style'>Chèn Link</span></a>
<script type='text/javascript'>
function openup_parseHTML() { window.open(&quot;http://namkna.blogspot.com/p/code-convert-for-blogspot-chuyen-doi.html&quot;, &quot;followblog&quot;, &quot;height=600, width=500, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no&quot; ); }
</script>
<a href='javascript:openup_parseHTML()' rel='nofollow' title='<span style="color: red;">Mã hóa code trước khi đưa vào bình luận</span>'><span class='text_style'><b style="color: red;">Mã hóa code</b></span></a>
<a class='tooltip' href='javascript: void(0);'><b style='color:#F00'>Help ?</b><span class='help'><b style="color: red;">Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.</b></span></a>
</div>
<form name='comments_form'>
<<b style="color: lime;">textarea cols='70'</b> id='comments_input' rows='1' style='background: #F8F8FF;margin-bottom:7px'/>
<br/>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).select();'><span class='text_style'><b style="color: red;">Chọn</b></span></a>
<a href='javascript: void(0);' onClick='document.comments_form.reset();'><span class='text_style'><b style="color: red;">Xóa</b></span></a>
</form>
</div></span></pre>
<div style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<b style="background-color: white;">» Trong đó:</b></div>
<ul style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<li><span style="background-color: white;"><span style="color: lime;"><b>textarea cols='70'</b></span>  là chiều rộng ô hiện các ký tự khi bạn click vào biểu tượng.</span></li>
<li><span style="background-color: white;"><span style="color: lime;"><b>width:600px</b></span>  là độ rộng của phần ảnh bên trên khung  <b>textarea cols='70'</b>  .</span></li>
<li><span style="background-color: white;">Những phần được đánh dấu<span style="color: red;"><b> màu đỏ</b></span> là những phần bạn có thể tùy biến theo ý thích của mình.</span></li>
</ul>
<span style="background-color: white;"><b style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;">6.  Lưu  Template l</b><span style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;">ại và vào một bài viết bất kỳ để xem thành quả của bạn nha.</span><br style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;" /></span><br />
<blockquote class="tr_bq" style="border: 1px solid rgb(150, 215, 226); font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; margin: 0px; padding: 10px;">
<span style="background-color: white;">Trên đây mình gắn sẳn 25 biểu tượng cảm xúc, nếu các bạn muốn thêm thì có thể tự nghiên cứu để gắn thêm vào, đảm bảo sự đồng nhất biểu tượng theo thứ tự ở <b>Bước 4</b> và<b>Bước 5</b>:</span></blockquote>
<div style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<b style="background-color: white;">» Đây là một số ký tự bạn nên tìm hiểu:</b></div>
<ul style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<li><span style="background-color: white;">Ký tự tắt nằm giữa 2 ký tự <b>/</b></span></li>
<li><span style="background-color: white;">Với ký tự đặc biệt như <b>[ ] { } \ / ( ) . ? + * ^ $</b> thì phải thêm <b>\ </b>trước nó.</span></li>
<li><span style="background-color: white;">Với ký tự<b> <</b> phải đổi thành <b>&lt;</b></span></li>
<li><span style="background-color: white;">Với ký tự <b>></b> phải đổi thành <b>&gt;</b></span></li>
<li><span style="background-color: white;">Với ký tự <b>& </b>phải đổi thành <b>&amp;</b></span></li>
<li><span style="background-color: white;">Hình ảnh emoticons nằm trong thẻ <b>img</b>, thay đường dẫn đến ảnh tương ứng với ký tự tắt mà bạn đặt.</span></li>
</ul>
<span style="background-color: white;"><br style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;" /></span>
<div style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<span style="background-color: white;"><b>» Trích dẫn: </b>Lưu ý là với những ký tự tắt bao gồm của nhau như <b>:))</b> và <b>:)</b> thì bạn phải đặt <b>:))</b>lên trước <b>:)</b> nếu không chỉ ký tự ít hơn được hiện lên.</span></div>
<span style="background-color: white;"><br style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;" /></span><br />
<div style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<span style="background-color: white;">Nếu không muốn hiển thị những Nhận xét dung tục ta khai báo những ký tự đó và thay tương ứng không phải là thẻ img nữa mà là ký tự *** chẳng hạn.</span></div>
<span style="background-color: white;"><br style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;" /></span>
<blockquote class="tr_bq" style="border: 1px solid rgb(150, 215, 226); font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; margin: 0px; padding: 10px;">
<div style="text-align: justify;">
<span style="background-color: white;">Sau khi đã thành công với việc chèn emoticons vào khung Nhận xét bạn hoàn toàn có thể chèn emoticons vào khung Bài đăng hay khung Nhận xét mới bằng cách tạo một ID mới bao quanh khung Bài đăng hay khung Nhận xét mới và khai báo ID này trong javascript ở bước 1 tương tự như khai báo ID emocomments (tên ID phải khác nhau).</span></div>
</blockquote>

Chèn biểu tượng cảm xúc vào nhận xét dạng input

Chắc hẳn bạn cũng biết rằng hệ thống nhận xét của Blogspot có phần khung viết nhận xét (Comments Form and Editor) dưới dạng nhúng từ bên ...

Phân trang cho nhận xét với bài trên 100 nhận xét

<div style="font-family: Arial, Helvetica, sans-serif; line-height: 19.600000381469727px; text-align: justify;">
<span style="background-color: white;"><b>Sau khi Comments phân cấp được Blogger đưa vào hoạt động thì hệ thống phân trang cho comments cũ đã không còn được hỗ trợ. Với những bài viết có trên 200 nhận xét nếu như không dùng Comments phân cấp của Blogger thì việc theo dõi những nhận xét này sẽ trở nên khó khăn. Bài viết này sẽ hướng dẫn bạn tạo phân trang cho bài viết có trên 200 nhận xét.</b></span></div>
<div style="font-family: Arial, Helvetica, sans-serif; line-height: 19.600000381469727px; text-align: justify;">
<span style="background-color: white;">Bài viết được Duypham viết nhằm giúp các bạn có được một khung Comment đẹp hơn</span></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<span style="background-color: white; font-size: x-small;"><br /></span></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px; text-align: center;">
<span style="background-color: white;"><span style="font-size: x-small;"> </span><span style="font-size: x-small;"><span style="background-attachment: scroll; background-image: none; background-position: 0% 0%; background-repeat: repeat repeat; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; padding: 5px 10px;">Xem <a href="http://namkna.blogspot.com/2011/05/corel-videostudio-pro-x4-1400342-full.html" style="color: #006666; text-decoration: none;" target="_blank"><b><span style="color: red;">Demo</span></b></a></span></span></span></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px;">
<span style="background-color: white; font-size: x-small;"></span></div>
<div class="separator" style="clear: both; font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFne-smi4aKVxKDAzeok4x1Nf3EWoehb1WDR_iNy7GtvIsVoHPIWxmoMcGJwqhziSgZ_1AWDawM2Zq5cpRubrGvecArhreYVLF_07CfYKuBvou3bzCOIGpu5euP4ezMWfuFlw5ZDcwdKjK/s1600/phan-trang-cho-nhan-xet-namkna-ngoctra-1.bmp" imageanchor="1" style="background-color: white; color: #006666; text-decoration: none;"><img alt="Phân trang cho nhận xét với bài trên 200 nhận xét - http://namkna.blogspot.com/" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFne-smi4aKVxKDAzeok4x1Nf3EWoehb1WDR_iNy7GtvIsVoHPIWxmoMcGJwqhziSgZ_1AWDawM2Zq5cpRubrGvecArhreYVLF_07CfYKuBvou3bzCOIGpu5euP4ezMWfuFlw5ZDcwdKjK/s1600/phan-trang-cho-nhan-xet-namkna-ngoctra-1.bmp" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" title="Phân trang cho nhận xét với bài trên 200 nhận xét - http://namkna.blogspot.com/" /></a></div>
<div style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<span style="font-size: x-small;"><span style="background-color: white; font-family: Arial, Helvetica, sans-serif;"><b><span style="color: red;">Bước 1:</span> </b>Thêm đoạn mã dưới đây vào trước thẻ <b style="color: lime;"> ]]></b:skin> </b> trong template của bạn.</span></span></div>
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;">.comments-pager{clear:bold;margin:10px 0;line-height:30px;font-size:13px}
.comments-pager .page-first{float:left;margin-right:6px}
.comments-pager .page-items{float:right}
.comments-pager .page-number,.comments-pager .page-next{margin-left:6px}
.comments-pager .page-number,.comments-pager .page-prev{margin-right:6px}
.comments-pager .selected{border:1px solid #BBB;background:#FFF;padding:5px}</span></pre>
<span style="background-color: white;"><a href="https://www.blogger.com/null" name="more" style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;"></a><b style="color: red; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px;">Bước 2:</b><span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px;"> Tìm trong template đoạn mã dưới đây:</span><span style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;"> </span></span><br />
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;"><b:if cond='data:post.commentPagingRequired'>
 <span class='paging-control-container'>
  <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
  &#160;
  <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
  &#160;
  <data:post.commentRangeText/>
  &#160;
  <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
  &#160;
  <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
 </span>
</b:if></span></pre>
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px;">Có 2 đoạn mã như vậy. Thay thế đoạn mã thứ nhất bằng đoạn mã sau:</span><span style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px;"> </span></span><br />
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;"><b:if cond='data:post.numComments &gt; 200'>
 <div class='comments-pager' id='comments-pager-top'/>
</b:if></span></pre>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px;">
<span style="background-color: white;">Thay thế đoạn mã thứ 2 bằng đoạn mã sau:</span></div>
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;"><b:if cond='data:post.numComments &gt; 200'>
 <div class='comments-pager' id='comments-pager-bottom'>
  <script type='text/javascript'>numcomments='<data:post.numComments/>';</script>
  <script type='text/javascript'>
//<![CDATA[
var current;numshowpage=5;prev='&#8592;';next='&#8594;';pagefirst='Page';pageitems='Comments';dw='';urlactivepage=location.href;numpage=parseInt((numcomments-1)/200)+1;urlpost=urlactivepage.split('.html');urlpost=urlpost[0]+'.html';if(urlactivepage.indexOf('?commentPage=')==-1){current=1}else{current=parseInt(urlactivepage.substring(urlactivepage.indexOf('?commentPage=')+13))}var integer=parseInt(numshowpage/2);if(integer==numshowpage-integer){numshowpage=integer*2+1}first=current-integer;if(first<1){first=1}last=first+numshowpage-1;if(last>numpage){last=numpage;if((last-first+1)<numshowpage){first=last-numshowpage+1;if(first<1){first=1}}}if(current*200<=numcomments){dw+='<span class="page-items">'+(((current-1)*200)+1)+' - '+(current*200)+' / '+numcomments+' '+pageitems+'</span>'}else{if((((current-1)*200)+1)==numcomments){dw+='<span class="page-items">'+numcomments+' / '+numcomments+' '+pageitems+'</span>'}else{dw+='<span class="page-items">'+(((current-1)*200)+1)+' - '+numcomments+' / '+numcomments+' '+pageitems+'</span>'}}dw+='<span class="page-first">'+pagefirst+'</span>';if(current>1){dw+='<a class="page-prev" href="'+urlpost+'?commentPage='+(current-1)+'#comments">'+prev+'</a>'}if(first>1){dw+='<a class="page-number" href="'+urlpost+'?commentPage=1#comments">1</a>'}if(first>2){dw+='<span class="gap">&#133;</span>'}for(i=first;i<=last;i++){if(i==current){dw+='<span class="selected">'+i+'</span>'}else{dw+='<a class="page-number" href="'+urlpost+'?commentPage='+i+'#comments">'+i+'</a>'}}if(last<numpage-1){dw+='<span class="gap">&#133;</span>'}if(last<numpage){dw+='<a class="page-number" href="'+urlpost+'?commentPage='+numpage+'#comments">'+numpage+'</a>'}if(current<numpage){dw+='<a class="page-next" href="'+urlpost+'?commentPage='+(current+1)+'#comments">'+next+'</a>'}var a=document.getElementById('comments-pager-top');a.innerHTML=dw;a=document.getElementById('comments-pager-bottom');a.innerHTML=dw;
//]]>
  </script>
 </div>
</b:if></span></pre>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<span style="background-color: white;">Nếu không tìm thấy Code bước 2 trong Template của bạn thì bạn làm như sau:</span></div>
<div style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif;">- Tìm đoạn code sau:</span></div>
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;"><b:loop values='data:post.comments' var='comment'></span></pre>
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.600000381469727px;">- Và thêm Code sau vào trước nó:</span></span><br />
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;"><b:if cond='data:post.numComments &gt; 200'>
 <div class='comments-pager' id='comments-pager-top'/>
</b:if></span></pre>
<div style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif;">- Tìm tiếp đoạn code </span><b style="color: lime; font-family: Arial, Helvetica, sans-serif;"> </b:loop> </b><span style="font-family: Arial, Helvetica, sans-serif;"> tương ứng và thêm đoạn code bên dưới vào sau nó:</span></span></div>
<pre style="border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.600000381469727px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><span style="background-color: white;"><b:if cond='data:post.numComments &gt; 200'>
 <div class='comments-pager' id='comments-pager-bottom'>
  <script type='text/javascript'>numcomments='<data:post.numComments/>';</script>
  <script type='text/javascript'>
//<![CDATA[
var current;numshowpage=5;prev='&#8592;';next='&#8594;';pagefirst='Page';pageitems='Comments';dw='';urlactivepage=location.href;numpage=parseInt((numcomments-1)/200)+1;urlpost=urlactivepage.split('.html');urlpost=urlpost[0]+'.html';if(urlactivepage.indexOf('?commentPage=')==-1){current=1}else{current=parseInt(urlactivepage.substring(urlactivepage.indexOf('?commentPage=')+13))}var integer=parseInt(numshowpage/2);if(integer==numshowpage-integer){numshowpage=integer*2+1}first=current-integer;if(first<1){first=1}last=first+numshowpage-1;if(last>numpage){last=numpage;if((last-first+1)<numshowpage){first=last-numshowpage+1;if(first<1){first=1}}}if(current*200<=numcomments){dw+='<span class="page-items">'+(((current-1)*200)+1)+' - '+(current*200)+' / '+numcomments+' '+pageitems+'</span>'}else{if((((current-1)*200)+1)==numcomments){dw+='<span class="page-items">'+numcomments+' / '+numcomments+' '+pageitems+'</span>'}else{dw+='<span class="page-items">'+(((current-1)*200)+1)+' - '+numcomments+' / '+numcomments+' '+pageitems+'</span>'}}dw+='<span class="page-first">'+pagefirst+'</span>';if(current>1){dw+='<a class="page-prev" href="'+urlpost+'?commentPage='+(current-1)+'#comments">'+prev+'</a>'}if(first>1){dw+='<a class="page-number" href="'+urlpost+'?commentPage=1#comments">1</a>'}if(first>2){dw+='<span class="gap">&#133;</span>'}for(i=first;i<=last;i++){if(i==current){dw+='<span class="selected">'+i+'</span>'}else{dw+='<a class="page-number" href="'+urlpost+'?commentPage='+i+'#comments">'+i+'</a>'}}if(last<numpage-1){dw+='<span class="gap">&#133;</span>'}if(last<numpage){dw+='<a class="page-number" href="'+urlpost+'?commentPage='+numpage+'#comments">'+numpage+'</a>'}if(current<numpage){dw+='<a class="page-next" href="'+urlpost+'?commentPage='+(current+1)+'#comments">'+next+'</a>'}var a=document.getElementById('comments-pager-top');a.innerHTML=dw;a=document.getElementById('comments-pager-bottom');a.innerHTML=dw;
//]]>
  </script>
 </div>
</b:if></span></pre>
<div style="font-family: Arial; font-size: 14px; line-height: 19.600000381469727px; text-align: justify;">
<blockquote style="border: 1px solid rgb(150, 215, 226); font-family: Arial, Helvetica, sans-serif; margin: 0px; padding: 10px;">
<div>
<span style="background-color: white;"><span style="font-size: x-small;"><b><span style="color: magenta;">5</span></b></span> <span style="font-size: x-small;">là số trang được hiển thị.</span></span></div>
<div>
<span style="background-color: white; font-size: x-small;"><br /></span></div>
<div>
<span style="background-color: white; font-size: x-small;">Đã cập nhật mã javascript sửa lỗi xét thiếu trường hợp số trang được hiển thị và đường dẫn trong chuyển trang thừa sau khi xem permalink comment.</span></div>
</blockquote>
</div>

Phân trang cho nhận xét với bài trên 100 nhận xét

Sau khi Comments phân cấp được Blogger đưa vào hoạt động thì hệ thống phân trang cho comments cũ đã không còn được hỗ trợ. Với những bài vi...

Thêm nút Like cho comments Blogger

Thêm nút Like cho comments Blogger

Google vừa bổ xung Google +1 vào Blogger và có vẻ như nút +1 này nhanh chóng chiếm được cảm tình của đông đảo Blogspotter. Google ...

How to install Haiku-os by Kevin Kien

<span style="background-color: white;"><span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 16px; line-height: 30.09375px;">Welcome to the Haiku installation guide! This document will help you install Haiku on your computer, guiding you through the Haiku installation one step at a time. Depending on your hardware configuration, the installation process can take as little as 15 minutes.<br />Dowload Haiku-os: </span><a href="https://www.haiku-os.org/get-haiku">https://www.haiku-os.org/get-haiku</a></span><br />
<h3 style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 1.2em; line-height: 19.796875px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 20px !important; padding: 0px;">
<span style="background-color: white;">Preparing a Partition for Haiku</span></h3>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;">Currently, Haiku cannot resize existing partitions; therefore, you either need to already have an empty partition where you can install Haiku, or you need to create one using a third party tool. If your current OS comes with a partitioning tool, try to use that. Otherwise, you can use specialized tools like the freely available <a class="ext" href="http://gparted.sourceforge.net/livecd.php" style="margin: 0px; padding: 0px; text-decoration: none;" target="_blank">GParted LiveCD</a> A standard install of Haiku requires about 700MB of disk space, so the partition doesn't need to be huge. However, you may want to leave some room for stuff, so 2GB may be an appropriate partition size.</span></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;">Whenever your disk has multiple partitions, you will also need a boot loader such as <a class="ext" href="http://www.gnu.org/software/grub/manual/grub.html" style="margin: 0px; padding: 0px; text-decoration: none;" target="_blank">GRUB</a>to be able to boot into Haiku (and any other systems that you may have installed in the remaining partitions). In some cases, it is also possible to use the Haiku Boot Manager.</span></div>
<h3 style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 1.2em; line-height: 19.796875px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 20px !important; padding: 0px;">
<span style="background-color: white;">Let's Start the Installation!</span></h3>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;">Insert the Haiku Installer CD into your CD-ROM drive and power up your system. After a few seconds, you should see the following Haiku boot splash screen.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.haiku-os.org/files/images/installation_guide/1-boot-splash.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="background-color: white; color: black;"><img border="0" height="300" src="https://www.haiku-os.org/files/images/installation_guide/1-boot-splash.png" width="400" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white;"><br /></span></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;"><span style="font-size: 13px;">The following panel (depending on your hardware it can take a while to appear) lets you set the system language and keymap.</span><br style="font-size: 13px;" /><span style="font-size: 13px;">Then you have to decide to either install Haiku on a partition by clicking </span><span class="button" style="border: 1px solid rgb(199, 199, 199); font-size: 0.9em; margin: 0px 3px; padding: 2px 5px;">Run Installer</span><span style="font-size: 13px;"> or try out Haiku by booting to the desktop directly from CD by choosing </span><span class="button" style="border: 1px solid rgb(199, 199, 199); font-size: 0.9em; margin: 0px 3px; padding: 2px 5px;">Desktop (Live-CD)</span><span style="font-size: 13px;">.</span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.haiku-os.org/files/images/installation_guide/2-mode-selection.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="background-color: white; color: black;"><img border="0" height="300" src="https://www.haiku-os.org/files/images/installation_guide/2-mode-selection.png" width="400" /></span></a></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;"><span style="font-size: 13px;">Before the Haiku Installer starts, the following notice is displayed. It contains some information regarding prior partition setup as above and GRUB setup as further below in this guide. Click on the </span><span class="button" style="border: 1px solid rgb(199, 199, 199); font-size: 0.9em; margin: 0px 3px; padding: 2px 5px;">Continue</span><span style="font-size: 13px;"> button to proceed to the Installer.</span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.haiku-os.org/files/images/installation_guide/3-installer-notice.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="background-color: white; color: black;"><img border="0" height="300" src="https://www.haiku-os.org/files/images/installation_guide/3-installer-notice.png" width="400" /></span></a></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;"><span style="font-size: 13px;">If the following alert pops up, this means that no partitions with the Be File System (BFS) have been found. Click on </span><span class="button" style="border: 1px solid rgb(199, 199, 199); font-size: 0.9em; margin: 0px 3px; padding: 2px 5px;">Ok</span><span style="font-size: 13px;">. Note that if there are already BFS partitions on your system, this alert will not be shown.</span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.haiku-os.org/files/images/installation_guide/4-no-bfs-alert.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="background-color: white; color: black;"><img border="0" height="300" src="https://www.haiku-os.org/files/images/installation_guide/4-no-bfs-alert.png" width="400" /></span></a></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;">When you don't have a BFS partition available where Haiku can be installed to, or if you want to use a different partition, you will need to use the DriveSetup partitioning application. To start DriveSetup, click on the <span class="button" style="border: 1px solid rgb(199, 199, 199); font-size: 0.9em; margin: 0px 3px; padding: 2px 5px;">Setup partitions…</span> button.</span></div>
<div class="centeredImage" style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px; text-align: center;">
<span style="background-color: white;"><img alt="Start DriveSetup" src="https://www.haiku-os.org/files/images/installation_guide/5-launch-drivesetup.png" style="border: 0px;" /></span></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;">The Haiku partition manager <b>DriveSetup</b> appears and shows the disks and partitions that have been identified. An example setup is shown below.</span></div>
<div class="centeredImage" style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px; text-align: center;">
<span style="background-color: white;"><img alt="The initial DriveSetup view" src="https://www.haiku-os.org/files/images/installation_guide/6-drivesetup-initial.png" style="border: 0px;" /></span></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;">In this example you can see that there already are two primary partitions. One of about 9GB using an Ext File System, and another one of 2GB with a FAT32 File System. There are also two extended partitions that are still empty. These partitions have been previously prepared using a partitioning tool. Now choose the partition you want to install Haiku on by selecting it from the list. As soon as you select a disk, the partition layout will also be graphically represented. You can then also choose the partition by clicking on it in the layout graphic. The currently selected partition is marked by a blue border in the layout graphic and by a darker gray color in the list.</span></div>
<div class="centeredImage" style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px; text-align: center;">
<span style="background-color: white;"><img alt="Select the target partition" src="https://www.haiku-os.org/files/images/installation_guide/7-partition-select.png" style="border: 0px;" /></span></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;">To initialize a partition to the Be File System, make sure the right partition is selected, then use the menu <b>Partition</b> -> <b>Initialize</b> and click on <b>Be File System...</b>.</span></div>
<div class="centeredImage" style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px; text-align: center;">
<span style="background-color: white;"><img alt="Select the Be File System for initialization" src="https://www.haiku-os.org/files/images/installation_guide/8-initialize.png" style="border: 0px;" /></span></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;">A prompt will come up that asks you if the initialization should be started. If you are still sure you have the right partition selected, click on the<span class="button" style="border: 1px solid rgb(199, 199, 199); font-size: 0.9em; margin: 0px 3px; padding: 2px 5px;">Continue</span> button; otherwise, quit the initialization by clicking on <span class="button" style="border: 1px solid rgb(199, 199, 199); font-size: 0.9em; margin: 0px 3px; padding: 2px 5px;">Cancel</span>. As the alert says, you can still abort initialization before writing any changes to disk.</span></div>
<div class="centeredImage" style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px; text-align: center;">
<span style="background-color: white;"><img alt="Continue from the alert" src="https://www.haiku-os.org/files/images/installation_guide/9-initialize-warning.png" style="border: 0px;" /></span></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;">The next step is used to enter a name for the new partition that you are about to initialize. Enter the name you would like your new partition to have, or simply leave the suggested "Haiku". Here you can also select a blocksize if you want; the default blocksize of 2048 should be fine for most uses, so you can leave this as is. Afterwards, click on <span class="button" style="border: 1px solid rgb(199, 199, 199); font-size: 0.9em; margin: 0px 3px; padding: 2px 5px;">Initialize</span> to continue.</span></div>
<div class="centeredImage" style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px; text-align: center;">
<span style="background-color: white;"><img alt="Fill in the file system name" src="https://www.haiku-os.org/files/images/installation_guide/10-filesystem-name.png" style="border: 0px;" /></span></div>
<div class="box-warning" style="background-image: url(https://www.haiku-os.org/sites/haiku-os.org/themes/current/haiku-icons/alert_warning_32.png); background-position: 15px 15px; background-repeat: no-repeat no-repeat; border: 2px solid rgb(238, 211, 0); font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 19.796875px; margin: 15px 0px; min-height: 42px; padding: 10px 15px 10px 60px;">
<span style="background-color: white;">This is the last step before the initialization is executed! All data on the selected partition will be irrecoverably lost!</span></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;">If everything still looks fine, click on <span class="button" style="border: 1px solid rgb(199, 199, 199); font-size: 0.9em; margin: 0px 3px; padding: 2px 5px;">Write Changes</span>; otherwise, quit using the <span class="button" style="border: 1px solid rgb(199, 199, 199); font-size: 0.9em; margin: 0px 3px; padding: 2px 5px;">Cancel</span> button.</span></div>
<div class="centeredImage" style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px; text-align: center;">
<span style="background-color: white;"><img alt="Warning before writing back changes" src="https://www.haiku-os.org/files/images/installation_guide/11-write-to-disk.png" style="border: 0px;" /></span></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;">The partition has been initialized with the <b>Be File System</b>. Click on <span class="button" style="border: 1px solid rgb(199, 199, 199); font-size: 0.9em; margin: 0px 3px; padding: 2px 5px;">Ok</span> to close this notification.</span></div>
<div class="centeredImage" style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px; text-align: center;">
<span style="background-color: white;"><img alt="The partition has been initialized to the Be File System" src="https://www.haiku-os.org/files/images/installation_guide/12-initialized.png" style="border: 0px;" /></span></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;">You can now see the file system type and name has been updated in the list. Also, the graphical representation should now bear the correct name. The partition setup is now complete. Exit <b>DriveSetup</b> by clicking on the left upper corner of the tab or use <span class="key" style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(199, 199, 199); font-family: serif; font-size: 0.8em; font-variant: small-caps; margin: 0px; padding: 0px 2px;">ALT</span> <span class="key" style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(199, 199, 199); font-family: serif; font-size: 0.8em; font-variant: small-caps; margin: 0px; padding: 0px 2px;">W</span>.</span></div>
<div class="centeredImage" style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px; text-align: center;">
<span style="background-color: white;"><img alt="Quit DriveSetup" src="https://www.haiku-os.org/files/images/installation_guide/13-quit-drivesetup.png" style="border: 0px;" /></span></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;">The Installer will become visible again and should now show an updated list of target partitions under <b>Onto</b> like in the following screen. You can now choose your freshly initialized partition (or a pre-existing one if you already had one) as the installation target.</span></div>
<div class="centeredImage" style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px; text-align: center;">
<span style="background-color: white;"><img alt="Select target volume" src="https://www.haiku-os.org/files/images/installation_guide/14-select-target.png" style="border: 0px;" /></span></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;">The volume with the name <b>Haiku</b> has been chosen as the target for installation and we are now ready to begin. Click on <span class="button" style="border: 1px solid rgb(199, 199, 199); font-size: 0.9em; margin: 0px 3px; padding: 2px 5px;">Begin</span> to start the installation.</span></div>
<div class="centeredImage" style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px; text-align: center;">
<span style="background-color: white;"><img alt="Begin the installation" src="https://www.haiku-os.org/files/images/installation_guide/15-begin-install.png" style="border: 0px;" /></span></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;">The installation process collects some information before starting to copy data. This can take a few seconds to process.</span></div>
<div class="centeredImage" style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px; text-align: center;">
<span style="background-color: white;"><img alt="The copy process starts" src="https://www.haiku-os.org/files/images/installation_guide/16-copy-starting.png" style="border: 0px;" /></span></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;">Soon after that, files start to be copied and a progress bar with a file count is displayed as seen in the screenshot below.</span></div>
<div class="centeredImage" style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px; text-align: center;">
<span style="background-color: white;"><img alt="The Installer copies files" src="https://www.haiku-os.org/files/images/installation_guide/17-copying.png" style="border: 0px;" /></span></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;">While the copying is taking place, it is always possible to quit the process by clicking on the <span class="button" style="border: 1px solid rgb(199, 199, 199); font-size: 0.9em; margin: 0px 3px; padding: 2px 5px;">Stop</span> button.</span></div>
<div class="centeredImage" style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px; text-align: center;">
<span style="background-color: white;"><img alt="Installation is complete" src="https://www.haiku-os.org/files/images/installation_guide/18-install-done.png" style="border: 0px;" /></span></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;">When the copying process is finished, you can quit the installer by clicking on <span class="button" style="border: 1px solid rgb(199, 199, 199); font-size: 0.9em; margin: 0px 3px; padding: 2px 5px;">Quit</span>. The install CD will be ejected, and the system will restart after a few seconds. Do not forget to remove the Haiku CD from your drive.</span></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;">Note that the Installer will take no steps to integrate Haiku into an existing boot manager menu. The Haiku partition itself will be made bootable, though. From the <b>Tools</b> menu you can launch the <b>Boot Manager</b> that puts a menu in the boot sector to choose what operating system to boot.<br />Boot Manager isn't yet tested very well and still has a few restrictions that it will complain about if they aren't met: the menu can only be installed on your first harddisk and there has to be a 2KiB space after the Master Boot Record (MBR).<br />You don't need to run Boot Manager if you already use a bootmanager like Grub, in which case you have to add Haiku manually, or Haiku runs exclusively on your machine. The Boot Manager panel will guide you through installing or uninstalling the boot menu.</span></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white; font-size: 13px;">Once fully booted, you should be greeted by a screen like the one shown below.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.haiku-os.org/files/images/installation_guide/22-fully-booted.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="background-color: white; color: black;"><img border="0" height="480" src="https://www.haiku-os.org/files/images/installation_guide/22-fully-booted.png" width="640" /></span></a></div>
<div style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;">Some background processing will still take place the first time you boot Haiku, so don't be alarmed by the disk activity. After a little while, the system should settle down. Make sure to read our <b>Welcome</b> documentation; there is a link on the Desktop.</span></div>
<div style="margin-bottom: 10px; margin-top: 10px; padding: 0px;">
<span style="background-color: white;"><span style="font-family: DejaVu Sans, Arial, Helvetica, sans-serif; font-size: x-small;"><span style="line-height: 20px;">Have fun and thanks a lot for trying out Haiku! We hope you'll like it! If you run into what you believe to be a bug, please file a report in </span></span><a class="ext" href="http://dev.haiku-os.org/" style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; margin: 0px; padding: 0px; text-decoration: none;" target="_blank">our bug tracker</a><span style="font-family: DejaVu Sans, Arial, Helvetica, sans-serif; font-size: x-small;"><span style="line-height: 20px;"> Before filing a bug report, please take the time to quickly check if your issue has already been reported; it if has, then please add a comment if you have additional information, like how to reproduce the problem. If the issue hasn't been reported before, create a new ticket and provide as many useful details as you can.</span></span><br /><br /><span style="font-family: DejaVu Sans, Arial, Helvetica, sans-serif; font-size: x-small;"><span style="line-height: 20px;">Video install hacku-OS: </span></span><br /><span style="font-family: DejaVu Sans, Arial, Helvetica, sans-serif; font-size: x-small;"><span style="line-height: 20px;">http://www.youtube.com/watch?v=hI8UhBjEMoI</span></span></span></div>

How to install Haiku-os by Kevin Kien

Welcome to the Haiku installation guide! This document will help you install Haiku on your computer, guiding you through the Haiku installat...