Thursday, September 29, 2011

Cài đặt Accordion Slider tự động cho nhãn

Gần đây mình có thử nghiệm một plugin gọi là liteAccordion của tác giả Nicola Hibbert dành cho website để tạo hiệu ứng đàn xếp. Mình đã nghiên cứu và áp dụng tự động thành công cho blogspot, tạo hiệu ứng đàn xếp trượt theo chiều ngang với bài viết mới nhất theo nhãn tích hợp thành một slider thật mượt mà.



DEMO

Để cài đặt tiện ích bạn hãy thực hiện theo các bước sau đây:

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML (không chọn mở rộng mẫu tiện ích). Đặt đoạn code sau đây vào trước thẻ </body>. Đoạn code này chính là thư viện jQuery giúp tạo hiệu ứng đàn xếp.

  1. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>
  2. <script type='text/javascript'>
  3. //<![CDATA[
  4. /*************************************************
  5. *
  6. * project: liteAccordion - horizontal accordion plugin for jQuery
  7. * author: Nicola Hibbert
  8. * url: http://nicolahibbert.com/horizontal-accordion-jquery-plugin
  9. * demo: http://www.nicolahibbert.com/demo/liteAccordion
  10. *
  11. * Version: 1.1.3
  12. * Copyright: (c) 2010-2011 Nicola Hibbert
  13. *
  14. /*************************************************/
  15. ;(function($) {
  16. $.fn.liteAccordion = function(options) {
  17. // defaults
  18. var defaults = {
  19. containerWidth : 940,
  20. containerHeight : 320,
  21. headerWidth : 48,
  22. firstSlide : 1,
  23. onActivate : function() {},
  24. slideSpeed : 800,
  25. slideCallback : function() {},
  26. autoPlay : false,
  27. pauseOnHover : false,
  28. cycleSpeed : 6000,
  29. theme : 'basic', // basic, light*, dark, stitch*
  30. rounded : false,
  31. enumerateSlides : false
  32. },
  33. // merge defaults with options in new settings object
  34. settings = $.extend({}, defaults, options),
  35. // define key variables
  36. $accordion = this,
  37. $slides = $accordion.find('li'),
  38. slideLen = $slides.length,
  39. slideWidth = settings.containerWidth - (slideLen * settings.headerWidth),
  40. $header = $slides.children('h2'),
  41. // core utility and animation methods
  42. utils = {
  43. getGroup : function(pos, index) {
  44. if (this.offsetLeft === pos.left) {
  45. return $header.slice(index + 1, slideLen).filter(function() { return this.offsetLeft === $header.index(this) * settings.headerWidth });
  46. } else if (this.offsetLeft === pos.right) {
  47. return $header.slice(0, index + 1).filter(function() { return this.offsetLeft === slideWidth + ($header.index(this) * settings.headerWidth) });
  48. }
  49. },
  50. nextSlide : function(slideIndex) {
  51. var slide = slideIndex + 1 || settings.firstSlide;
  52. // get index of next slide
  53. return function() {
  54. return slide++ % slideLen;
  55. }
  56. },
  57. play : function(slideIndex) {
  58. var getNext = utils.nextSlide((slideIndex) ? slideIndex : ''), // create closure
  59. start = function() {
  60. $header.eq(getNext()).click();
  61. };
  62. utils.playing = setInterval(start, settings.cycleSpeed);
  63. },
  64. pause : function() {
  65. clearInterval(utils.playing);
  66. },
  67. playing : 0,
  68. sentinel : false
  69. };
  70. // set container heights, widths, theme & corner style
  71. $accordion
  72. .height(settings.containerHeight)
  73. .width(settings.containerWidth)
  74. .addClass(settings.theme)
  75. .addClass(settings.rounded && 'rounded');
  76. // set tab width, height and selected class
  77. $header
  78. .width(settings.containerHeight)
  79. .height(settings.headerWidth)
  80. .eq(settings.firstSlide - 1).addClass('selected');
  81. // ie :(
  82. if ($.browser.msie) {
  83. if ($.browser.version.substr(0,1) > 8) {
  84. $header.css('filter', 'none');
  85. } else if ($.browser.version.substr(0,1) < 7) {
  86. return false;
  87. }
  88. }
  89. // set initial positions for each slide
  90. $header.each(function(index) {
  91. var $this = $(this),
  92. left = index * settings.headerWidth;
  93. if (index >= settings.firstSlide) left += slideWidth;
  94. $this
  95. .css('left', left)
  96. .next()
  97. .width(slideWidth)
  98. .css({ left : left, paddingLeft : settings.headerWidth });
  99. // add number to bottom of tab
  100. settings.enumerateSlides && $this.append('<b>' + (index + 1) + '</b>');
  101. });
  102. // bind event handler for activating slides
  103. $header.click(function(e) {
  104. var $this = $(this),
  105. index = $header.index($this),
  106. $next = $this.next(),
  107. pos = {
  108. left : index * settings.headerWidth,
  109. right : index * settings.headerWidth + slideWidth,
  110. newPos : 0
  111. },
  112. $group = utils.getGroup.call(this, pos, index);
  113. // set animation direction
  114. if (this.offsetLeft === pos.left) {
  115. pos.newPos = slideWidth;
  116. } else if (this.offsetLeft === pos.right) {
  117. pos.newPos = -slideWidth;
  118. }
  119. // check if animation in progress
  120. if (!$header.is(':animated')) {
  121. // activate onclick callback with slide div as context
  122. if (e.originalEvent) {
  123. if (utils.sentinel === this) return false;
  124. settings.onActivate.call($next);
  125. utils.sentinel = this;
  126. } else {
  127. settings.onActivate.call($next);
  128. utils.sentinel = false;
  129. }
  130. // remove, then add selected class
  131. $header.removeClass('selected').filter($this).addClass('selected');
  132. // get group of tabs & animate
  133. $group
  134. .animate({ left : '+=' + pos.newPos }, settings.slideSpeed, function() { settings.slideCallback.call($next) })
  135. .next()
  136. .animate({ left : '+=' + pos.newPos }, settings.slideSpeed);
  137. }
  138. });
  139. // pause on hover
  140. if (settings.pauseOnHover) {
  141. $accordion.hover(function() {
  142. utils.pause();
  143. }, function() {
  144. utils.play($header.index($header.filter('.selected')));
  145. });
  146. }
  147. // start autoplay, call utils with no args = start from firstSlide
  148. settings.autoPlay && utils.play();
  149. return $accordion;
  150. };
  151. })(jQuery);
  152. //]]>
  153. </script>
  154. <script>
  155. //<![CDATA[
  156. $('#one').liteAccordion({
  157. onActivate : function() {
  158. this.find('figcaption').fadeOut();
  159. },
  160. slideCallback : function() {
  161. this.find('figcaption').fadeIn();
  162. },
  163. autoPlay : true,
  164. pauseOnHover : true,
  165. theme : 'dark',
  166. rounded : true,
  167. enumerateSlides : true
  168. }).find('figcaption:first').show();
  169. //]]>
  170. </script>

Bước 2. Tìm thẻ <div id='content-wrapper'> (thẻ này chứa phần Main và phần Sidebar) rồi đặt trước nó bằng đoạn code bên dưới (tạo phần này để bố trí hiển thị Slider):

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' preferred='yes'>
</b:section>
</div>

Lưu Template.

Bước 3. Vào Page Elements. Thêm một tiện ích HTML/Javascript ở phần crosscol vừa tạo ở Bước 2 rồi đặt vào phần nội dung tiện ích bằng đoạn code bên dưới:

