22-12-2012, 08:16 PM
Đây là thủ thuật giúp cho blog của các cụ sinh động hơn với các icon (emoticons, smilies). Lúc nào tui dùng blog cũng cho đưa vào. Kết quả nhìn nó như ri :
![[Hình: screenshot3pr.png]](http://imageshack.us/a/img29/760/screenshot3pr.png)
Để có cái chức năng đó, các cụ làm theo 4 bước sau :
1. Vào Blogger, chọn blog muốn chỉnh sửa, sau đó nhấp vào nhãn Layout bên menu trái :
![[Hình: layoutlo.png]](http://img694.imageshack.us/img694/5840/layoutlo.png)
2. Nhấn vào link "Add gadget" để thêm 1 gadget vào layout :
![[Hình: addgadget.png]](http://img843.imageshack.us/img843/4779/addgadget.png)
3. Trong danh sách gadget Gú gồ cung cấp, các cụ chọn cái HTML/Javascript :
![[Hình: selectgadget.png]](http://imageshack.us/a/img525/7858/selectgadget.png)
4. Bấy giờ Blogger sẽ yêu cầu chèn code vào, các cụ lấy cái code ở cuối bài viết chèn vào trong cái hộp to to như hình minh hoạ này :
![[Hình: putscript.png]](http://imageshack.us/a/img844/138/putscript.png)
Thế rồi nhấn Save lại là xong.
Từ đó trở đi, mỗi khi các cụ gõ các nhóm ký tự đặc biệt như![[Hình: signsl.png]](http://img197.imageshack.us/img197/4334/signsl.png)
thì nó sẽ chuyển thành những biểu tượng tương ứng như trong Yahoo! Messenger. Ngoài ra các cụ vẫn có thể chèn emoticons của TAL vào đó bằng lệnh setIcon nhưng phải tự định nghĩa trước. Cụ nào có nhu cầu thì tui sẽ post chi tiết, còn không thì thế cũng được rồi.
Dưới đây là code để chèn vào gadget như nói trong bước 4 :
Để có cái chức năng đó, các cụ làm theo 4 bước sau :
1. Vào Blogger, chọn blog muốn chỉnh sửa, sau đó nhấp vào nhãn Layout bên menu trái :
2. Nhấn vào link "Add gadget" để thêm 1 gadget vào layout :
3. Trong danh sách gadget Gú gồ cung cấp, các cụ chọn cái HTML/Javascript :
4. Bấy giờ Blogger sẽ yêu cầu chèn code vào, các cụ lấy cái code ở cuối bài viết chèn vào trong cái hộp to to như hình minh hoạ này :
Thế rồi nhấn Save lại là xong.
Từ đó trở đi, mỗi khi các cụ gõ các nhóm ký tự đặc biệt như
thì nó sẽ chuyển thành những biểu tượng tương ứng như trong Yahoo! Messenger. Ngoài ra các cụ vẫn có thể chèn emoticons của TAL vào đó bằng lệnh setIcon nhưng phải tự định nghĩa trước. Cụ nào có nhu cầu thì tui sẽ post chi tiết, còn không thì thế cũng được rồi.Dưới đây là code để chèn vào gadget như nói trong bước 4 :
Mã PHP:
<script type="text/javascript">
;(function(){for(var m=[["confused",":-/","7"],["waiting",":-w","45"],["thinking",":-?","39"],["hee hee",";))","71"],["broken heart","=((","12"],["surprise",":-O","13"],["shame on you","[-X","68"],["cool","B-)","16"],["crying",":((","20"],["laughing",":))","21"],["kiss",":-*","11"],["don\\'t tell anyone",":-$","32"],["yawn","(:|","37"],["nerd",":-B","26"],["chatterbox",":-@","76"],["applause","=D>","41"],["blushing",':">',"9"],["money eyes","$-)","64"],["oh go on",":-j","78"],["I don\\'t know",":-??",
"106"],["thumbs down",":-q","112"],["bring it on",">:/","70"],["hurry up!",":!!","110"],["thumbs up",":-bd","113"],["coffee","~O)","57"],["batting eyelashes",";;)","5"],["d\\'oh","#-o","40"],["on the phone",":)]","100"],["call me",":-c","101"],["big hug",">:D<","6"],["good luck","%%-","54"],["rose","@};-","53"],["daydreaming","8->","105"],["praying","[-O<","63"],["skull","8-X","59"],["bee",":bz","115"],["bug","=:)","60"],["pig",":@)","49"],["idea","*-:)","58"],["angel","O:)","25"],["sick",":-&","31"],
["monkey",":(|)","51"],["chicken","~:>","52"],["puppy dog eyes",":o3","108"],["cow","3:-O","50"],["whistling",':-"',"65"],["star","(*)","79"],["tongue",":P","10"],["worried",":-S","17"],["happy",":)","1"],["sad",":(","2"],["big grin",":D","4"],["love struck",":x","8"],["straight face",":|","22"],["angry","X(","14"],["winking",";)","3"]],q=function(e,j,g){return(document.getElementsByClassName?function(b,d,c){c=c||document;b=c.getElementsByClassName(b);d=d?RegExp("\\b"+d+"\\b","i"):null;c=[];for(var f,
a=0,h=b.length;a<h;a+=1)f=b[a],(!d||d.test(f.nodeName))&&c.push(f);return c}:document.evaluate?function(b,d,c){d=d||"*";c=c||document;var f=b.split(" "),a="",h="http://www.w3.org/1999/xhtml"===document.documentElement.namespaceURI?"http://www.w3.org/1999/xhtml":null;b=[];for(var n,k=0,e=f.length;k<e;k+=1)a+="[contains(concat(' ', @class, ' '), ' "+f[k]+" ')]";try{n=document.evaluate(".//"+d+a,c,h,0,null)}catch(g){n=document.evaluate(".//"+d+a,c,null,0,null)}for(;d=n.iterateNext();)b.push(d);return b}:
function(b,d,c){d=d||"*";c=c||document;var f=b.split(" ");b=[];d="*"===d&&c.all?c.all:c.getElementsByTagName(d);c=[];var a;a=0;for(var h=f.length;a<h;a+=1)b.push(RegExp("(^|\\s)"+f[a]+"(\\s|$)"));for(var h=0,e=d.length;h<e;h+=1){f=d[h];a=!1;for(var k=0,g=b.length;k<g&&!(a=b[k].test(f.className),!a);k+=1);a&&c.push(f)}return c})(e,j,g)},r=["entry-content","comment-content","owner-Body","comment-body"],p=window.talEmoti={emos:[],setIcon:function(e,j,g){this.emos.push({sign:e||"",path:j||"",title:g||
""})},run:function(e){e=e instanceof Array?e:[];e=e.concat(r);for(var j=[],g=0;g<e.length;g++)var b=q(e[g]),j=j.concat(b);if(0<j.length)for(var d=p.emos,c=function(a){for(var c=0;c<d.length;c++){var b=d[c],e='<img style="position:relative;top:0px;left:0px;margin:0px;padding:0px;border:none;background:none !important;background-color:transparent !important;display:inline-block;min-width:16px;min-height:16px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;" src="'+b.path+'" title="'+b.title+
'">';a=a.split(b.sign).join(e);var f=b.sign.toLowerCase(),g=e;a=a.split(f).join(g);b=b.sign.toUpperCase();a=a.split(b).join(e)}return a},f=function(a){if(0<a.childNodes.length)for(var b=0;b<a.childNodes.length;b++)f(a.childNodes[b]);else 3==a.nodeType&&(a.nodeValue=c(a.nodeValue),b=document.createElement("SPAN"),b.innerHTML=c(a.nodeValue),a.parentNode.replaceChild(b,a))},g=0;g<j.length;g++)f(j[g])}},l=0;l<m.length;l++)p.setIcon(m[l][1],"http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/"+m[l][2]+
".gif",m[l][0])})();
</script>
<script type="text/javascript">
// define more emoticons by using setIcon method :
// talEmoti.setIcon('SIGNAL', 'URL_TO_EMOTICON', ‘TITLE’);
window.onload = talEmoti.run;
</script>
