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://www.thuthuatblogger.info" name="infoUrl" type="hidden">
<input value="http://www.thuthuatblogger.info/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

More about →

Tạo nút Back to Top siêu đơn giản

Để tạo nút Back to Top ở cuối blogspot, thông thường các blogger sử dụng đến javascript hoặc jQuery. Tuy nhiên nếu dùng script thì ít nhiều cũng ảnh hưởng đến tốc độ tải trang cho blogspot. Tôi xin giới thiệu một cách rất đơn giản mà không hề sử dụng đến script.

Đăng nhập Blogger, vào Design >> Edit HTML. Tìm đến đoạn code nói đến phần bản quyền blog, thường nằm sau thẻ <div id='footer-wrapper'>. Bạn chỉ cần đặt đoạn code dưới đây vào sau thẻ nói trên.

<p style='float:right;'><a href='#top' title="Back to top">&#8657;</a></p>

Lưu Template là OK. Nếu trong Template của bạn có id header (thử tìm xem trong Template có dòng #header hay không) thì có thể thay #top bằng #header.

More about →

Tạo liên kết Đặt làm trang chủ cho Blogger

Liên kết “Đặt làm trang chủ” (Set as Homepage) giúp cho người đọc lưu trang web của bạn làm trang chủ mỗi khi công cụ trình duyệt được mở. Nó giúp làm tăng lượng truy cập cho trang web của bạn.

Đặt làm trang chủ

Bài viết ngắn này giúp bạn thực hiện được ý định đơn giản này nhưng không kém phần hữu ích.

Trước tiên đặt đoạn code dưới đây vào trước thẻ </head>.

<script type='text/javascript'>
function setAsHomePage(i)
{
if (document.all) {
i.style.behavior='url(#default#homepage)';
i.setHomePage('http://huynh-nhat-ha.blogspot.com');
}
}
</script>

Bạn cần thay dòng được đánh dấu màu đỏ bằng địa chỉ website/webblog của bạn.

Tiếp theo là thiết lập cấu trúc HTML cho liên kết “Đặt làm trang chủ” như sau:

<a onclick="javascript:setAsHomePage(this)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvsjnELe3jsC0oR88NPaC4zKYHgvLaTaZSFgg3Imk2T-skVdwWvgK-5N82czo9610dwsx88W73CqP74yr5VDQQ4A2FOhthVDMbb2Da5dpm-DAfC_iZt557otzLpsGU5aK4zj4yr5SPcfY/s1600/home.gif" style="vertical-align:middle;" alt="Đặt làm trang chủ" /> Đặt làm trang chủ</a>

Đặt đoạn code nêu trên tại vị trí bạn muốn tạo liên kết “Đặt làm trang chủ (nằm giữa 2 thẻ <body>, </body>).

More about →

Tạo nút Add a Favorite cho Blogger và website

Cho người đọc một cách để thêm website/webblog của bạn lên danh mục web ưa thích trên công cụ trình duyệt là một cách tốt để tăng thêm lượng truy cập cho trang web của bạn. Tuy nhiên, để giành được lượng truy cập thường xuyên thì bạn cần phải liên tục cập nhật nội dung và cho độc giả một lý do để muốn quay lại trang web của bạn trong tương lai.

Cách tốt nhất là bạn nên đặt một nút Add a Favorite trên trang web của bạn để khi nó được kích chuột thì sẽ tự động thêm địa chỉ trang web của bạn vào danh mục trang web ưa thích trên công cụ trình duyệt mà người đọc sử dụng.

Nhấp chuột vào liên kết Add a Favorite bên dưới để xem Demo.

Add a Favorite

Để đặt nút Add a Favorite cho website/webblog của bạn, trước tiên hãy đặt đoạn code sau đây vào trước thẻ </head>.

<script type="text/javascript">
function add2Favorites() {
if (window.sidebar&&window.sidebar.addPanel)
window.sidebar.addPanel("Huynh Nhat Ha on Blogger","http://huynh-nhat-ha.blogspot.com/","");
else
window.external.AddFavorite("http://huynh-nhat-ha.blogspot.com/","Huynh Nhat Ha on Blogger")
}
</script>

Thay phần được đánh dấu màu đỏ bằng địa chỉ website/webblog của bạn và thay phần được đánh dấu màu xanh bằng tiêu đề trang web của bạn.

Tiếp theo, đặt đoạn code sau đây vào vị trí trang web bạn muốn đặt nút Add a Favorite.

<a href="javascript:add2Favorites();" title="Add a Favorite">Add a Favorite</a>

More about →

Tạo nút Tăng/Giảm cỡ chữ trong bài viết Blogger

Nút Tăng/Giảm cỡ chữ cũng rất cần thiết cho blog của bạn. Nó giúp người đọc chọn lựa cỡ chữ phù hợp với thị lực của họ. Thông thường trong một blogspot, việc tăng hay giảm cỡ chữ chỉ được được thiết lập cho phần nội dung bài viết (post body). Javascript sẽ giúp bạn thực hiện điều này một cách dễ dàng.

Bước 1: Trước tiên đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates, đặt đoạn code Javascript dưới đây vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
function fontIncrease(){
var obj = document.getElementById("text_Font");
if (obj.style.fontSize==""){obj.style.fontSize="12px"};
if (obj.style.fontSize=="10px"){obj.style.fontSize = "12px";}
else if (obj.style.fontSize=="12px"){obj.style.fontSize = "15px";}
else if (obj.style.fontSize=="15px"){obj.style.fontSize = "17px";}
else if (obj.style.fontSize=="17px"){obj.style.fontSize = "19px";}
else if (obj.style.fontSize=="19px"){obj.style.fontSize = "21px";}
}
function fontDecrease(){
var obj = document.getElementById("text_Font");
if (obj.style.fontSize==""){obj.style.fontSize="12px"};
if (obj.style.fontSize=="21px"){obj.style.fontSize = "19px";}
else if (obj.style.fontSize=="19px"){obj.style.fontSize = "17px";}
else if (obj.style.fontSize=="17px"){obj.style.fontSize = "15px";}
else if (obj.style.fontSize=="15px"){obj.style.fontSize = "12px";}
else if (obj.style.fontSize=="12px"){obj.style.fontSize = "10px";}
}
//]]>
</script>

Bước 2: Tìm các dòng

<div class='post-header'>
<div class='post-header-line-1'/>
</div>

rồi đặt sau đó với đoạn code bên dưới.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a alt='Tăng cỡ chữ' title='Tăng cỡ chữ' href='javascript:fontIncrease()'>A+</a> |
<a alt='Giảm cỡ chữ' title='Giảm cỡ chữ' href='javascript:fontDecrease()'>A-</a>
</b:if>

Bước 3: Đặt dòng <div id='text_Font'> vào sau dòng <div class='post-body'> (ở một số Template là <div class='entry'>).

Tiếp tục đặt thẻ đóng </div> vào trước dòng <div class='post-footer'>. Lưu Template là OK.

More about →

Tạo nút Theo dõi Blog tự chế

Blogger vốn dĩ đã có tiện ích Người theo dõi (Followers) giúp người đọc dễ dàng theo dõi blogspot của bạn đồng thời tiện ích này cũng góp phần kết nối các blogger lại với nhau. :14)