<link rel="stylesheet" href="http://www.nicolahibbert.com/demo/liteAccordion/css/liteaccordion.css" type="text/css"/>
<style type="text/css">
.prs {width:745px;}
.prs_pagi_label {background-color:#F0F0F0;float:left;height:120px;margin:0 2px;outline:1px solid #404951;padding:5px;position:relative;width:135px;}
.prs_pagi_label img {background-color:#000;float:left;height:55px;margin:0 8px 0 0;width:55px;}
.prs_pagi_label img.notxt {display:block;floatnone;height:90px;margin:0 auto;width:90px;}
.prs_pagi_label p {color:#888;font-size:11px;line-height:1;}
.prs_pagi_label h6 {bottom:10px;font-family:Artifika,Arial,serif;font-size:11px;font-weight:normal;line-height:1;position:absolute;text-align:center;width:140px;}
.prs_pagi_label h6 a {color:#006699;}
.pr_navi_label {clear:both;color:#BBB;font-family:Tahoma;font-size:18px;margin:0 auto;padding-top:10px;text-align:center;width:243px;}
.pr_navi_label a {color:#BBB !important;display:block;font-family:Tahoma;font-size:18px;padding:5px 10px;}
.pr_navi_label a:hover {color:#FFF !important;}
.pr_navi_label span {padding:5px 10px;}
.pr_navi_label span.deshabilitado {color:#666 !important;}
.pr_navi_label .next {float:right;}
.pr_navi_label .previous {float:left;}
.pr_navi_label .first {text-align:center;}
</style>
<script type='text/javascript'>
//<![CDATA[
// Label Post Accordion Slider for Blogspot by www.vntai.com
var post_per_page = 10;
var list_label=new Array();
list_label[0]="Tên nhãn 1";
list_label[1]="Tên nhãn 2";
list_label[2]="Tên nhãn 3";
list_label[3]="Tên nhãn 4";
var pr_flagfirst=new Array();
pr_flagfirst[0]=0;pr_flagfirst[1]=0;pr_flagfirst[2]=0;pr_flagfirst[3]=0;
var url_prev=new Array();
var url_next=new Array();

function knowwhat(json) {
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'self') {
if(json.feed.link[k].href.indexOf("Tên nhãn 1")!=-1) {num_label = 0;}
if(json.feed.link[k].href.indexOf("Tên nhãn 2")!=-1) {num_label = 1;}
if(json.feed.link[k].href.indexOf("Tên nhãn 3")!=-1) {num_label = 2;}
if(json.feed.link[k].href.indexOf("Tên nhãn 4")!=-1) {num_label = 3;}
}
}
return num_label;
}

function showpagelabel(json) {
var entry, posttitle, posturl, postimg, postcontent, postcat;
var strx_out = "";
num_label = knowwhat(json);
url_prev[num_label] = "";
url_next[num_label] = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
url_prev[num_label] = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
url_next[num_label] = json.feed.link[k].href;
}
}
for (var i = 0; i < post_per_page; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = getJSONtitle(entry);
posturl = getJSONurl(entry);
postcat = entry.category[0].term;
postcontent = getJSONcontent(entry,100);
postimg = getJSONthumbnail(entry);
strx_out += "<div class='prs_pagi_label'>";
strx_out += "<a href='" + posturl + "' target='_blank'>";
if(postcat=="Tên nhãn 2" || postcat=="Tên nhãn 3") {
strx_out += "<img class='notxt' alt='' src='" + postimg + "' />";
} else {
strx_out += "<img alt='' src='" + postimg + "' />";
}
strx_out += "</a>";
if(postcat=="Tên nhãn 1" || postcat=="Tên nhãn 4") {
strx_out += "<p>" + postcontent + "</p>";
}
strx_out += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
strx_out += "</div>";
}
document.getElementById("prs" + String(num_label)).innerHTML = strx_out;
strx_out = "";
if(url_prev[num_label]) {
strx_out += "<a href='javascript:navi_pagi_label(" + num_label + ",-1);' class='previous'>Prev</a>";
} else {
strx_out += "<span class='disabled previous'>Prev</span>";
}
if(url_next[num_label]) {
strx_out += "<a href='javascript:navi_pagi_label(" + num_label + ",1);' class='next'>Next</a>";
} else {
strx_out += "<span class='disabled next'>Next</span>";
}
strx_out += "<a href='javascript:navi_pagi_label(" + num_label + ",0);' class='first'>First</a>";
document.getElementById("pr_navi_label" + String(num_label)).innerHTML = strx_out;
}

function navi_pagi_label(num_label, direction) {
var p, parameters;
if(direction==-1) {
p = url_prev[num_label].indexOf("?");
parameters = url_prev[num_label].substring(p);
} else if (direction==1) {
p = url_next[num_label].indexOf("?");
parameters = url_next[num_label].substring(p);
} else {
parameters = "?start-index=1&max-results=" + post_per_page + "&orderby=published&alt=json-in-script"
}
parameters += "&callback=showpagelabel";
if(pr_flagfirst[num_label]==1) {
var that = document.getElementById("LABELTEMPORAL" + String(num_label));
var father = that.parentNode;
father.removeChild(that);
}
document.getElementById("prs" + String(num_label)).innerHTML = "";
document.getElementById("pr_navi_label" + String(num_label)).innerHTML = "";
var archivefeeds = "http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/" + list_label[num_label] + parameters; // thay huynh-nhat-ha bằng tên blogspot của bạn
var nouvo = document.createElement('script');
nouvo.setAttribute('type', 'text/javascript');
nouvo.setAttribute('src', archivefeeds);
nouvo.setAttribute('id', 'LABELTEMPORAL' + String(num_label));
document.getElementsByTagName('head')[0].appendChild(nouvo);
pr_flagfirst[num_label] = 1;
}

function getJSONtitle(entry,res) {
var t = entry.title.$t;
if(res) {
t = t.substring(0,res);
}
return t;
}
function getJSONurl(entry) {
var url;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
url = entry.link[k].href;
break;
}
}
return url;
}
function getJSONcontent(entry,res) {
var c = "";
if ("content" in entry) {
c = entry.content.$t;
} else if ("summary" in entry) {
c = entry.summary.$t;
}
if(res) {
c = removeHtmlTag(c,res);
}
return c;
}
function getJSONthumbnail(entry) {
var s, a, b, c, d;
var theimg = "";
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"",a);
c = s.indexOf("\"",b+5);
d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {
theimg = d;
} else {
var cat = entry.category[0].term;
if(cat=="Tên nhãn 1"){theimg = "URL_ảnh đại diện_nhãn1"}
if(cat=="Tên nhãn 2"){theimg = "URL_ảnh đại diện_nhãn2"}
if(cat=="Tên nhãn 3"){theimg = "URL_ảnh đại diện_nhãn3"}
if(cat=="Tên nhãn 4"){theimg = "URL_ảnh đại diện_nhãn4"}
}
return theimg;
}
function removeHtmlTag(strx,chop) {
var r = strx.split("<");
for(var i=0;i<r.length;i++){
if(r[i].indexOf(">")!=-1){
r[i] = r[i].substring(r[i].indexOf(">")+1,r[i].length);
}
}
r = r.join("");
var sss = "", p;
var r2 = r.split(" ");
for(var i=0;i<r2.length;i++){
p = sss + r2[i] + " "
if(p.length>=chop) {break;}
sss = p;
}
sss += "&hellip;"
return sss;
}

onload=function() {navi_pagi_label(0,0);navi_pagi_label(1,0);navi_pagi_label(2,0);navi_pagi_label(3,0);}

//]]>
</script>
<div id="one" class="accordion">
<ol>
<li>
<h2><span>Tên nhãn 1</span></h2>
<div class='slide-inner'>
<div class="prs" id="prs0"></div>
<div class="pr_navi_label" id="pr_navi_label0"></div></div>
</li>
<li>
<h2><span>Tên nhãn 2</span></h2>
<div class='slide-inner'>
<div class="prs" id="prs1"></div>
<div class="pr_navi_label" id="pr_navi_label1"></div></div>
</li>
<li>
<h2><span>Tên nhãn 3</span></h2>
<div class='slide-inner'>
<div class="prs" id="prs2"></div>
<div class="pr_navi_label" id="pr_navi_label2"></div></div>
</li>
<li>
<h2><span>Tên nhãn 4</span></h2>
<div class='slide-inner'>
<div class="prs" id="prs3"></div>
<div class="pr_navi_label" id="pr_navi_label3"></div></div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>

Trong đoạn code trên thì đoạn script chính có sự tương đồng với script dùng trong thủ thuật Tiện ích Bài viết liên quan mới nhất cho nhãn trên sidebar (bạn có thể đọc lại bài viết để tìm hiểu thêm). Ở đây mình gán thêm ảnh dại diện riêng cho từng nhãn. Bạn cần tùy biến những phần được đánh dấu đỏ, lần lượt thay thế các tên nhãn áp dụng Slider.

Wednesday, September 28, 2011

Truy tìm dấu vết hồ sơ Blogger đồng hương

Bạn sống tại thành phố Hồ Chí Minh, bạn sử dụng nền tảng Blogger để tạo blog và bạn muốn biết có bao nhiêu người dùng Blogger đến từ thành phố Hồ Chí Minh, tức là có bao nhiêu người đồng hương của bạn cùng sử dụng nền tảng Blogger. Làm thế nào để truy tìm hồ sơ của những người đồng hương của bạn, chí ít là bạn có ý định tìm kiếm người quen hoặc có thể là vì một mục đích nào đó mà bạn muốn tìm hồ sơ Blogger của một hoặc một nhóm người nào đó, vậy bạn phải làm thế nào?

Giải pháp thật là đơn giản, bạn chỉ cần truy cập địa chỉ sau đây:

http://www.blogger.com/profile-find.g?t=l&loc0=VN&loc1&loc2=H%E1%BB%93+Ch%C3%AD+Minh

Tại trang này bạn sẽ tìm thấy danh sách hồ sơ của tất cả các blogger đến từ thành phố Hồ Chí Minh, tương tự nếu là thành phố Hà Nội thì truy cập địa chỉ sau đây:

http://www.blogger.com/profile-find.g?t=l&loc0=VN&loc1&loc2=H%C3%A0+N%E1%BB%99i

Đà Nẵng: http://www.blogger.com/profile-find.g?t=l&loc0=VN&loc1&loc2=%C4%90%C3%A0+N%E1%BA%B5ng

Ở các địa phương khác bạn áp dụng tương tự, theo format như sau:

http://www.blogger.com/profile-find.g?t=l&loc0=VN&loc1&loc2=A+B

ví dụ A là Vũng, B là Tàu sẽ tìm đến danh sách các blogger đến từ Vũng Tàu vậy.

Như vậy để tìm hồ sơ của tất cả các blogger của Việt Nam thì truy cập địa chỉ:

http://www.blogger.com/profile-find.g?t=l&loc0=VN

Nếu là Mỹ thì dùng http://www.blogger.com/profile-find.g?t=l&loc0=US

Anh: http://www.blogger.com/profile-find.g?t=l&loc0=UK

Trung Quốc: http://www.blogger.com/profile-find.g?t=l&loc0=CN

Hàn Quốc: http://www.blogger.com/profile-find.g?t=l&loc0=KR (cái này chị em tha hồ mà tìm hồ sơ của mấy anh minh tinh Hàn Quốc nha, quá đã).

Tiếp tục bạn có thể tìm hồ sơ theo sở thích, ví dụ tìm các blogger có cùng sở thích Games Online thì truy cập địa chỉ:

http://www.blogger.com/profile-find.g?t=i&q=Games%20Online

Cùng sở thích Học tiếng Anh thì tìm:

http://www.blogger.com/profile-find.g?t=i&q=H%E1%BB%8Dc%20ti%E1%BA%BFng%20Anh

Tựu trung lại nếu muốn tìm những người cùng sở thích thì tìm theo format như sau:

http://www.blogger.com/profile-find.g?t=i&q=tên sở thích

Những điều này tưởng chừng như đơn giản song có thể bạn không để ý đến, mà nếu tận dụng triệt để thì bạn sẽ tìm thấy những thứ thật thú vị và hữu ích.

Monday, September 26, 2011

Đếm lượt xem bài viết bằng cookie

Đếm lượt xem bài viết là một thủ thuật khá cần thiết cho blogspot. Thông thường việc đếm lượt xem bài viết được thực hiện bằng ngôn ngữ php tuy nhiên nó yêu cầu sử dụng host, do đó dẫn đến việc đứt gánh giữa đường khi host không còn hoạt động. Ở đây mình hướng dẫn bạn cách đếm lượt xem bài viết sử dụng cookie. Bạn có thể xem DEMO bên dưới.


Thông thường bộ đếm lượt truy cập bài viết được đặt ở cuối bài viết, do đó bạn có thể tìm trong Template ở chế độ mở rộng mẫu tiện ích đến một trong những dòng code sau:

<div class='post-footer'>

<div class='post-footer-line post-footer-line-1'>

<div class='post-footer-line post-footer-line-2'>

<div class='post-footer-line post-footer-line-3'>

Rồi đặt trước hoặc sau nó bằng đoạn code bên dưới:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function setC(visitors, value){
var expireDate=new Date (2099, 12, 31);
document.cookie = visitors + "=" + escape(value) + ((expireDate == null) ? "" : ("; expires=" +
expireDate.toGMTString())) }
function readC(visitors){
var search = visitors + "=";
var i, j;
if (document.cookie.length > 0) {
i = document.cookie.indexOf(search);
if (i != -1) {
i += search.length;
j = document.cookie.indexOf(";", i);
if (j == -1) j = document.cookie.length;
return unescape(document.cookie.substring(i,j));
} } }
var num;
num=readC("visitors");
if (!num) num=0;
num++;
setC("visitors", num);
document.write("<div class='visitors'>");
document.write("<b>Bạn đã xem bài này "+num+" lần.<\/b>");
document.write("<\/div>");
//]]>
</script>
</b:if>

Nếu muốn tùy biến CSS cho dòng thông báo thì bạn đặt CSS như thế này (trước dòng ]]></b:skin> trong Template):

