Pages

Chủ Nhật, 1 tháng 4, 2012

Phân trang cho blogspot

Kiểu phân trang giống trang tìm kiếm Google sẽ là một trong những kiểu phân trang mới trong vô vàn kiểu phân trang khác nhau cho blogspot.



Mỗi kiểu đều có nét đẹp và ưu điểm riêng cho nên bạn cần lựa chọn kiểu nào phù hợp nhất để cài đặt cho blog của mình.

Script cho các kiểu phân trang dường như có những điểm na ná giống và cách cài đặt cũng vậy. Ở đây mình xin giới thiệu một kiểu phân trang theo phong cách Google.
Tránh trường hợp các file JS bị die do hết bandwitch mình sẽ chèn thẳng vào nên code có vẻ dài.
Để cài đặt kiểu phân trang này, bạn hãy thực hiện như sau.
Bước 1.
Đăng nhập tài khoản Blogger >> thiết kế (Design) >> Chọn chỉnh sửa HTML (Edit HTML)
Đặt đoạn code dưới đây vào trước dòng ]]></b:skin>.
#nav a,#nav a:visited,.blk a{color:#000}
#nav a{display:block}
#nav .b a,#nav .b a:visited{color:#20c}
#nav .i{color:#a90a08;font-weight:bold}
.csb,.ss{background:url(http://lh5.googleusercontent.com/-avTxlwCp9Ow/TmBl_H9Im_I/AAAAAAAACNo/8AaL9j2IzBg/Vatinam.png) no-repeat 0 0;height:26px;display:block}
.ss{background-position:0 -88px;position:absolute;left:0;top:0}
.cps{height:18px;overflow:hidden;width:114px}
.mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px}
#nav td{padding:0;text-align:center}
Bước 2.
Đặt đoạn code bên dưới vào trước thẻ </body>.
<script type='text/javascript'>
var home_page_url = location.href;
var pageCount=10;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';
function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
htmlMap[htmlMap.length]='/';
postNum++;
for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&amp;max-results='+pageCount;
}
var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};
for(var p =0;p&lt; banyaknomer;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
upPageHtml = '&lt;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}else{
upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}
fFlag++;
}
if(p==(thisNum-1)){
if(p==0){
html += '&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width: 18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
}else{
html += '&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
}
}else{
if(p==0){
html += '&lt;td&gt;&lt;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';
}else{
html += '&lt;td&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+ (p+1) +'&lt;/a&gt;&lt;/td&gt;';
}
}
if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -76px 0pt; margin-right: 34px; width: 66px;&quot;&gt;&lt;/span&gt;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';
eFlag++;
}
}
}
if(thisNum&gt;1){
html = ''+upPageHtml+' '+html +' ';
}
html2 = '&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;&quot; align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td class=&quot;b&quot;&gt;Page ('+(postNum-1)+') &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';
html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';
html = html2+html;
if(thisNum&lt;(postNum-1)){
html += downPageHtml;
}else{
html += '&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';
}
if(postNum==1) postNum++;
html += html3+ '&lt;/div&gt;';
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);
if(postNum &lt;= 2){
html ='';
}
for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&amp;&amp;pageArea.length&gt;0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
function showpageCount2(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var labelHtml = '&lt;a href=&quot;/search/label/'+thisLable+'?&amp;max-results='+pageCount+'&quot;&gt;';
var thisUrl = home_page_url;
htmlMap[htmlMap.length]=labelHtml;
postNum++;
for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&amp;max-results='+pageCount;
itemCount++;
}
var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};
for(var p =0;p&lt; banyaknomer;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
upPageHtml = labelHtml +'&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}else{
upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}
fFlag++;
}
if(p==(thisNum-1)){
if(p==0){
html += '&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width: 18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
}else{
html += '&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
}
}else{
if(p==0){
html = '&lt;td&gt;'+labelHtml+'&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';
}else{
html += '&lt;td&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+ (p+1) +'&lt;/a&gt;&lt;/td&gt;';
}
}
if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -76px 0pt; margin-right: 34px; width: 66px;&quot;&gt;&lt;/span&gt;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';
eFlag++;
}
}
}
if(thisNum&gt;1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html2 = '&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;&quot; align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td class=&quot;b&quot;&gt;Page ('+(postNum-1)+') &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';
html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';
html = html2+html;
if(thisNum&lt;(postNum-1)){
html += downPageHtml;
}else{
html += '&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';
}
if(postNum==1) postNum++;
html += html3+ '&lt;/div&gt;';
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);
if(postNum &lt;= 2){
html ='';
}
for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&amp;&amp;pageArea.length&gt;0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
</script>
<script type='text/javascript'>
var thisUrl = home_page_url;
if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){
if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;max&quot;));
}
}
var home_page = &quot;/&quot;;
if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;.html&quot;)==-1){
if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){
document.write('&lt;script src=&quot;'+home_page+'feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
}else{document.write('&lt;script src=&quot;'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
}
}
</script>

Bạn có thể điều chỉnh số bài viết hiển thị ở mỗi trang tại tham sốpageCount=10.
Bước 3.
Tìm bất kỳ dòng nào như thế này 'data:label.url'.
Rồi thay thế nó bằng dòng 'data:label.url + "?&max-results=10"'.
Cuối cùng lưu (Save Templates) lại là ok.

Tiện ích Recent Posts có hình tốc độ cao cho Blogspot

Tiện ích Recent Posts với hình ảnh thu nhỏ - đây là tiện ích mà mình không dùng vì muốn xem bài viết mới mình thường có thói quen quay về trang chủ. Tiện ích được viết ra chỉ cho đủ bộ tiện ích về Bài đăng bởi cũng không tìm được thêm tính năng nào được coi là mới.

Có chăng là tính năng nhận biết bài viết nào đã tắt Nhận xét, hình ảnh hỗ trợ cho cả video trên Youtube và gần đây mình thấy ảnh ở Photobucket cũng được lưu trữ, số lượng bài viết được tải về từ feed lấy đủ cho số bài viết bạn muốn hiển thị để tránh dư thừa.

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
#recent-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}


Nếu đã áp dụng tiện ích Bài viết ngẫu nhiên tốc độ cao cho Blogger thì bạn bỏ qua bước này và thay #random-posts img{ thành #random-posts img,#recent-posts img{ cho đồng bộ khi muốn chỉnh sửa.


Bước 2: Thêm 1 widget HTML/Javascript tại nơi muốn hiển thị Recent Posts.


Hiệu chỉnhTiêu đề và dán đoạn mã dưới đây vào phần Nội dung rồi chọn LƯU.



<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;
var rcp_info='yes';
var rcp_comment='Nhận xét';
var rcp_disable='Tắt Nhận xét';
function recent_posts(json){var dw='';dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNozwE4NPzorzXVFerYq-LyVYHLmZDOs-5nW0AmOTV3MtiPKOtRI3a00QhcMjphDcnY0COk1Lf67k5_l3UgPF2ENWHmkM9En6wE4Q7_x9qtMNDWg3IGhO3N2r0znyNDbe9kOiaS9fgjkir/"}}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>


Thay 5 bằng số bài viết bạn muốn hiển thị. Nếu không muốn hiển thị thông tin ngày tháng đăng bài và số nhận xét hãy thay yes thành ký tự bất kỳ khác.

Tiện ích random posts có hình ảnh load nhanh cho Blog

Một trong những tiện ích mình kiêng kỵ nhất là Random Posts, bởi tiện ích này tải toàn bộ dữ liệu từ feed về, không những làm chậm tốc độ cho blog mà còn không chính xác với blog có trên 500 bài viết - đây là con số bài viết tối đa được feed tải về.


Trong tiện ích mình giới thiệu sau đây thay vì 1 lần tải toàn bộ feed thì mình tải lần lượt theo số bài viết muốn hiển thị và chỉ lấy duy nhất 1 bài trong 1 lần tải. Trước đó sẽ có 1 lần tải dữ liệu đầu tiên từ feed để xác định tổng số bài viết hiện có, 1 hàm lấy ngẫu nhiên 5 số khác nhau từ 1 đến tổng số bài viết.
Ví dụ muốn hiển thị 5 bài viết ngẫu nhiên thì sẽ có 6 lần tải feed, mặc dù số lần lấy nhiều nhưng dung lượng 1 lần lấy lại nhỏ. Khối lượng chỉ tương đương với blog bạn có tổng số bài viết là 6, so sánh vậy để thấy nếu blog càng nhiều bài viết thì tiện ích này có tốc độ nhanh hơn kiểu tải toàn bộ feed rất nhiều lần. 

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}



Bước 2: Thêm 1 widget HTML/Javascript tại nơi muốn hiển thị Random Posts. Hiệu chỉnhTiêu đề và dán đoạn mã dưới đây vào phần Nội dung rồi chọn LƯU


<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_info='yes';
var rdp_comment='Nhận xét';
var rdp_disable='Tắt Nhận xét';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNozwE4NPzorzXVFerYq-LyVYHLmZDOs-5nW0AmOTV3MtiPKOtRI3a00QhcMjphDcnY0COk1Lf67k5_l3UgPF2ENWHmkM9En6wE4Q7_x9qtMNDWg3IGhO3N2r0znyNDbe9kOiaS9fgjkir/"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>


Thay 5 bằng số bài viết bạn muốn hiển thị. Nếu không muốn hiển thị thông tin ngày tháng đăng bài và số nhận xét hãy thay yes thành ký tự bất kỳ khác.

Tiện ích Popular Posts pro không dùng JS

Thêm 1 style mới cho tiện ích bài đăng phổ biến, ưu điểm của style này là giúp tiết kiệm không gian, và không sử dụng javascript mà dùng các lệnh CSS3 để làm đẹp nên rất nhẹ.

Đầu tiên bạn chèn đoạn CSS sau phía trên ]]></b:skin> trong template:
#PopularPosts1{max-width:300px}
#PopularPosts1 dd{float:left;border-bottom:none;margin:8px 8px 0 8px;background:none;display:block;padding:0}
#PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
Tiếp theo, bạn tạo một tiện ích bài đăng phổ biến (nếu trong blog đã có tiện ích Popular Posts thì bỏ qua bước này), rồi chỉnh như sau:

Cuối cùng, bạn vào phần chỉnh sửa HTML, không click mở rộng tiện ích, tìm đoạn sau:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
Thay thế nó bằng đoạn sau:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<dd>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<b:if cond='data:post.thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='60px' width='60px'/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' height='60px' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png' width='60px'/></a>
</b:if>
</b:if>
</b:if>
</dd>
</b:loop>
</ul>
<div class='clear'/>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Lưu lại mẫu và kiểm tra kết quả.

Top 10 công cụ SEO free giúp tăng thứ hạng Blogspot

Bài viết giới thiệu với bạn đọc những trợ thủ đắc lực cho “chủ web” trong việc phân tích và đánh giá website, và có thể giúp cải thiện thứ hạng website. free_seo_tools
Theo các kết quả khảo sát, trên 60% truy xuất website thông qua các dịch vụ tìm kiếm (search engine) và trên 90% người dùng web chỉ xem trang kết quả tìm kiếm đầu tiên. Nếu website của bạn xuất hiện ở đầu danh sách kết quả thì sẽ có nhiều cơ hội được người dùng truy cập hơn. Điều này cho thấy tầm quan trọng của việc tối ưu website để các dịch vụ tìm kiếm dễ tìm thấy – được biết đến với thuật ngữ SEO (Search Engine Optimization). Nếu thực hiện đúng, SEO có thể giúp tăng cả số lượng người dùng và lượng truy cập website.
SEO là công việc cần nhiều công sức và thời gian. Mặc dù trên thị trường có những công cụ cao cấp và cao giá, nhưng cũng có những công cụ miễn phí có thể giúp bạn (những người chủ web – webmaster) tiết kiệm nhiều công sức.
1. Google Webmaster Tools google.com/webmasters
Kiến thức - 10 công cụ SEO miễn phí
Google chuyên “cho không” những thứ đáng giá, Google Webmaster Tools là một trong số đó. Đây là dịch vụ trực tuyến (yêu cầu tài khoản) cung cấp những báo cáo chi tiết về “khả năng hiển thị” website của bạn trên Google, như tình trạng lập chỉ mục, những liên kết lỗi, các truy vấn dẫn đến site và nhiều tính năng giúp webmaster cải thiện khả năng tìm kiếm cho website như thiết lập robots.txt, sitemap (sơ đồ website)….
Thậm chí nó còn kiểm tra malware và tốc độ truy xuất website của bạn (nếu muốn kiểm tra và so sánh tốc độ của các website đối thủ, bạn có thể dùng một dịch vụ trực tuyến miễn phí khác: http://www.seomastering.com/site-speed-checker.php).
2. Google Analytics google.com/analytics
Kiến thức - 10 công cụ SEO miễn phí
Thêm một công cụ khác của Google mà hầu như webmaster nào hiện nay cũng đều biết: Google Analytics (GA). GA là công cụ giám sát và phân tích website. GA yêu cầu hơi cao: nhúng một đoạn script vào các trang web của bạn – việc này chỉ có chủ web mới thực hiện được. Kết quả xứng đáng, GA cho những số liệu thống kê truy cập website, giúp bạn phân tích nhiều khía cạnh quan trọng về nội dung website và người dùng để có những chiến lược thích hợp.
Hai công cụ miễn phí của Google giúp bạn biết Goolge “nhìn” website của bạn như thế nào cũng như cách tiếp cận dịch vụ tìm kiếm số 1 này.
3. Yahoo! Site Explorer siteexplorer.search.yahoo.com
Kiến thức - 10 công cụ SEO miễn phí
Việc tạo liên kết góp phần quan trọng cho việc cải thiện thứ hạng website. Hiện có một số công cụ phân tích liên kết như Link Diagnosis, BackLink Watch và Link Assistant. Nhưng có thể nói không công cụ nào làm tốt bằng Site Explorer của Yahoo!, nó không chỉ tìm ra các liên kết trỏ đến website của bạn mà còn sắp thứ tự theo mức độ quan trọng.
Ngoài phân tích liên kết, Site Explorer còn có tính năng giúp bạn làm SEO cho Yahoo! tương tự Webmaster Tools của Google (Bing cũng có công cụ tương tự).
Yahoo! Site Explorer mới có đối thủ cạnh tranh: công cụ Open Site Explorer (http://www.opensiteexplorer.org) vừa được SEOmoz tung ra hồi cuối tháng 1.
4. Microsoft IIS SEO Toolkit www.iis.net/expand/SEOToolkit
Kiến thức - 10 công cụ SEO miễn phí
Đây là đồ nghề SEO hàng “khủng” của đại gia phần mềm Microsoft. Công cụ này hiện chỉ có thể cài đặt trên máy chủ web IIS 7, nhưng bạn có thể dùng nó phân tích từ xa website bất kỳ (không cần web server chạy trên IIS 7, có thể làm việc với cả web server Apache chạy trên Linux).
IIS SEO Toolkit gồm các thành phần Site Analysis, Robots Exclusion và Sitemaps and Site Indexes, cho phép bạn phân tích website chi tiết và đưa ra những đề nghị cùng công cụ chỉnh sửa robot và sitemap nhằm làm cho nội dung website “thân thiện” với các dịch vụ tìm kiếm.
5. AuditMyPC Sitemap Generator www.auditmypc.com/xml-sitemap.asp
Kiến thức - 10 công cụ SEO miễn phí
Để “leo” lên đầu danh sách kết quả tìm kiếm, website của bạn phải trở nên quen thuộc với các dịch vụ tìm kiếm như Google.
Một “chiêu” quan trọng để đạt được đìều này là tạo sitemap (có thể hiểu như bản đồ website) cho website của bạn và “khai báo” cho các dịch vụ tìm kiếm biết.
Hiện có nhiều công cụ tạo site map, trong số đó Sitemap Generator của AuditPC có lẽ là công cụ tốt nhất: nó là dịch vụ trực tuyến chạy trong trình duyệt (yêu cầu Java), không giới hạn số trang của website.
6. SEO Toolbar tools.seobook.com/seo-toolbar
Kiến thức - 10 công cụ SEO miễn phí
Thư viện bổ sung cho trình duyệt Firefox cung cấp bộ đồ nghề SEO hoàn chỉnh trên một thanh công cụ, bao gồm các kiểm tra thứ hạng (Google PR, Alexa Rank), phân tích website và từ khoá, so sánh các website cạnh tranh và nhiều tính năng hữu ích khác.
Một công cụ khác tương tự dành cho người dùng trình duyệt Google Chrome: Site SEO Tools (chrome.google.com/extensions/detail/diahigjngdnkdgajdbpjdeomopbpkjjc).
Thư viện mở rộng cho Chrome này cho bạn thông tin tổng quát về SEO của website trong một cửa sổ.
7. Yahoo! YSlow developer.yahoo.com/yslow/
Kiến thức - 10 công cụ SEO miễn phí
Đây là thư viện bổ sung cho trình duyệt Firefox dùng kết hợp với công cụ Firebug. YSlow phân tích trang web, thông tin về các thành phần trang web và đưa ra các khuyến nghị cải thiện tốc độ cũng như cung cấp các công cụ để phân tích tốc độ như Smush.it và JSLint.
8. Xenu Link Sleuth home.snafu.de/tilman/xenulink.html
Ứng dụng nhỏ gọn này chạy trên tất cả phiên bản Windows (môi trường desktop, không phải server), được thiết kế tốt và dễ dùng; nó có khả năng phát hiện nhanh chóng các liên kết hỏng (dẫn đến lỗi 404) trên website của bạn và cung cấp nhiều thông tin khác giúp bạn dễ làm SEO.
Kiến thức - 10 công cụ SEO miễn phí
9. SocialMention socialmention.com
Dịch vụ trực tuyến này dò tìm trên các trang blog, tiểu blog, diễn đàn, hỏi-đáp, mạng xã hội, lịch sự kiện và tin tức để “đo-đếm” thông tin đề cập đến thương hiệu của bạn hay từ khoá mà bạn nhập vào.
10. Website Grader websitegrader.com
Dịch vụ trực tuyến này đo lường hiệu quả tiếp thị của website.
Kiến thức - 10 công cụ SEO miễn phí
Nó đưa ra điểm số dựa trên những thông tin như lưu lượng truy cập website, SEO, mức độ phổ biến của website trên các mạng xã hội và các thông số kỹ thuật khác. Nó còn đưa ra lời khuyên cơ bản để cải thiện việc quảng bá website.
Xin trích lời một chuyên gia: “…SEO không thể đem lại kết quả ngay lập tức. Có thể mất hàng tháng, thậm chí là hàng năm để đưa được một trang web lên thứ hạng cao trên các dịch vụ tìm kiếm.
Người làm SEO phải thực sự đam mê, kiên nhẫn và chịu khó học hỏi, khám phá những kỹ thuật và kiến thức mới để thành công.”