Mã để tạo nút Add to Blogger

Blogger cho phép bạn có thể thiết kế những tiện ích mới để người khác có thể thêm vào blogspot của họ. Trước tiên bạn cần tạo code cho tiện ích, sở hữu một website hoặc webblog rồi tạo một form để gửi kết quả tiện ích lên Blogger. Trong form này bạn gắn toàn bộ nội dung tiện ích mà bạn tạo ra. Khi người dùng click vào nút thì sẽ được dẫn đến Blogger nơi có thể gắn tiện ích vào blog của họ. Bạn có thể xem Demo bằng cách lick vào nút bên dưới để cài đặt tiện ích Recent Post with Thumbnail.

<script type="text/javascript"> imgr = new Array(); imgr[0] = "http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png"; showRandomImg = true; tablewidth = 300; cellspacing = 7; borderColor = ""; bgTD = ""; imgwidth = 50; imgheight = 50; fntsize = 14; acolor = ""; cmsize = 2; aBold = true; icon = " "; text = "nhận xét"; showPostDate = false; summaryPost = 0; summaryFontsize = 11; summaryColor = "#666"; icon2 = " "; </script> <script type="text/javascript"> //<![CDATA[ eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('16 17(18,19){e s=18.w("<");x(e i=0;i<s.h;i++){g(s[i].z(">")!=-1){s[i]=s[i].Q(s[i].z(">")+1,s[i].h)}}s=s.1s("");s=s.Q(0,19-1);1t s}16 1u(R){S.T(\'<1a A="\'+1v+\'" 1b=0 1w="#1x" 1c="\'+1c+\'" 1y="\'+1d+\'" 1z="1A">\');j=(1B)?1e.1C((U.h+1)*1e.1D()):0;l=1E 1F();x(e i=0;i<1G;i++){e f=R.1f.f[i];e r=f.1g.$t;e V;e u;g(i==R.1f.f.h)F;x(e k=0;k<f.o.h;k++){g(f.o[k].1h==\'1H\'){u=f.o[k].B;F}}x(e k=0;k<f.o.h;k++){g(f.o[k].1h==\'1I\'&&f.o[k].1J==\'W/1K\'){V=f.o[k].1g.w(" ")[0];F}}g("1i"1j f){e C=f.1i.$t}1k g("1l"1j f){e C=f.1l.$t}1k e C="";G=f.1L.$t;g(j>U.h-1)j=0;l[i]=U[j];s=C;a=s.z("<l");b=s.z("X=\\"",a);c=s.z("\\"",b+5);d=s.1M(b+5,c-b-5);g((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))l[i]=d;Y=(W!=\'1N\')?\'<i><p H="\'+1O+\'" D="\'+I+\'">(\'+V+\' \'+W+\')</p></i>\':\'\';e Z=[1,2,3,4,5,6,7,8,9,10,11,12];e 1m=["1P","1Q","1R","1S","1T","1U","1V","1W","1X","1Y","1Z","20"];e 1n=G.w("-")[2].Q(0,2);e m=G.w("-")[1];e y=G.w("-")[0];x(e E=0;E<Z.h;E++){g(21(m)==Z[E]){m=1m[E];F}}e 13=(22)?\'<i><p D="\'+I+\'"> - (\'+1n+\' \'+m+\' \'+y+\')</p></i>\':"";r=(23)?"<b>"+r+"</b>":r;e 14=\'<J><n K="v" A="\'+L+\'" M="\'+N+\'" q="O:\'+P+\'"><a B="\'+u+\'"><l X="\'+l[i]+\'" A="\'+L+\'" M="\'+N+\'"/></a></n><n q="O:\'+P+\'" K="v">\'+1o+\'<a B="\'+u+\'" q="D:\'+I+\'; p-H:\'+1p+\'15;">\'+r+\'</a><24 /> \'+Y+\' \'+13+\'<1q q="D:\'+25+\'; 26-v:27; 1b-v:28 \'+1d+\' 29; p-H:\'+2a+\'15;">\'+2b+17(C,1r)+\'...</1q></n></J>\';g(1r==0){14=\'<J><n K="v" A="\'+L+\'" M="\'+N+\'" q="O:\'+P+\'"><a B="\'+u+\'"><l X="\'+l[i]+\'" A="\'+L+\'" M="\'+N+\'"/></a></n><n q="O:\'+P+\'" K="v">\'+1o+\'<a B="\'+u+\'" q="D:\'+I+\'; p-H:\'+1p+\'15;">\'+r+\'</a> \'+Y+\' \'+13+\'</n></J>\'}S.T(14);j++}S.T(\'</1a>\')}',62,136,'||||||||||||||var|entry|if|length||||img||td|link|font|style|posttitle|||posturl|top|split|for||indexOf|width|href|postcontent|color|u2|break|postdate|size|acolor|tr|valign|imgwidth|height|imgheight|background|bgTD|substring|json|document|write|imgr|pcm|text|src|cmtext|month||||daystr|trtd|px|function|removeHtmlTag|strx|chop|table|border|cellspacing|borderColor|Math|feed|title|rel|content|in|else|summary|month2|day|icon|fntsize|div|summaryPost|join|return|showrecentposts|tablewidth|bordercolor|FF0000|bgcolor|align|center|showRandomImg|floor|random|new|Array|numposts|alternate|replies|type|html|published|substr|no|cmsize|Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec|parseInt|showPostDate|aBold|br|summaryColor|margin|2px|1px|solid|summaryFontsize|icon2'.split('|'),0,{})) //]]> </script><script type="text/javascript" src="/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Sau đây là định dạng chung để tạo một nút như vậy:

<form action="http://beta.blogger.com/add-widget" method="post">
<input value="Tên tiện ích" name="widget.title" type="hidden">
<input value="http://namkna.blogspot.com" name="infoUrl" type="hidden">
<input value="http://namkna.blogspot.com/favicon.ico" name="logoUrl" type="hidden">
<textarea style="display: none;" name="widget.content">
ĐOẠN CODE CỦA TIỆN ÍCH ĐẶT Ở ĐÂY
</textarea>
<input type="hidden" name="widget.template" value="&lt;data:content/&gt;" />
<input id='button' name='button' type="image" src='http://www.blogger.com/img/add/add2blogger_sm_b.gif' value=''/>
</form>

Ở đây chúng ta sử dụng trường input là hidden để người dùng không thể thay đổi thông tin về tiện ích. Trong form này có những phần quan trọng được giải thích như sau:

• form action="http://www.blogger.com/add-widget" - (bắt buộc): Form của tiện ích cần truyền thông tin đến URL này để được Blogger xử lý. Khuyến nghị dùng phương thức truyền là POST nhưng phương thức GET cũng hoạt động được nếu không có quá nhiều dữ liệu trong tiện ích.
• widget.title - (không bắt buộc): Đây là tiêu đề tiện ích hiển thị trong tab Page Elements của người dùng khi chỉnh sửa Template. Tiêu đề có thể dài đến 100 ký tự và có thể chứa cấu trúc HTML.
• infoURL - (không bắt buộc): Sử dụng cái này để xác định một trang mô tả hoặc hướng dẫn về tiện ích. Nó giúp tạo link Learn more trên trang cài đặt tiện ích.
• logoURL - (không bắt buộc): Có thể thêm URL cho hình ảnh ở đây và hình ảnh sẽ được hiển thị kế bên link Learn more. Ảnh này sẽ được thu nhỏ lại dưới 100x100 pixel.

• widget.content - (bắt buộc): Đây là nội dung thực của tiện ích, sẽ được hiển thị trên blogspot của người dùng. Nó có thể chứa các đoạn mã, ngoại trừ các thẻ <html>, <body>. Các đoạn mã này giữ nguyên thể, không mã hóa.
• widget.template - (không bắt buộc): Cái này nhằm chỉ định Template chọn để gắn tiện ích. Nếu không xác định Template thì sử dụng mặc định là <data:title/> hoặc <data:content/>.

Dưới đây là lựa chọn hình ảnh cho nút Add to Blogger:



http://www.blogger.com/img/add/add2blogger_sm_w.gif



http://www.blogger.com/img/add/add2blogger_lg.gif



http://www.blogger.com/img/add/add2blogger_sm_b.gif