.visitors{
… đặt các thuộc tính CSS ở đây nha ..
}

Hy vọng đoạn script này sẽ giúp ích cho blogspot của bạn, tránh đến việc sử dụng host để dành cho cả một thủ thuật nhỏ như thế này quả thật là bất tiện và phung phí.

Sunday, September 25, 2011

Dịch vụ thiết kế Blogger Template

Nhằm góp phần phát triển cộng đồng Blogspot Việt Nam, Thủ thuật Blogger mở rộng dịch vụ thiết kế Template theo đơn đặt của khách hàng.

1. Thiết kế Template (Khung giá 10 - 20 USD)

Đã có 1 người đăng ký (Pending)

Bạn muốn tạo một Template độc đáo cho Blogspot của bạn? Hãy cho chúng tôi biết ý tưởng của bạn. Chúng tôi sẽ tạo một Template thượng hạng và làm thỏa mãn yêu cầu của bạn.

2. Chuyển thể WordPress sang Blogger (Khung giá 15 – 30 USD)

Bạn muốn chuyển thể một Wordpress Theme sang Blogger Template để sử dụng cho Blogspot của bạn? Hãy gửi mẫu Wordpress Theme cho chúng tôi và chúng tôi sẽ giúp bạn tạo phiên bản Blogger.

3. Tùy biến Blogspot (Khung giá 5 – 10 USD)

Đã có 2 người đăng ký (Finished)

Nếu bạn muốn thay đổi những đặc điểm của Blogspot của bạn như thêm Sidebar, thêm Lowerbar, chia cột Header, thêm Slider, thêm các tiện ích, cải thiện SEO, cải thiện tốc độ load trang …, chúng tôi sẽ giúp bạn thực hiện tất cả những yêu cầu theo cách tối ưu nhất.