Nếu bạn không muốn gắn tiện ích Người theo dõi mặc định của Blogger thì bạn có thể tạo một nút Theo dõi Blog (Follow this Blog) riêng biệt. Chỉ cần đặt đoạn code sau đây vào vị trí cần đặt nút Theo dõi Blog trong Template.

<a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXX" rel="nofollow" title="Theo dõi Blog này" target="_blank">Theo dõi Blog</a>

Thay XXXXXXXXX bằng số ID blog của bạn. Chuỗi số này nằm trên thanh địa chỉ của công cụ trình duyệt khi bạn đăng nhập Blogger ở chế độ chỉnh sửa Template hoặc đăng bài viết. Bạn có thể thay dòng Theo dõi Blog bằng một liên kết hình ảnh.

Nếu bạn muốn liên kết Theo dõi Blog được mở ở dạng cửa số popup thì bạn sử dụng đoạn code sau đây.

<script type="text/javascript">function openupFollow() { window.open("http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXX", "followblog", "height=600, width=600, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no" ); }</script>
<a href="javascript:openupFollow()" rel="nofollow" title="Theo dõi Blog này">Theo dõi Blog</a>

More about →

Tạo nút trượt lên đầu và cuối trang web bằng jQuery

Dưới đây là một cách tạo nút lên đầu hoặc cuối trang web bằng 1 cái nhấp chuột đơn giản. Thủ thuật này sử dụng các sự kiện cuộn đặc biệt qua thư viện jQuery từ James Padolsey. Có 2 nút cố định nằm ở đáy bên trái trang web, mỗi nút có chức năng di chuyển xuống hoặc lên trong trang web. Nếu bạn kéo thanh cuộn trang web thì 2 nút này mờ ẩn dần và cho hiệu ứng mềm mại đẹp mắt.