Thanh toán được thực hiện qua Paypal, ATM, Card điện thoại di động. Hãy liên hệ với chúng tôi qua email: webmaster@vntai.com để biết thêm chi tiết.

Saturday, September 24, 2011

Đầu tư MMO bằng E-Study Template

Nếu bạn muốn chơi Affiliate, Adsense hoặc MMO nói chung hoặc thậm chí muốn đặt quảng cáo trên blogspot thì bạn nên chọn một Template thật đặc trưng. Nếu muốn chơi MMO thật hiệu quả thì bạn nên viết blogspot bằng tiếng Anh. E-Study là một Template mới ra của Thủ thuật Blogger có thể đáp ứng đủ yêu cầu của một người chơi MMO đích thực.





DEMO


E-Study Template được tích hợp đầy đủ các tiện ích cần thiết cho một blogspot. Nổi bật nhất là phần Auto Readmore có thương hiệu riêng của Thủ thuật Blogger. Phần nhận xét tự động điều chỉnh bề rộng theo số ký tự của nhận xét. Đã gắn tiện ích Next Post/Previous Post. Menu dạng cây thư mục tiết kiệm không gian web. Tốc độ load siêu nhanh, bạn có thể kiểm tra bằng công cụ dưới đây:

Kiểm tra dung lượng và tốc độ tải trang:

Tên domain/website:
(Ví dụ: www.vntai.com)
Có thể phân tích chi tiết tại Pingdom.


E-Study đã được SEO theo hướng tốt nhất, dễ cài đặt và tùy biến.

Quan niệm của Thủ thuật Blogger về phương diện Template thương mại: “Hàng rẻ là hàng dỏm” vì thế E-Study sẽ không có giá dưới 10 USD. Giá bán ban đầu là 10USD/Template, sau 5 lần sale sẽ tăng thêm 1 USD đến giá fix cuối cùng là 15 USD (giá trị thực của E-Study). 10 USD đầu tư cho một sự nghiệp MMO là sự lựa chọn quá ư là đơn giản.

Đã có 01 người mua Template này.


E-Study Price Options

Sunday, September 18, 2011

Cài đặt bộ chèn Emoticons cho hệ thống nhận xét phân cấp

Được biết, hiện nay với sự phố biến của hệ thống nhận xét phân cấp qua đó người nhận xét khi trả lời một ý kiến của một người nào đó thì thường nhấn vào nút Trả lời/Reply để viết nhận xét qua cửa sổ popup, lúc này việc chèn biểu tượng cảm xúc vào nhận xét sẽ gặp khó khăn. Giải pháp cho vấn đề này là tạo bộ biểu tượng cảm xúc trực tiếp trong hệ thống nhận xét popup.

Hẳn bạn cũng từng biết về addon Greasemonkey giúp thêm bộ chèn biểu tượng cảm xúc trực tiếp vào công cụ đăng bài viết (Post Editor) của Blogspot. Kịch bản này chỉ hoạt động trên trình duyệt FireFox. Thật may là sau một quá trình nguyên cứu, mình đã áp dụng thành công phương pháp này đối với hệ thống nhận xét popup. Cách thức thực hiện là viết một kịch bản tạo chức năng chèn các thẻ <b></b> (in đậm), <i></i> (in nghiêng), <a></a> (liên kết) và một bộ biểu tượng cảm xúc (ở đây mình tạo bộ 25 Zing Emoticons) sau đó upload kịch bản lên trang tài nguyên userscript.org. Để cài đặt tiện ích này, người dùng cần sử dụng trình duyệt FireFox tải addon Greasemonkey rồi cài đặt. Trước tiên đến trang Greasemonkey, nhấn nút Add to Firefox để tải về cài đặt tiện ích này.


Sau đó khởi động lại (restart) trình duyệt, tiếp tục tải Emoticons Script về, nhấn Install để script tự động cài đặt vào FireFox.


Sau đó mở hệ thống nhận xét popup bạn sẽ thấy bộ biểu tượng cảm xúc sẽ xuất hiện trong phần Comments Form. Mỗi khi cần chèn biểu tượng hoặc các thẻ HTML, bạn chỉ việc click vào nó là xong.