Xem demo.

Sau đây là các bước thực hiện thủ thuật.

1. Bước 1: Dán đoạn code CSS này vào trước thẻ </head> (áp dụng cho cả Blogger).

<style type="text/css">
.nav_up{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url(http://www.tympanus.net/scrollupdown/images/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:10px;
opacity:0.7;
left:30px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url(http://www.tympanus.net/scrollupdown/images/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:10px;
opacity:0.7;
left:70px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>

Bước 2: Dán toàn bộ đoạn code bên dưới vào trước thẻ </body> (áp dụng cho cả Blogger). Đối với Blogger có thể dán toàn bộ đoạn code vào một widget HTML/JavaScript nằm dưới phần footer.

<script src="http://www.tympanus.net/scrollupdown/jquery-1.3.2.js" type="text/javascript"></script>
<script src="http://www.tympanus.net/scrollupdown/scroll-startstop.events.jquery.js" type="text/javascript"></script>
<script>
$(function() {
var $elem = $('#content');

$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');

$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});

$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
}
);
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
}
);
});
</script>

Hy vọng với thủ thuật này, các bạn sẽ giúp ích nhiều cho trang web của bạn.

More about →

Thủ thuật tạo nút “Đặt làm trang chủ” trên website, webblog

Khi thiết trang web của bạn, việc tạo cho người lướt web môt cách để thiết lập trang web của bạn làm trang chủ mỗi khi khởi động công cụ trình duyệt web cũng là một cách để tăng cường lượng truy cập cho trang web của bạn.
Đoạn mã Javascript sau đây sẽ giúp bạn đặt một nút lên trang web khi bạn thiết kế, kết quả tạo ra là mỗi khi click chuột vào đó thì nó sẽ tự động thiết lập trang của bạn làm trang chủ cho công cụ trình duyệt.

<form>
<input type="button" value="make this site your home page" onclick="this.style.behavior='url(#default#homepage)'; this.sethomepage('page url beginning with http:// here');">
</form>

Thay đổi đoạn văn bản màu đỏ thành địa chỉ website của bạn bắt đầu bằng http://.

More about →

Tạo nút Trở về trang chủ cho website

Trong một trang web, nút Trở lại trang chủ hay Back Home cũng rất cần thiết để người lướt web có thể dễ dàng sử dụng. Có nhiều cách khác nhau để thực hiện điều này khi thiết kế web. Sau đây là một cách thực hiện bằng các cú pháp Javascript.

Bạn chỉ việc đặt đoạn mã này tại vị trí muốn hiển thị nút Back Home.

<script>
function gohome(){
if (document.layers)
window.home()
else if (document.all)
window.location="about:home"
else
alert("You need NS 4+ or IE 4+ to go back home!")
}
</script>

<form>
<input type="button" onClick="gohome()" value="Back Home!">
</form>

Nếu bạn muốn sử dụng nút dạng hình thay vì dạng form thì sử dụng đoạn mã dưới đây để thay cho đoạn mã màu đỏ.

<a href="javascript:gohome()"><img src="URL cua button hinh"></a>

Tham khảo theo DynamicDrive.

More about →