Tuy nhiên để các biểu tượng cảm xúc hiển thị trên phần nhận xét (không phải dạng Popup) thì bạn phải cài đặt chức năng biểu tượng cảm xúc, bằng cách đặt đoạn code sau đây vào trước thẻ </body>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
//Emoticons for Blogger Comments || Author: Huynh Nhat Ha || http://huynh-nhat-ha.blogspot.com || © Copyright 2010
function emoticonBloggerHuynhNhatHa() {

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

bodyText = document.getElementById('comments-block');

theText = bodyText.innerHTML;
theText = theText.replace(/:1/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH5GS-rDnjXqdhXjuKp2L_aIhL6r9vo6McHfUw3zcFl26ajH8V8braUvgqD1RnhBsZT_7WbczaqcRUK_NRvbr4EY5UQIzMmONT99oav18tlREyEVLZjAbUPfDgIVYbKRuRDCmDTEI7El62/s1600/49.gif" />');
theText = theText.replace(/:2/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkn5S4_n9OVXxXy7AhjVM4pPg4-oPBqr7sXzNRqQY7BpHz3E4JkJE2Ac0lFEa_w172dj0WBXKbYRZ0s3SnJojG927zenqaZOwafwVIvGbCendJtPxm1NseWMEn13iHwV4ayKmzD7_lx6e6/s1600/102.gif" />');
theText = theText.replace(/:3/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkcxW6UekORj1QpVQCzkfe-HQqePm9IlyOL8SKsuY4v241Hkk1cY4YUwvmZvdkjZsmQllBIjhR0O82SQpY4fHX8ZJSRtvfH4AfQg0iDThv1VAey4OrnBVL30Rr7THzgppgpj3abmxa-jZb/s1600/113.gif" />');
theText = theText.replace(/:4/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA8JJk4a7jFFb_EIErJIekWPVji8UnImb6_GQeCARlW70fsdOEurNFLUOGL8BvvpI_8U1cjcpuo1cgKXNy4NyAvhlZj_cEICiAA7vg_GoEDQiR6XhhRC5TdZ81ZDFeCVk4ViSP2OEEuTaa/s1600/93.gif" />');
theText = theText.replace(/:5/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3I2gzAuYYHPK3S_7IO-18jIHAhoItY8OAEF_Vh4toFrWiDon2pHQOVulptE64dM4nIf62Fy5odvywnE7gPeRkduRCMoChCZDlvCQaxK2MHfXeNaGuIHQgxk6IlIx65ll_u1ZeE3FhiQYw/s1600/61.gif" />');
theText = theText.replace(/:6/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoHpdEgfccXdBs90lYk8TxPde5X1uTeSdb53gh_PdsPDFEh6xvPLdylvkK7TKZtBYX88uGNdrIZRdtaO_DU_hr215QRCjfy1dI-zdeeksT_Nd3-EYYzNVUvstWqBmAppagebECR-xtN3Yp/s1600/134.gif" />');
theText = theText.replace(/:7/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZUf8624nHuf15md8zQuicEU0W_T3L25w578qE0Zp37Kt67YfHYhXO5T4RPxV6dnEbCvyQv2_ytg-960uII_qeNDdKfqLC5dDOvmhRQ4JZEp8AiGIFYNkXx6ib-hQxBlaNhx-8f-yW7A7u/s1600/39.gif" />');
theText = theText.replace(/:8/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjKaVbF9o-W-0aF4Leli6-yYoPj-zokwDzCzOCBmChCfg8vIJRaQ7NBsSys85jcd0OAAJC1T2HV-IXBSITzkQUdDdtGhfHv_Rm3WEAzdnZMwqn2N_kU-vGwMifYJqmVpPX7G3Ymts9CwO_/s1600/106.gif" />');
theText = theText.replace(/:9/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_QB_iwTLHmiYanwDPSlsLXJfMxFteBSa4XDVNQe6QJEZqyVIjSOiD3bWBWnnwAo9uyQvKv7eTrLKGAO7mYoYmH_5ZvbyhOT2fzE1JNOx4nuf5l-wPDOLOLlvfPUWAYrCgwjmqD9csaEq6/s1600/43.gif" />');
theText = theText.replace(/:A/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzWeqF_PGnIvm3HD_tFZovHhAQJ1IHDYDTkqAbkXJBgCxqLEgIwd3qoq6_bGvXYDJg_imraS6fzwvAthMc2KLKDZ1vrVgokwxt5wvIxzeWyLgAyPLpwKIL1zi-RycNiGZciwVVon4_Ee74/s1600/111.gif" />');
theText = theText.replace(/:B/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio-jcj5y5VDpxA2LDY0Be5fXTAOb948T0-DFs8GC5Z98ZR-SNlDYNfp5_N4KnWRLztr8yntOpLOfkHy1_pktxnXOu9io8DOaiiI0n9klG5hogoGWQWfYoUUtOuEIA2C5fWS1_hRomX4ENm/s1600/48.gif" />');
theText = theText.replace(/:C/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhufsl2FtByKUEQvBfRFYPK8jbSReV9eHzktVQ0ifIQJP96egyBkGeTu3GCUY17kClkRfV8o-n3llssEVFcA5rzPZjMKV-8MvfjQI4R5uVwPDMK12F4sxz-OuCyBvDXqQIkuvvw7LDGmABe/s1600/54.gif" />');
theText = theText.replace(/:D/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi46Z8_vzNC81bst4yZ-cY2PmCJPgQm_uiDttA0b4Pydq8it4Lw8jultyExHswCgGIR3e7gR2W1vrYqHaL-liBNZT3EkdknBMhWshGLq1L2BzYAJScmvdfeySM1rNHDZOB37scX7AcJmgeM/s1600/63.gif" />');
theText = theText.replace(/:E/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibtCWdY92ykbixUxRw3nYo7LGzrhDjkMQcXfiljgNpGBvgWP98TuhLO-irMuZZDkDrgR-K0ti_b-aV3O6JPdp43YPrJWlsLcPwJkZDgEzTTKLKj7i93sER-HzI77iXlb8W9uhg6RhC9U07/s1600/100.gif" />');
theText = theText.replace(/:F/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFpRcugAIuJY6CQkeOMb6eYGmpcAsUMw3npC1Hc-910Thw063V3NmXMd1qDDSmgsIp8xoAicoUu9yNvF_HMQ4vWTrL8qYwlbpXcIv1RHR4oE51_BKnYm2Bo-TWe-97d01Q3ZgDoMw4InTw/s1600/45.gif" />');
theText = theText.replace(/:G/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBFyeih367hypEL75t8cZ4Nhm97ujWuwEVqt7rUn0sAcX45PBmlF_3evfrU_VZQ8bYeK53DgsuxK-jeSgpeP3kDxUcgtwVaxRaylV3kHy7XS88GE92LS4ecKpUKGjeDLn8w_fBsoh0nHDo/s1600/77.gif" />');
theText = theText.replace(/:H/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ67kCj15R7R038Fuuq_flZ0Ojnu0fq66sgnlWA8LMFHPRcBohysAS_ZWo4amAs5NtpOgIu58egECPVt9izwP8DgBJ5TtcU-f33l4a849u2MMsCFIjH5fpXjMca5QW6J1mbzLF-JdHRvn8/s1600/86.gif" />');
theText = theText.replace(/:I/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7-ZTp4NRGN9aCjJ8-EvnYF-QkCSPyjL9jMxqLSsFnOPrfts_WsdHVu8NuMMuFYs6sIrI8uZBvF2-PmWGwBBxQHwzZHdrIkqJ9zWXp9FdP1wtN-jTXkHJupStskk200tYG8fGDYDQSs5yK/s1600/94.gif" />');
theText = theText.replace(/:J/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqCj4jD3H87geDZiRS32pxQZYawKW7hJLn9JqaXrs1FY5EYAgrSLLM2HewCuWMbT_YTSZfWzula7RIplC_RLOzqPKlFfiARj6BUKoVGiYa7uzLLw_0Tkxe4J8V0NWz3rAvX8d6IP27EG2s/s1600/83.gif" />');
theText = theText.replace(/:K/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYKQuvI95jHuASEg0Pyc6RDnXrnWbTTxUuGrpHj6Egws3bwPd7GOn2SqwZZ8cLMODTJUCiJSJPB_-yMErZrfWSpKBTBbA_yJMu1OSQNmjEC5qvdfKMbSuXZC3DSesmQeRkYHl4twVPh0Us/s1600/59.gif" />');
theText = theText.replace(/:L/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvfnFbB6EkAEzc_UZ6K7f2zy-rC9gYEk5HixJu-tHH3nSTxMOo_dPoOk3_MweYyW9DqplIuvCYGdg0l4wPhw3zQOv1K9gydX-RHG7Wg-MHHY2cphFJI9VoAMEPEnxD44m94YY5N1nMXKWM/s1600/soldierbaby.gif" />');
theText = theText.replace(/:M/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbv8P140vEb2SBNx0BujqMwIjd3BzqXhOpqZe71PhdQx_YM2pbfpKHc_BYhpFkJqQ8SKmOJgVOwpUxO5P6yRfygbbiZPev0XoM0Q7z_44Gizzs5ZFMkf5vdRLrVvMz0mvfwU1dqwpELNJM/s1600/alo.gif" />');
theText = theText.replace(/:N/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9mlFPszfiM13jGBFgswpfLpbcClMHFJuriYLjPSg2mTviDq8Nph8n0yJs5b5oWf1GgKRzDh-T-iEdR3-VMUMK76hiOZCjXpb35iQXX0_uzeFguFqkwQJUlY_4SEn5YHGBxCepY-c-ih3D/s1600/shutup.gif" />');
theText = theText.replace(/:O/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHU7QUR9fjlLBYJ6wTFhB6Pw_IQ8cm4-IJruQLlZBOjKe5tT5oyKqoc_ef98rdsJhLcXcpfxiRXagxHKIA5d8pPWbKrWHUzOoMHtw3eow-2P8Pyfbb9RJsa2vp4aR4R4mY0l842Yljayfp/s1600/yeulam.gif" />');
theText = theText.replace(/:P/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBM3eqNPvdkf_5gSNEDqj4uw0z3hIP59td5EYkX3MrpFJwLhg3rW4VBbzp7hUbEFqbo5M5bQtYUAgPSLRbg0OC9_S-qUYky8mczMJfFjaYZa8W_h6nDqd_evaiIuNMASMcWtPKQpQQX_t1/s1600/datbomb.gif" />');

bodyText.innerHTML = theText;}
//]]>
</script>
<script type='text/javascript'>
emoticonBloggerHuynhNhatHa();
</script>
</b:if>


  1. Chú ý


    • 1 Để 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 comments-block 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 <b:loop values='data:post.comments' var='comment'>. 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ụ: comments-block, comments-block3, comments_block, cm_block, commentsblock …

    • 2 Sau khi cài đặt thủ thuật này, bạn cần cập nhật lại thủ thuật Chèn biểu tượng cảm xúc vào nhận xét dạng input để tạo sự thống nhất.

Saturday, September 17, 2011

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 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. 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 text (textarea) 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>, <i>, <em>, <a>. 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.

Bạn có thể xem Demo ở phần viết bình luận của Thủ thuật Blogger.


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:

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Đặt đoạn code sau đây vào trước thẻ </body>. Đây là script chức năng cho bộ biểu tượng cảm xúc hoạt động.

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
//Emoticons for Blogger Comments || Author: Huynh Nhat Ha || http://www.vntai.com || © Copyright 2010
function emoticonBloggerHuynhNhatHa() {

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

bodyText = document.getElementById('comments-block');

theText = bodyText.innerHTML;
theText = theText.replace(/:1\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH5GS-rDnjXqdhXjuKp2L_aIhL6r9vo6McHfUw3zcFl26ajH8V8braUvgqD1RnhBsZT_7WbczaqcRUK_NRvbr4EY5UQIzMmONT99oav18tlREyEVLZjAbUPfDgIVYbKRuRDCmDTEI7El62/s1600/49.gif" />');
theText = theText.replace(/:2\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkn5S4_n9OVXxXy7AhjVM4pPg4-oPBqr7sXzNRqQY7BpHz3E4JkJE2Ac0lFEa_w172dj0WBXKbYRZ0s3SnJojG927zenqaZOwafwVIvGbCendJtPxm1NseWMEn13iHwV4ayKmzD7_lx6e6/s1600/102.gif" />');
theText = theText.replace(/:3\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkcxW6UekORj1QpVQCzkfe-HQqePm9IlyOL8SKsuY4v241Hkk1cY4YUwvmZvdkjZsmQllBIjhR0O82SQpY4fHX8ZJSRtvfH4AfQg0iDThv1VAey4OrnBVL30Rr7THzgppgpj3abmxa-jZb/s1600/113.gif" />');
theText = theText.replace(/:4\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA8JJk4a7jFFb_EIErJIekWPVji8UnImb6_GQeCARlW70fsdOEurNFLUOGL8BvvpI_8U1cjcpuo1cgKXNy4NyAvhlZj_cEICiAA7vg_GoEDQiR6XhhRC5TdZ81ZDFeCVk4ViSP2OEEuTaa/s1600/93.gif" />');
theText = theText.replace(/:5\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3I2gzAuYYHPK3S_7IO-18jIHAhoItY8OAEF_Vh4toFrWiDon2pHQOVulptE64dM4nIf62Fy5odvywnE7gPeRkduRCMoChCZDlvCQaxK2MHfXeNaGuIHQgxk6IlIx65ll_u1ZeE3FhiQYw/s1600/61.gif" />');
theText = theText.replace(/:6\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoHpdEgfccXdBs90lYk8TxPde5X1uTeSdb53gh_PdsPDFEh6xvPLdylvkK7TKZtBYX88uGNdrIZRdtaO_DU_hr215QRCjfy1dI-zdeeksT_Nd3-EYYzNVUvstWqBmAppagebECR-xtN3Yp/s1600/134.gif" />');
theText = theText.replace(/:7\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZUf8624nHuf15md8zQuicEU0W_T3L25w578qE0Zp37Kt67YfHYhXO5T4RPxV6dnEbCvyQv2_ytg-960uII_qeNDdKfqLC5dDOvmhRQ4JZEp8AiGIFYNkXx6ib-hQxBlaNhx-8f-yW7A7u/s1600/39.gif" />');
theText = theText.replace(/:8\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjKaVbF9o-W-0aF4Leli6-yYoPj-zokwDzCzOCBmChCfg8vIJRaQ7NBsSys85jcd0OAAJC1T2HV-IXBSITzkQUdDdtGhfHv_Rm3WEAzdnZMwqn2N_kU-vGwMifYJqmVpPX7G3Ymts9CwO_/s1600/106.gif" />');
theText = theText.replace(/:9\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_QB_iwTLHmiYanwDPSlsLXJfMxFteBSa4XDVNQe6QJEZqyVIjSOiD3bWBWnnwAo9uyQvKv7eTrLKGAO7mYoYmH_5ZvbyhOT2fzE1JNOx4nuf5l-wPDOLOLlvfPUWAYrCgwjmqD9csaEq6/s1600/43.gif" />');
theText = theText.replace(/:A\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzWeqF_PGnIvm3HD_tFZovHhAQJ1IHDYDTkqAbkXJBgCxqLEgIwd3qoq6_bGvXYDJg_imraS6fzwvAthMc2KLKDZ1vrVgokwxt5wvIxzeWyLgAyPLpwKIL1zi-RycNiGZciwVVon4_Ee74/s1600/111.gif" />');
theText = theText.replace(/:B\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio-jcj5y5VDpxA2LDY0Be5fXTAOb948T0-DFs8GC5Z98ZR-SNlDYNfp5_N4KnWRLztr8yntOpLOfkHy1_pktxnXOu9io8DOaiiI0n9klG5hogoGWQWfYoUUtOuEIA2C5fWS1_hRomX4ENm/s1600/48.gif" />');
theText = theText.replace(/:C\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhufsl2FtByKUEQvBfRFYPK8jbSReV9eHzktVQ0ifIQJP96egyBkGeTu3GCUY17kClkRfV8o-n3llssEVFcA5rzPZjMKV-8MvfjQI4R5uVwPDMK12F4sxz-OuCyBvDXqQIkuvvw7LDGmABe/s1600/54.gif" />');
theText = theText.replace(/:D\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi46Z8_vzNC81bst4yZ-cY2PmCJPgQm_uiDttA0b4Pydq8it4Lw8jultyExHswCgGIR3e7gR2W1vrYqHaL-liBNZT3EkdknBMhWshGLq1L2BzYAJScmvdfeySM1rNHDZOB37scX7AcJmgeM/s1600/63.gif" />');
theText = theText.replace(/:E\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibtCWdY92ykbixUxRw3nYo7LGzrhDjkMQcXfiljgNpGBvgWP98TuhLO-irMuZZDkDrgR-K0ti_b-aV3O6JPdp43YPrJWlsLcPwJkZDgEzTTKLKj7i93sER-HzI77iXlb8W9uhg6RhC9U07/s1600/100.gif" />');
theText = theText.replace(/:F\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFpRcugAIuJY6CQkeOMb6eYGmpcAsUMw3npC1Hc-910Thw063V3NmXMd1qDDSmgsIp8xoAicoUu9yNvF_HMQ4vWTrL8qYwlbpXcIv1RHR4oE51_BKnYm2Bo-TWe-97d01Q3ZgDoMw4InTw/s1600/45.gif" />');
theText = theText.replace(/:G\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBFyeih367hypEL75t8cZ4Nhm97ujWuwEVqt7rUn0sAcX45PBmlF_3evfrU_VZQ8bYeK53DgsuxK-jeSgpeP3kDxUcgtwVaxRaylV3kHy7XS88GE92LS4ecKpUKGjeDLn8w_fBsoh0nHDo/s1600/77.gif" />');
theText = theText.replace(/:H\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ67kCj15R7R038Fuuq_flZ0Ojnu0fq66sgnlWA8LMFHPRcBohysAS_ZWo4amAs5NtpOgIu58egECPVt9izwP8DgBJ5TtcU-f33l4a849u2MMsCFIjH5fpXjMca5QW6J1mbzLF-JdHRvn8/s1600/86.gif" />');
theText = theText.replace(/:I\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7-ZTp4NRGN9aCjJ8-EvnYF-QkCSPyjL9jMxqLSsFnOPrfts_WsdHVu8NuMMuFYs6sIrI8uZBvF2-PmWGwBBxQHwzZHdrIkqJ9zWXp9FdP1wtN-jTXkHJupStskk200tYG8fGDYDQSs5yK/s1600/94.gif" />');
theText = theText.replace(/:J\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqCj4jD3H87geDZiRS32pxQZYawKW7hJLn9JqaXrs1FY5EYAgrSLLM2HewCuWMbT_YTSZfWzula7RIplC_RLOzqPKlFfiARj6BUKoVGiYa7uzLLw_0Tkxe4J8V0NWz3rAvX8d6IP27EG2s/s1600/83.gif" />');
theText = theText.replace(/:K\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYKQuvI95jHuASEg0Pyc6RDnXrnWbTTxUuGrpHj6Egws3bwPd7GOn2SqwZZ8cLMODTJUCiJSJPB_-yMErZrfWSpKBTBbA_yJMu1OSQNmjEC5qvdfKMbSuXZC3DSesmQeRkYHl4twVPh0Us/s1600/59.gif" />');
theText = theText.replace(/:L\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvfnFbB6EkAEzc_UZ6K7f2zy-rC9gYEk5HixJu-tHH3nSTxMOo_dPoOk3_MweYyW9DqplIuvCYGdg0l4wPhw3zQOv1K9gydX-RHG7Wg-MHHY2cphFJI9VoAMEPEnxD44m94YY5N1nMXKWM/s1600/soldierbaby.gif" />');
theText = theText.replace(/:M\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbv8P140vEb2SBNx0BujqMwIjd3BzqXhOpqZe71PhdQx_YM2pbfpKHc_BYhpFkJqQ8SKmOJgVOwpUxO5P6yRfygbbiZPev0XoM0Q7z_44Gizzs5ZFMkf5vdRLrVvMz0mvfwU1dqwpELNJM/s1600/alo.gif" />');
theText = theText.replace(/:N\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9mlFPszfiM13jGBFgswpfLpbcClMHFJuriYLjPSg2mTviDq8Nph8n0yJs5b5oWf1GgKRzDh-T-iEdR3-VMUMK76hiOZCjXpb35iQXX0_uzeFguFqkwQJUlY_4SEn5YHGBxCepY-c-ih3D/s1600/shutup.gif" />');
theText = theText.replace(/:O\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHU7QUR9fjlLBYJ6wTFhB6Pw_IQ8cm4-IJruQLlZBOjKe5tT5oyKqoc_ef98rdsJhLcXcpfxiRXagxHKIA5d8pPWbKrWHUzOoMHtw3eow-2P8Pyfbb9RJsa2vp4aR4R4mY0l842Yljayfp/s1600/yeulam.gif" />');
theText = theText.replace(/:P\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBM3eqNPvdkf_5gSNEDqj4uw0z3hIP59td5EYkX3MrpFJwLhg3rW4VBbzp7hUbEFqbo5M5bQtYUAgPSLRbg0OC9_S-qUYky8mczMJfFjaYZa8W_h6nDqd_evaiIuNMASMcWtPKQpQQX_t1/s1600/datbomb.gif" />');

bodyText.innerHTML = theText;}
//]]>
</script>
<script type='text/javascript'>
emoticonBloggerHuynhNhatHa();
</script>
</b:if>

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 comments-block 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 <b:loop values='data:post.comments' var='comment'>. 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ụ: comments-block, comments-block3, comments_block, cm_block, commentsblock …

Bước 2. 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.

<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%'/>

Đặt trước đoạn code trên bằng đoạn code bên dưới:

<script type='text/javascript'>
//<![CDATA[
// Script to insert Emoticons and Links on Blogspot Comments V1 by www.vntai.com
function comments_URL() {
var r = prompt("Nhập địa chỉ trang", "http://");
var p = prompt("Nhập link text hiển thị", "Text");
if(r != "") ; if(p != ""){
document.getElementById('comments_input').value += "<a href='" + r + "' rel='nofollow'>" + p + "<\/a>";
} else {
alert("Bạn đã nhập xong dữ liệu");
}
}
function comments_HTML() {
document.getElementById('comments_input').value += '<a href=\'http://URL dẫn đến link \'>Trang<\/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;width:600px;float:left;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>
<!--[if IE]> <style> #comments_URL {display: none} #comments_HTML {display:inline} </style> <![endif]-->

<div id='comments_insert'>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:1) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH5GS-rDnjXqdhXjuKp2L_aIhL6r9vo6McHfUw3zcFl26ajH8V8braUvgqD1RnhBsZT_7WbczaqcRUK_NRvbr4EY5UQIzMmONT99oav18tlREyEVLZjAbUPfDgIVYbKRuRDCmDTEI7El62/s1600/49.gif' style='border: 0; padding:0' title='hê hê hê'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:2) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkn5S4_n9OVXxXy7AhjVM4pPg4-oPBqr7sXzNRqQY7BpHz3E4JkJE2Ac0lFEa_w172dj0WBXKbYRZ0s3SnJojG927zenqaZOwafwVIvGbCendJtPxm1NseWMEn13iHwV4ayKmzD7_lx6e6/s1600/102.gif' style='border: 0; padding:0' title='hôn hôn'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:3) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkcxW6UekORj1QpVQCzkfe-HQqePm9IlyOL8SKsuY4v241Hkk1cY4YUwvmZvdkjZsmQllBIjhR0O82SQpY4fHX8ZJSRtvfH4AfQg0iDThv1VAey4OrnBVL30Rr7THzgppgpj3abmxa-jZb/s1600/113.gif' style='border: 0; padding:0' title='ua ua ua'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:4) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA8JJk4a7jFFb_EIErJIekWPVji8UnImb6_GQeCARlW70fsdOEurNFLUOGL8BvvpI_8U1cjcpuo1cgKXNy4NyAvhlZj_cEICiAA7vg_GoEDQiR6XhhRC5TdZ81ZDFeCVk4ViSP2OEEuTaa/s1600/93.gif' style='border: 0; padding:0' title='nhìn nè'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:5) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3I2gzAuYYHPK3S_7IO-18jIHAhoItY8OAEF_Vh4toFrWiDon2pHQOVulptE64dM4nIf62Fy5odvywnE7gPeRkduRCMoChCZDlvCQaxK2MHfXeNaGuIHQgxk6IlIx65ll_u1ZeE3FhiQYw/s1600/61.gif' style='border: 0; padding:0' title='vỗ tay'/></a>
<span id='smiley-more' style='display: none;'>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:6) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoHpdEgfccXdBs90lYk8TxPde5X1uTeSdb53gh_PdsPDFEh6xvPLdylvkK7TKZtBYX88uGNdrIZRdtaO_DU_hr215QRCjfy1dI-zdeeksT_Nd3-EYYzNVUvstWqBmAppagebECR-xtN3Yp/s1600/134.gif' style='border: 0; padding:0' title='tát bớp'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:7) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZUf8624nHuf15md8zQuicEU0W_T3L25w578qE0Zp37Kt67YfHYhXO5T4RPxV6dnEbCvyQv2_ytg-960uII_qeNDdKfqLC5dDOvmhRQ4JZEp8AiGIFYNkXx6ib-hQxBlaNhx-8f-yW7A7u/s1600/39.gif' style='border: 0; padding:0' title='rơi lệ'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:8) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjKaVbF9o-W-0aF4Leli6-yYoPj-zokwDzCzOCBmChCfg8vIJRaQ7NBsSys85jcd0OAAJC1T2HV-IXBSITzkQUdDdtGhfHv_Rm3WEAzdnZMwqn2N_kU-vGwMifYJqmVpPX7G3Ymts9CwO_/s1600/106.gif' style='border: 0; padding:0' title='money money'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:9) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_QB_iwTLHmiYanwDPSlsLXJfMxFteBSa4XDVNQe6QJEZqyVIjSOiD3bWBWnnwAo9uyQvKv7eTrLKGAO7mYoYmH_5ZvbyhOT2fzE1JNOx4nuf5l-wPDOLOLlvfPUWAYrCgwjmqD9csaEq6/s1600/43.gif' style='border: 0; padding:0' title='lêu lêu'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:A) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzWeqF_PGnIvm3HD_tFZovHhAQJ1IHDYDTkqAbkXJBgCxqLEgIwd3qoq6_bGvXYDJg_imraS6fzwvAthMc2KLKDZ1vrVgokwxt5wvIxzeWyLgAyPLpwKIL1zi-RycNiGZciwVVon4_Ee74/s1600/111.gif' style='border: 0; padding:0' title='lắc đầu'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:B) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio-jcj5y5VDpxA2LDY0Be5fXTAOb948T0-DFs8GC5Z98ZR-SNlDYNfp5_N4KnWRLztr8yntOpLOfkHy1_pktxnXOu9io8DOaiiI0n9klG5hogoGWQWfYoUUtOuEIA2C5fWS1_hRomX4ENm/s1600/48.gif' style='border: 0; padding:0' title='khóc ròng'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:C) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhufsl2FtByKUEQvBfRFYPK8jbSReV9eHzktVQ0ifIQJP96egyBkGeTu3GCUY17kClkRfV8o-n3llssEVFcA5rzPZjMKV-8MvfjQI4R5uVwPDMK12F4sxz-OuCyBvDXqQIkuvvw7LDGmABe/s1600/54.gif' style='border: 0; padding:0' title='I don’t know'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:D) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi46Z8_vzNC81bst4yZ-cY2PmCJPgQm_uiDttA0b4Pydq8it4Lw8jultyExHswCgGIR3e7gR2W1vrYqHaL-liBNZT3EkdknBMhWshGLq1L2BzYAJScmvdfeySM1rNHDZOB37scX7AcJmgeM/s1600/63.gif' style='border: 0; padding:0' title='hi hi hi'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:E) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibtCWdY92ykbixUxRw3nYo7LGzrhDjkMQcXfiljgNpGBvgWP98TuhLO-irMuZZDkDrgR-K0ti_b-aV3O6JPdp43YPrJWlsLcPwJkZDgEzTTKLKj7i93sER-HzI77iXlb8W9uhg6RhC9U07/s1600/100.gif' style='border: 0; padding:0' title='đá một phát'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:F) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFpRcugAIuJY6CQkeOMb6eYGmpcAsUMw3npC1Hc-910Thw063V3NmXMd1qDDSmgsIp8xoAicoUu9yNvF_HMQ4vWTrL8qYwlbpXcIv1RHR4oE51_BKnYm2Bo-TWe-97d01Q3ZgDoMw4InTw/s1600/45.gif' style='border: 0; padding:0' title='cười lớn giơ răng'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:G) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBFyeih367hypEL75t8cZ4Nhm97ujWuwEVqt7rUn0sAcX45PBmlF_3evfrU_VZQ8bYeK53DgsuxK-jeSgpeP3kDxUcgtwVaxRaylV3kHy7XS88GE92LS4ecKpUKGjeDLn8w_fBsoh0nHDo/s1600/77.gif' style='border: 0; padding:0' title='cụng ly'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:H) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ67kCj15R7R038Fuuq_flZ0Ojnu0fq66sgnlWA8LMFHPRcBohysAS_ZWo4amAs5NtpOgIu58egECPVt9izwP8DgBJ5TtcU-f33l4a849u2MMsCFIjH5fpXjMca5QW6J1mbzLF-JdHRvn8/s1600/86.gif' style='border: 0; padding:0' title='chém gió'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:I) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7-ZTp4NRGN9aCjJ8-EvnYF-QkCSPyjL9jMxqLSsFnOPrfts_WsdHVu8NuMMuFYs6sIrI8uZBvF2-PmWGwBBxQHwzZHdrIkqJ9zWXp9FdP1wtN-jTXkHJupStskk200tYG8fGDYDQSs5yK/s1600/94.gif' style='border: 0; padding:0' title='bắt tay'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:J) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqCj4jD3H87geDZiRS32pxQZYawKW7hJLn9JqaXrs1FY5EYAgrSLLM2HewCuWMbT_YTSZfWzula7RIplC_RLOzqPKlFfiARj6BUKoVGiYa7uzLLw_0Tkxe4J8V0NWz3rAvX8d6IP27EG2s/s1600/83.gif' style='border: 0; padding:0' title='ăn ăn ăn'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:K) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYKQuvI95jHuASEg0Pyc6RDnXrnWbTTxUuGrpHj6Egws3bwPd7GOn2SqwZZ8cLMODTJUCiJSJPB_-yMErZrfWSpKBTBbA_yJMu1OSQNmjEC5qvdfKMbSuXZC3DSesmQeRkYHl4twVPh0Us/s1600/59.gif' style='border: 0; padding:0' title='byyeee'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:L) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvfnFbB6EkAEzc_UZ6K7f2zy-rC9gYEk5HixJu-tHH3nSTxMOo_dPoOk3_MweYyW9DqplIuvCYGdg0l4wPhw3zQOv1K9gydX-RHG7Wg-MHHY2cphFJI9VoAMEPEnxD44m94YY5N1nMXKWM/s1600/soldierbaby.gif' style='border: 0; padding:0' title='nhóc lính'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:M) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbv8P140vEb2SBNx0BujqMwIjd3BzqXhOpqZe71PhdQx_YM2pbfpKHc_BYhpFkJqQ8SKmOJgVOwpUxO5P6yRfygbbiZPev0XoM0Q7z_44Gizzs5ZFMkf5vdRLrVvMz0mvfwU1dqwpELNJM/s1600/alo.gif' style='border: 0; padding:0' title='Alo'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:N) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9mlFPszfiM13jGBFgswpfLpbcClMHFJuriYLjPSg2mTviDq8Nph8n0yJs5b5oWf1GgKRzDh-T-iEdR3-VMUMK76hiOZCjXpb35iQXX0_uzeFguFqkwQJUlY_4SEn5YHGBxCepY-c-ih3D/s1600/shutup.gif' style='border: 0; padding:0' title='Shup up'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:O) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHU7QUR9fjlLBYJ6wTFhB6Pw_IQ8cm4-IJruQLlZBOjKe5tT5oyKqoc_ef98rdsJhLcXcpfxiRXagxHKIA5d8pPWbKrWHUzOoMHtw3eow-2P8Pyfbb9RJsa2vp4aR4R4mY0l842Yljayfp/s1600/yeulam.gif' style='border: 0; padding:0' title='Yêu lắm đó'/></a>
<a href='javascript: void(0);' onClick='document.getElementById(&quot;comments_input&quot;).value += &quot;:P) &quot;;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBM3eqNPvdkf_5gSNEDqj4uw0z3hIP59td5EYkX3MrpFJwLhg3rW4VBbzp7hUbEFqbo5M5bQtYUAgPSLRbg0OC9_S-qUYky8mczMJfFjaYZa8W_h6nDqd_evaiIuNMASMcWtPKQpQQX_t1/s1600/datbomb.gif' style='border: 0; padding:0' title='Đặt bom'/></a>
</span>
<span id='smiley-toggle'><a href='javascript:moreSmilies()'>
More &#8594;</a></span>

<div class='text_style_wrap'>
<a href='javascript: void(0);' onClick='comments_B()'><span class='text_style'><b>Chữ đậm</b></span></a>
<a href='javascript: void(0);' onClick='comments_I()'><span class='text_style'><i>Chữ nghiêng</i></span></a>
<a href='javascript: void(0);' onClick='comments_EM()'><span class='text_style'><em>Chữ nghiêng 2</em></span></a>
<a href='javascript: void(0);' id='comments_HTML' onClick='comments_HTML()'><span class='text_style'>Chèn Link</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://ha-escapexml.blogspot.com&quot;, &quot;followblog&quot;, &quot;height=540, width=450, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no&quot; ); }
</script>
<a href='javascript:openup_parseHTML()' rel='nofollow' title='Mã hóa code trước khi đưa vào bình luận'><span class='text_style'>Mã hóa code</span></a>
<a class='tooltip' href='javascript: void(0);'><b style='color:#F00'>Help ?</b><span class='help'>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.</span></a>
</div>
<form name='comments_form'>
<textarea cols='70' 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'>Chọn</span></a>
<a href='javascript: void(0);' onClick='document.comments_form.reset();'><span class='text_style'>Xóa</span></a>
</form>
</div>

Lưu Template. 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ước 1 và Bước 2. Những phần được đánh dấu màu đỏ là những phần bạn có thể tùy biến theo ý thích của mình.